用 Babel 和 Nodemon 搭建一个功能齐全的 Node.js 开发环境

前言

笔者最近在工作之余,一直在做数据可视化和nodejs方面的研究,虽然之前的web工作中接触过nodejs和可视化相关的内容,但是没有一个系统的总结和回顾,所以为了更深入的研究和复盘我的nodejs和数据可视化之路,笔者将会花两个月的时间,做一个彻底的复盘。

Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

可能很多朋友都或多或少的接触过nodejs,笔者先来大致总结了一下nodejs的应用领域:

用 Babel 和 Nodemon 搭建一个功能齐全的 Node.js 开发环境插图亿华云

由上图可以看出,nodejs的应用前景还是非常广泛的,前几年比较火的IOT物联网技术,nodejs也有一定的领域贡献.所以作为一名前端工程师(国际一点的叫法Front-end engineer), 要想让自己的未来有更多的想象空间,node是必不可少的技能之一.话不多说,接下来笔者将带大家一步步搭建一个高可用的nodejs开发环境,以便让大家能更快更好的上手nodejs的开发工作.

你将收获如何配置eslint来管理项目代码规范如何使用babel7来配置nodejs支持最新的es语法如何使用nodemon来自动化实现node程序自动重启如何划分node目录结构实现一个node通用服务类Xoa来实现经典的MVC架构

在介绍正文之前,我想先谈谈前端项目的管理。就笔者的工作和管理经验,衡量一个前端项目管理的好坏往往有以下几个衡量点:

用 Babel 和 Nodemon 搭建一个功能齐全的 Node.js 开发环境插图1亿华云

还原度和功能的完整性这两个方面可以通过完善的测试体系去把控,对于代码的扩展性,维护性和可读性的评定,首先需要由团队负责人去制定相应的代码规范和规则,最大限度的保证同一个项目不同模块的一致性。比如注释规范,格式规范,目录结构和文件命名等。其次放眼大局,公司如果有多个项目,或者多个项目会彼此联系,这时候我们更要从整个前端架构的角度去衡量和设计,所以前端项目不仅仅是泛泛而谈,它对企业长远的产品架构,技术架构上有着非常重要的作用。所以说制定团队或者项目规范,可以说是项目开始最为关键的一步。

1.配置eslint来管理项目代码规范

用 Babel 和 Nodemon 搭建一个功能齐全的 Node.js 开发环境插图2亿华云

用过eslint的朋友都知道,eslint主要是针对javascript代码检测用的插件化工具。它可以约束代码的书写格式,语法规范,比如保持代码一致的缩进,代码末尾有无分号,使用单引号还是双引号等,我们通过一系列的配置,将会打造完全一致的代码写作风格,这样对后期的代码管理和维护有着非常重要的意义。说了这么多,我们看看看怎么使用在我们的nodejs项目中吧。

首先在eslint官网我们可以知道下载和安装的方式,这里我们采用全局安装:

pm 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上有比较全面的规则配置表:

用 Babel 和 Nodemon 搭建一个功能齐全的 Node.js 开发环境插图3亿华云

当我们的配置规则配置完毕后,我们只需要在npm的scripts脚本文件中添加执行代码,eslint就会自动帮我们校验代码:

"scripts": {

"start": "eslint src

THE END
Copyright © 2024 亿华云