查看: 2429|回复: 0

[HTML代码] 如何在NodeJS项目中优雅的使用ES6

发表于 2017-7-23 08:51:26
尚学堂AD
如何在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

  1. yarn add babel-cli --dev // npm install --save-dev babel-cli
复制代码

安装babel的presets。

  1. yarn add babel-preset-es2015 --dev // npm install --save-dev babel-preset-es2015
复制代码

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

Babel的plugin和preset

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

  1. 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 :

  1. 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 也非常简单。安装:

  1. yarn add babel-plugin-transform-runtime --dev // npm install --save-dev babel-plugin-transform-runtime
复制代码

另外还需要安装 babel-runtime :

  1. yarn add babel-runtime // npm install --save babel-runtime
复制代码

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

  1. // without options
  2. {
  3. "plugins": ["transform-runtime"]
  4. }
  5. // with options
  6. {
  7. "plugins": [
  8. ["transform-runtime", {
  9. "helpers": false, // defaults to true
  10. "polyfill": false, // defaults to true
  11. "regenerator": true, // defaults to true
  12. "moduleName": "babel-runtime" // defaults to "babel-runtime"
  13. }]
  14. ]
  15. }
复制代码

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

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

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

  1. import Express from 'express'
  2. let app = Express()
  3. app.get('/', (req, res) => {
  4. res.send('hello world')
  5. })
  6. app.listen(8080, () => console.log('server is running at http://localhost:8080'))
复制代码

运行命令:

  1. ./node_modules/.bin/babel-node index.js --preset es2015, stage-0
复制代码

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

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

  1. {
  2. "presets": ["es2015", "stage-0"]
  3. }
复制代码

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

  1. babel -w code/ -d build/
复制代码

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

在文件中使用Source Maps

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

  1. async function errorAsyncFunc() {
  2. try{
  3. throw new Error('Async function error')
  4. } catch(e) {
  5. throw e
  6. }
  7. }
  8. errorAsyncFunc()
复制代码

在转码命令中加一个 --source-maps 可以解决这个问题:

  1. babel code/ -d build/ --source-maps
复制代码

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

  1. "scripts": {
  2. "build": "babel src -d build --source-maps",
  3. "start": "node build/index.js"
  4. },
复制代码

接下来:

  1. npm run build
复制代码

// to be continued...

来自:https://segmentfault.com/a/1190000008162239



回复

使用道具 举报