如何在NodeJS项目中优雅的使用ES6

时间 2019-11-18

标签如何 nodejs 项目优雅使用 es6 栏目 JavaScript 繁體版

原文原文链接

yarn：
sudo apt-get update && sudo apt-get install yarn

NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候须要在node后面加上参数：--harmony。可是，即便如此node也仍是没有支持所有的ES6特性。因此这个时候就须要用到Babel了。javascript

如今开始Babel

在开始使用Babel以前，假设
1. 你已经安装了nodejs，而且已经熟悉了Js。
2. 你也可使用npm安装各类依赖包。
3. 并且你也对ES6（后来改成ES2015）有必定程度的熟悉。java

同时假设你已经安装了yarn，而且也熟悉了yarn。Yarn最大的优势就是它比npm要快不少，由于yarn只把须要的库下载一次，以后用到的时候直接使用本地缓存的版本。npm每次都会下载这些库。这简直就是浪费生命。若是你尚未安装yarn，也没有关系，下面也会有npm的使用方法。node

接下来开始安装配置Babel。安装babel-cligit

yarn add babel-cli --dev // npm install --save-dev babel-cli

安装babel的presets。es6

yarn add babel-preset-es2015 --dev // npm install --save-dev babel-preset-es2015

这个时候你就可使用ES2015的特性了。可是，这还不够，好比我不想用Promise我想用更加方便的async/await语法。只有es2015这个preset是不够的。github

Babel的plugin和preset

Babel自己不处理语言特性的转码。这些功能都是由plugin和preset实现的（preset也是一个plugin的集合）。如上文所述，要使用es2015的内容就须要安装babel-preset-es2015这个preset。要使用async/await那么就须要安装对应的preset或者插件。为了简单咱们安装preset：babel-preset-stage-0。preset stage-0包含了async/await相关的插件: babel-plugin-syntax-async-functions、babel-plugin-transform-regenerator。web

yarn add babel-preset-stage-0 --dev // npm install --save-dev babel-preset-stage-0

这样仍是不能在项目中使用es7的async/await了。还须要更多的配置，有两种方法能够达到目的：
1. 使用babel-polyfill。有一个很差地地方，babel-polyfill会污染global对象，因此不适合于library之类的使用。仅适合于web app使用。
2. 使用babel运行时转码工具，transform-runtime插件。使用这个方法正好弥补了上面的方法的不足之处。它是尤为适合于library一类的项目使用。sql

分别介绍这两种方法。
安装babel-polyfill:express

yarn add babel-polyfill --dev // npm install --save-dev babel-polyfill

以后，在你的项目的入口文件的最上方引入babel-polyfill。好比我如今有一个Express的Web App，那么的入口文件就是开启这个app的index.js文件。在这个文件的最上方引入polyfill，require('babel-polyfill')。或者你的入口文件已是ES2015的写法了，那么就直接import，import 'babel-polyfill'。npm

使用transform-runtime也很是简单。安装：

yarn add babel-plugin-transform-runtime --dev // npm install --save-dev babel-plugin-transform-runtime

另外还须要安装babel-runtime:

yarn add babel-runtime  // npm install --save babel-runtime

以后在.babelrc文件中添加以下的配置，两个二选其一便可：

// without options { "plugins": ["transform-runtime"] } // with options { "plugins": [ ["transform-runtime", { "helpers": false, // defaults to true "polyfill": false, // defaults to true "regenerator": true, // defaults to true "moduleName": "babel-runtime" // defaults to "babel-runtime" }] ] }

剩下的就是欢畅的使用async/await了。

另外若是要使用Object.assing这样的方法的话，也可使用插件：babel-plugin-transform-object-assign，若是要使用解构赋值可使用插件：babel-plugin-transform-object-rest-spread。固然这些都包含在了stage-0这个preset中。

如今就开始写ES2015的代码吧。在项目中安装ExpressJs，建立一个index.js文件。咱们来试着建立一个小小的web app做为练习：

import Express from 'express' let app = Express() app.get('/', (req, res) => { res.send('hello world') }) app.listen(8080, () => console.log('server is running at http://localhost:8080'))

运行命令：

./node_modules/.bin/babel-node index.js --preset es2015, stage-0

