用babel和nodemon搭建一个功能齐全的nodejs开发环境
共 8109字，需浏览 17分钟
·
2022-03-01 06:07
前言
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
你将收获
如何配置eslint来管理项目代码规范 如何使用babel7来配置nodejs支持最新的es语法 如何使用nodemon来自动化实现node程序自动重启 如何划分node目录结构实现一个node通用服务类Xoa来实现经典的MVC架构
正文
1.配置eslint来管理项目代码规范
用过eslint的朋友都知道，eslint主要是针对javascript代码检测用的插件化工具。它可以约束代码的书写格式，语法规范，比如保持代码一致的缩进，代码末尾有无分号，使用单引号还是双引号等，我们通过一系列的配置，将会打造完全一致的代码写作风格，这样对后期的代码管理和维护有着非常重要的意义。说了这么多，我们看看看怎么使用在我们的nodejs项目中吧。
首先在eslint官网我们可以知道下载和安装的方式，这里我们采用全局安装：
npm install eslint --global
然后我们就可以在项目中生成eslint的配置文件了，具体可选择的配置文件类型有专属的.eslintrc的静态json文件， 或者可动态配置的eslintrc.js文件，这里笔者建议采用后者, 在当前项目下生成配置文件的命令如下：
eslint --init
这样通过命令行的方法我们就可以生成我们想要的eslint配置文件了。首先笔者先上一份简单的eslint配置文件：
module.exports = {"env": {"browser": true,"node": true, // 启用node环境"es6": true // 启用es6语法},"extends": "eslint:recommended","globals": {"Atomics": "readonly","SharedArrayBuffer": "readonly"},"parserOptions": {"ecmaVersion": 2018,"sourceType": "module"},"rules": {"semi": [2, "never"], // 结尾不能有分号"eqeqeq": "warn", // 要求使用 === 和 !=="no-irregular-whitespace": "warn", // 禁止不规则的空白"no-empty-pattern": "warn", // 禁止使用空解构模式"no-redeclare": "warn", // 禁止多次声明同一变量"quotes": ["error", "single"], // 代码中使用单引号包裹字符串"indent": ["warn", 2], // 代码缩进为2个空格"no-class-assign": "error", // 禁止修改类声明的变量"no-const-assign": "error", // 禁止修改 const 声明的变量}};
其中rules中键的值分别表示：
“off” or 0 - 关闭规则 “warn” or 1 - 将规则视为一个警告（不会影响退出码） “error” or 2 - 将规则视为一个错误 (退出码为1)
这里的rule规则大家可以采用市面上已有的规则文件或者可以根据自己的团队风格自行配置，eslint上有比较全面的规则配置表：
当我们的配置规则配置完毕后，我们只需要在npm的scripts脚本文件中添加执行代码，eslint就会自动帮我们校验代码：
"scripts": {"start": "eslint src && export NODE_ENV=development && nodemon -w src"}
2.如何使用babel7来配置nodejs支持最新的es语法
@babel/cli @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/preset-env
关于babel的配置机制，官网上也写的很详细，大家感兴趣的可以看一下，核心就是环境（presets）和插件（plugin）机制。官网对preset-env的解释如下：
即@babel/preset-env是一个智能的允许我们使用最新javascript语法的代码自动转化工具。同时官网也列出了不同配置属性对应的不同功能，为了节约篇幅，我们直接上配置的代码：
module.exports = function (api) {api.cache(true)const presets = [['@babel/preset-env',{'targets': {'node': 'current'}}]]const plugins = [['@babel/plugin-proposal-decorators', { 'legacy': true }],['@babel/plugin-proposal-class-properties', { 'loose' : true }]]return {presets,plugins}}
这也是官方推荐的使用方式，更多灵活的配置大家可以参考官网配置。以上两个plugin的作用不言而知，一个是用来编译转换修饰器属性的，一个是用来编译转换class语法的。最后一步就是在package.json中的脚本文件中使用我们的babel工具：
"scripts": {"start": "eslint src && nodemon -w src --exec \"babel-node src\"","build": "babel src --out-dir dist"}
babel-node src指定了需要编译的node目录为src目录，其他文件和目录无需编译。
通过这样的配置，我们就能开心的用最新的javascript语法开发nodejs项目了,在代码编写完成之后，我们执行npm run build即可将src的代码打包编译到dist目录下。编译后的代码如下：
"use strict";var _glob = _interopRequireDefault(require("glob"));var _path = require("path");var _xoa = _interopRequireDefault(require("./lib/xoa.js"));var _config = _interopRequireDefault(require("./config"));function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }const app = new _xoa.default();app.use((req, res) => {console.log(req.url, req.method);}); // 全局注册业务接口// function autoRegister(path, )_glob.default.sync((0, _path.resolve)(__dirname, './routes/*.js')).forEach(item => {app.use(require(item).default);});// ...
3.如何使用nodemon来自动化实现node程序自动重启
nodemon的使用非常简单，我们只需要按照官网文档的配置来安装和使用即可：
npm install --save-dev nodemon然后在package.json的脚本文件中如下配置：
"scripts": {"start": "eslint src && export NODE_ENV=development && nodemon -w src --exec \"babel-node src\"","build": "babel src --out-dir dist","buildR": "node dist","test": "echo \"Error: no test specified\" && exit 1"}
nodemon -w src 表示监听src目录下的文件变化，一旦文件变化将立刻重新启动node程序。我们还可以专门写一个nodemon的配置文件，实现不监听某一个具体的文件变动，或者其他自定义的配置，如果服务上线，我们还可以用forever和nodemon结合来是实现持久化，当然主流的方式还是pm2.
4.如何划分node目录结构实现一个node通用服务类Xoa来实现经典的MVC架构
第四点是本文的核心和关键，目录划分往往考验的是程序员对项目和架构的理解程度，对于服务端的目录结构，笔者的经验如下：
具体目录如下：
当然不同目录之间可以进一步细分，这个取决于项目规模。通过对项目有条理的结构化设计，团队中不同的成员就可以有序的负责不同的模块了。这种架构模式参考了传统的mvc的模式，具体还是需要代码层面进一步控制。
import { createServer } from 'http'createServer((req, res) => {res.end('hello world!')}).listen(3000)
这样就创建了一个简单的服务器，当我们访问localhost:3000的话我们就能看到页面会显示hello world! 但是我们如果要想实现更复杂的功能，比如根据不同的路由处理不同的逻辑，我们该怎么办呢？也许你会说直接在createServer的回调中根据req.url来判断，代码如下：
import { createServer } from 'http'createServer((req, res) => {if(req.url === 'A') {// A的逻辑}else if(req.url === 'B') {// B的逻辑}else if(req.url === 'C') {// C的逻辑}// ...}).listen(3000)
但是一旦业务逻辑复杂了，路由变多了，我们将写大量的if else代码，这对于维护性来说是一种极大的摧毁，我们希望将路由和业务逻辑划分，分开来管理，这样对于后期业务逻辑日渐复杂，页面路由不断增加才更加容易维护和管理。如何实现这一目标呢？我们可以参考koa的中间件机制，当我们要注册一个路由时，我们只需要这样写：
app.use(routeA)这样是不是更优雅一点呢？所以我们基于以上需要来实现一个自己的小型服务框架
import { createServer } from 'http'class Xoa {constructor() {// 初始化中间键数组this.middleware = []}// 维持中间键数组use(func) {this.middleware.push(func)}// 创建服务器实例,并执行相应任务createServer() {const server = createServer((req, res) => {// 应用中间件this.middleware.forEach((fn) => fn(req, res))})return server}// 服务器监听listen(port = 3000, cb) {this.createServer().listen(port, cb)}}export default Xoa
通过这样的设计，我们就能优雅的使用中间件语法了：
import Xoa from './lib/xoa.js'const app = new Xoa()app.use((req, res) => {console.log(req.url, req.method)res.end('A')})app.use((req, res) => {res.end('B')})app.listen(3000)
我们再来看另外一种场景，如果我们的路由很多，有负责页面渲染的路由，也有负责输出api数据的路由，那么我们要每个都使用use来use一遍，这样感觉太傻了，作为一个有追求的程序员是不允许这种事情发生的，我们希望这一切都是自动完成的，自动注册中间件，这该怎么实现呢？
好在node社区提供了一个强大的第三方模块glob，我们可以通过glob来遍历目录实现自动化注册路由，关于glob的用法这里就不带大家细说了，用法非常简单。
比如我们的路由文件有如下几个：
import glob from 'glob'import { resolve } from 'path'import Xoa from './lib/xoa.js'import config from './config'const app = new Xoa()// 全局注册业务接口glob.sync(resolve(__dirname, './routes/*.js')).forEach(item => {app.use(require(item).default)})app.listen(config.serverPort, () => {console.log(`服务器地址:${config.protocol}//${config.host}:${config.serverPort}`)})
通过glob的sync方法我们可以遍历routes目录并通过require加载路由文件，然后直接注册到app上，这样就不用我们手动一个个引入了，是不是非常简单呢？（虽然这只是个极简版的服务端封装，对于实际项目需要做进一步的升级和扩展，但是设计思想希望大家能有所收获）
对于负责项目我们可能还会考虑业务逻辑，我们会在service目录下编写我们的服务层代码，在路由文件中使用，也有可能采用到数据库模块等，所以说这些都是比较有意思的实现，后面笔者将带大家继续做一个全栈项目，来感受node开发的魅力。
注: 本文代码已传到github上了，地址：https://github.com/MrXujiang/smart-node-tpl
欢迎大家多交流讨论哈～