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

来源:互联网 时间:2017-01-22

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


NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性。只是在使用的时候需要在node后面加上参数: --harmony
。但是,即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到 Babel
了。


现在开始Babel

在开始使用Babel之前,假设



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



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


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




同时假设你已经安装了
yarn
,并且也熟悉了yarn。Yarn最大的优点就是它比 npm
要快很多,因为yarn只把需要的库下载一次,之后用到的时候直接使用本地缓存的版本。npm每次都会下载这些库。这简直就是浪费生命。如果你还没有安装yarn,也没有关系,下面也会有npm的使用方法。


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


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

安装babel的presets。


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


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


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


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

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




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



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



分别介绍这两种方法。



安装 babel-polyfill
:


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'



使用 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

// to be continued...



相关阅读:
Top