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

本文详细介绍了如何在NodeJS项目中利用Babel和Gulp优雅地使用ES6。从Babel的preset和plugin配置,到Gulp的安装与配置,以及如何结合eslint进行代码风格检查,最后将Gulp整合进npm命令体系,提升开发效率。
摘要由CSDN通过智能技术生成

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

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

现在开始Babel

在开始使用Babel之前,假设
1. 你已经安装了nodejs,并且已经熟悉了Js。
2. 你也可以使用npm安装各种依赖包。
3. 而且你也对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本身不处理语言特性的转码。这些功能都是由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

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一类的项目使用。

分别介绍这两种方法。
安装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文件中添加如下的配置,两个二选其一即可:

<
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值