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

在开始使用Babel之前，假设

你已经安装了nodejs，并且已经熟悉了Js。

你也可以使用npm安装各种依赖包。

而且你也对ES6（后来改为ES2015）有一定程度的熟悉。

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

安装babel的presets。

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

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

这样还是不能在项目中使用es7的async/await了。还需要更多的配置，有两种方法可以达到目的：

使用<code>babel-polyfill</code>。有一个不好地地方，<code>babel-polyfill</code>会污染global对象，所以不适合于library之类的使用。仅适合于web app使用。

使用babel运行时转码工具，<code>transform-runtime</code>插件。使用这个方法正好弥补了上面的方法的不足之处。它是尤其适合于library一类的项目使用。

分别介绍这两种方法。

安装<code>babel-polyfill</code>:

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

使用<code>transform-runtime</code>也非常简单。安装：

另外还需要安装<code>babel-runtime</code>:

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

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

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

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

运行命令：

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

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

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

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

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

在转码命令中加一个<code>--source-maps</code>可以解决这个问题：

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

接下来：

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

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

在最新发布的Gulp里有一点调整。gulp-cli从gulp分离出来作为单独的一部分使用。所以，如果你已经安装过gulp之前的版本需要先删除：

安装gulp-cli

在--dev模式下安装gulp

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

<code>gulp</code>的使用还是很简单的，主要就是在gulpfile.babel.js文件中添加各种task。在这些task中一定要添加一个叫做default的task，gulp命令的执行起点就是从这里开始。

假设有这么一个场景：

使用eslint检查代码，发现代码风格和潜在的错误。

自动实现ES201x -&gt; ES5的代码转码，并把转码后的代码放在指定目录下。

在转码的时候添加sourcemaps。

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

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

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

然后你可以运行命令来初始化配置：<code>./node_modules/.bin/eslint --init</code>。你也可以忽略这个命令，直接创建一个.eslintrc的文件。

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

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

<code>env</code>指定环境是支持es6的，rules指定的是一些补充内容，比如字符串使用单引号还是双引号等。这个是根据个人喜好配置的，你可以选择添加你需要的规则。最后是<code>extends</code>，这里配置airbnb就用上了airbnb的一套eslint编码检查规则。

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

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

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

这次同时处理babel和sourcemaps的问题。

首先安装插件：

<code>import</code> gulp-babel插件：

添加任务：

修改default任务：

<code>javascript gulp.task('default', ['lint', 'babel-sourcemaps'], () =&gt; { console.log('gulp default task!') })</code>

如果你不想用sourcemaps的话，可以这么写：

<code>javascript gulp.task('babel', () =&gt; { return gulp.src(paramConfig.source) .pipe(babel()) .pipe(gulp.dest(paramConfig.dest)) })</code>

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

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

如此一来，很多的命令都可以像gulp一样放在npm的scripts里执行。比如，现在可以在命令行李输入如下命令来实现<code>lint</code>和<code>babel</code>转码：

开始执行：

使用bebel可以提前使用最新的JavaScript语言特性，这样编写很多代码的时候会变得简洁高效。并且babel转码之后生成的代码也是非常规范的ES5写法，同时是在严格模式下的。所以，我们在写ES201x代码的时候不需要再添加<code>'use strict';</code>标识。

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

把这两者结合在一起会让你的项目开发效率提升很多。所以，看到这里你不觉得你应该赶快在项目里使用这些技术，让开发进入快车道吗！！！？？？

欢迎加群互相学习，共同进步。QQ群：iOS: 58099570 | Android: 572064792 | Nodejs：329118122 做人要厚道，转载请注明出处！

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/sunshine-anycall/p/6338010.html，如需转载请自行联系原作者