使用命令babel-node*就可让代码运行起来，后面的参数指定了在转义js代码的时候使用的preset和plugin。

Babel官方推荐的方法是时候用.babelrc文件，这一方式能够更加灵活。在项目的更目录上建立.babelrc文件，在里面添加你安装的preset和plugin的描述：

{
    "presets": ["es2015", "stage-0"] }

这样能够直接使用babel-node来执行代码，或者使用命令babel来转义代码。如：

babel -w code/ -d build/

babel命令会从配置文件中读取配置，来变异code/目录下的文件，并把转义以后的JavaScript文件导出到build/目录下。还有命令行里的参数-w，这个命令参数指定的是watch，每次code目录的文件修改后都会触发babel命令的再次执行。

在文件中使用Source Maps

上面看起来很不错了。可是还有一个问题，在你调试代码的时候，你调试的实际是babel命令转码以后的js，不是原来你编写的源代码所在的文件。调试的不是源文件，多少会有些不便。好比下面的文件会抛出一个异常：

async function errorAsyncFunc() { try{ throw new Error('Async function error') } catch(e) { throw e } } errorAsyncFunc()

在转码命令中加一个--source-maps能够解决这个问题：

babel code/ -d build/ --source-maps

最后在package.json里添加scripts节点：

"scripts": { "build": "babel src -d build --source-maps", "start": "node build/index.js" },

接下来：

npm run build

Gulp出场

上文讲述了如何使用Babel实现ES201x的开发。可是在正式的开发中，上面的这些配置还略显不足，尤为是你的项目包括web端、server端，尤为web端不只处理ES201x的代码还须要处理。因此须要Gulp出场。

这玩意儿看起来很复杂，你定义了编译的过程。其实掌握了之后很好用，尤为是能够自动处理不少东西，节约大把时间。要使用Gulp，必须先安装NodeJS。这个基本是标配。而后你会用到它的命令行工具。

安装Gulp

在最新发布的Gulp里有一点调整。gulp-cli从gulp分离出来做为单独的一部分使用。因此，若是你已经安装过gulp以前的版本须要先删除：

npm rm --global gulp

安装gulp-cli

yarn global add gulp-cli  // npm install --global gulp-cli

在–dev模式下安装gulp

yarn add gulp --dev // npm install --save-dev gulp

建立gulp配置文件

就像Babel要用.babelrc做为配置文件同样，gulp也须要一个配置文件。这个配置文件就是gulpfile.js, 可是和babel同用的状况下把gulpfile.js重命名为gulp.babel.js：

mv "gulpfile.js" "gulpfile.babel.js"

gulp的使用仍是很简单的，主要就是在gulpfile.babel.js文件中添加各类task。在这些task中必定要添加一个叫作default的task，gulp命令的执行起点就是从这里开始。

假设有这么一个场景：

使用eslint检查代码，发现代码风格和潜在的错误。
自动实现ES201x -> ES5的代码转码，并把转码后的代码放在指定目录下。
在转码的时候添加sourcemaps。

以上这些“任务”都是用gulp自动实现。该如何配置呢？

gulp和eslint

要在gulp中使用各类请他的相似于eslint这样的功能的时候须要使用在gulp上的对应的插件。没错，gulp的设计思路和gulp基本同样：插件机制。

那么咱们就须要首先下载eslint的插件：

yarn add --dev gulp-eslint // npm install --save-dev gulp-eslint

在开始编写咱们的第一个task以前, 作最后的准备工做。首先须要配置.eslintrc文件。eslint会根据这个文件定义的规则检查代码的风格。咱们不许备大批的配置规则，这样很是耗时间并且也照顾不到不少咱们项目已经保留下来的编码风格。因此，airbnb的一套规则拿来使用时最好的办法。

安装eslint

yarn add --dev eslint // npm install --save-dev eslint

而后你能够运行命令来初始化配置：./node_modules/.bin/eslint --init。你也能够忽略这个命令，直接建立一个.eslintrc的文件。

安装eslint的airbnb扩展

要使用airbnb的一套规则就须要安装他们的eslint扩展：

yarn add eslint-config-airbnb --dev // npm install --save-dev eslint-config-airbnb

命令执行以后会提示有些依赖项没有安装，分别是eslint-plugin-import@^2.2.0、eslint-plugin-import@^2.2.0、eslint-plugin-jsx-a11y@^3.0.2。依次安装这些依赖项就好。

.eslintrc

{
  "env": { "es6": true }, "rules": { "semi": "off", "import/no-extraneous-dependencies": ["error", { "devDependencies": true, "optionalDependencies": false, "peerDependencies": false }] ,"quotes": ["error", "single", {"allowTemplateLiterals": true}] }, "extends": "airbnb" }

env指定环境是支持es6的，rules指定的是一些补充内容，好比字符串使用单引号仍是双引号等。这个是根据我的喜爱配置的，你能够选择添加你须要的规则。最后是extends，这里配置airbnb就用上了airbnb的一套eslint编码检查规则。

gulp-eslint插件用起来

import gulp from 'gulp' import eslint from 'gulp-eslint // 配置须要处理的文件目录和转码以后文件的存放目录 const paramConfig = { source: 'src/**/*.js', dest: 'build', }

引入相关模块以后开始写任务：

gulp.task('lint', () => { // eslint配置，使用配置的文件目录。排除node_modules下的所有文件。 return gulp.src([paramConfig.source, '!node_modules/**']) .pipe(eslint()) .pipe(eslint.result(result => { console.log(`ESLint result: ${result.filePath}`); console.log(`# Messages: ${result.messages.length}`); console.log(`# Warnings: ${result.warningCount}`); console.log(`# Errors: ${result.errorCount}`); })) .pipe(eslint.format()) .pipe(eslint.failOnError()) })

如前文所述，default任务是必须：

gulp.task('default', ['lint'], function () { // lint任务成功执行以后执行这个方法 });

跳转到项目的目录下，运行gulp命令。会获得以下的输出：

$ gulp
[21:43:01] Requiring external module babel-register [21:43:01] Using gulpfile ~/Documents/test-polyfill/gulpfile.babel.js [21:43:01] Starting 'lint'... [21:43:02] Starting 'babel-sourcemaps'... ESLint result: ~/Documents/test-polyfill/src/index.js # Messages: 0 # Warnings: 0 # Errors: 0 ESLint result: ~/Documents/test-polyfill/src/test.js # Messages: 0 # Warnings: 0 # Errors: 0 [21:43:02] Finished 'lint' after 605 ms [21:43:02] Finished 'babel-sourcemaps' after 653 ms [21:43:02] Starting 'default'... gulp default task! [21:43:02] Finished 'default' after 98 μs

gulp和babel

此次同时处理babel和sourcemaps的问题。
首先安装插件：

yarn add --dev gulp-babel // npm install --save-dev gulp-babel

import gulp-babel插件：

import babel from 'gulp-babel' import sourcemaps from 'gulp-sourcemaps'

添加任务：

gulp.task('babel-sourcemaps', () => { return gulp.src(paramConfig.source) .pipe(sourcemaps.init()) .pipe(babel()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(paramConfig.dest)) })

修改default任务：
javascript gulp.task('default', ['lint', 'babel-sourcemaps'], () => { console.log('gulp default task!') })

若是你不想用sourcemaps的话，能够这么写：
javascript gulp.task('babel', () => { return gulp.src(paramConfig.source) .pipe(babel()) .pipe(gulp.dest(paramConfig.dest)) })

把gulp放在npm命令体系下

babel老早就配置好了，如今和配置好了gulp。gulp每次输入命令基本上就是手动执行。如今应该让这个命令半自动执行了。

修改package.json文件，在其中添加scripts节点：

"scripts": { "build": "gulp", "start": "node build/index.js" },

如此一来，不少的命令均可以像gulp同样放在npm的scripts里执行。好比，如今能够在命令行李输入以下命令来实现lint和babel转码：

npm run build

开始执行：

npm start

总结

使用bebel能够提早使用最新的JavaScript语言特性，这样编写不少代码的时候会变得简洁高效。而且babel转码以后生成的代码也是很是规范的ES5写法，同时是在严格模式下的。因此，咱们在写ES201x代码的时候不须要再添加'use strict';标识。

使用gulp又可使不少不大不小可是很费时间的事自动处理。

把这二者结合在一块儿会让你的项目开发效率提高不少。因此，看到这里你不以为你应该赶快在项目里使用这些技术，让开发进入快车道吗！！！？？？