由于 Babel,WebPack, React 技术的流行, 小明同学已经开始在前端代码里面用上了 ECMAScript 2015 (以下称 ES6 ) 的众多特性。import
, export
, class
, arrow function
, let const
等等关键词甚至都已经开始变成小明的肌肉记忆。
但是等等,对于小明这样既写 React 又写 Node.js 的的人来说,又有点分裂了。经常性的在 Node.js 里面写 import xxx from 'xxx';
然后被 Node.js 的解析器无情的拒绝;
另外对于一致性有点追求的人肯定受不了同一个仓库, 同一类脚本, 同一个人维护却有两种风格。
恩, 不能忍!
其实 Node.js 对 ES6 的很多特性都已经开始支持了。 在 Node.js 使用的 JS 引擎 V8 里面将不同状态 ES6 特性分成了 3 个等级:
本文使用的 Node.js 版本号:
稳定版本:4.2.4
对应 V8 引擎的版本:4.5.103.35
最新版本:5.3.0
对应 V8 引擎版本:4.6.85.31
目前默认开启的 ES6 特性如下:
对于这些官方引擎的特性,由于在底层实现,在性能与稳定性都有更高保障,在任何时候我们都应该优先使用。
--harmony
参数开启的 ES6 特性 --harmony_modules (enable "harmony modules")
--harmony_array_includes (enable "harmony Array.prototype.includes")
--harmony_regexps (enable "harmony regular expression extensions")
--harmony_proxies (enable "harmony proxies")
--harmony_sloppy (enable "harmony features in sloppy mode")
--harmony_unicode_regexps (enable "harmony unicode regexps")
--harmony_reflect (enable "harmony Reflect API")
--harmony_destructuring (enable "harmony destructuring")
--harmony_sharedarraybuffer (enable "harmony sharedarraybuffer")
--harmony_atomics (enable "harmony atomics")
--harmony_new_target (enable "harmony new.target")
『in progress』特性是那些将要支持(但具体时间未知)的特性。
Babel 是一个插件式的 JavaScript 编译器, 能将一些当前 JS 引擎中不支持的特性和语法, 通过一个个特定插件,转换成当前引擎可以理解的 JS 脚本。 我们可以使用 Babel 来转换我们的 Node.js 脚本。
接下来, 我们就可以去 Babel 插件列表去选择对应的转换插件来为我们的 Node.js 插上隐形的翅膀了。
选择 ES 转换的原则
基于这个原则, 小明筛选出如下插件。
'use strict';
)from
import Mod from './mod';
new Mod();
to
'use strict';
var _mod = require('./mod');
var _mod2 = _interopRequireDefault(_mod);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
new _mod2.default();
from:
export default class Mod {
}
to:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
class Mod {}
exports.default = Mod;
上面这些选择的插件可以根据个人口味以及 Node.js 版本 进行添加或删除。选好模块, 我们就可以安装插件以及创建对应得babel配置文件去处理
在 npm 模块或应用目录下执行
# 安装 core 和命令行工具
$ npm install --save-dev babel-core babel-cli
# 安装所有插件
$ npm install --save-dev babel-plugin-transform-strict-mode babel-plugin-transform-es2015-modules-commonjs babel-plugin-transform-es2015-spread babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-parameters
在应用根目录下面创建对应的配置文件 .babelrc
,
{
"plugins": [
"transform-strict-mode",
"transform-es2015-modules-commonjs",
"transform-es2015-spread",
"transform-es2015-destructuring",
"transform-es2015-parameters"
]
}
由于 Node.js本身有加载器, 所以不需要将所有文件打包成一个文件, 推荐的做法是, 添加一个 src
目录, 用于存放 ES6 脚本, 然后将整个目录打包到 lib
目录下, 对应的脚本为
babel src --out-dir lib
开发调试的时候, 可以直接用 babel-cli 模块提供 babel-node
代替 node
直接启动 src
目录下面的入口脚本。
babel-node src/index.js
最后, 将命令封装到 package.json
里面
{
"name": "my-awasome-es6-package",
"version": "1.0.0",
"description": "use es6 in node",
"main": "lib/index.js",
"scripts": {
"start": "babel-node src/index.js",
"build": "babel src --out-dir lib"
},
"devDependencies": {
"babel-cli": "~6.3.17",
"babel-core": "~6.3.26",
"babel-plugin-syntax-object-rest-spread": "^6.3.13",
"babel-plugin-transform-es2015-modules-commonjs": "^6.3.16",
"babel-plugin-transform-es2015-spread": "^6.3.14",
"babel-plugin-transform-object-rest-spread": "^6.3.13",
"babel-polyfill": "^6.3.14"
}
}
我们就可以使用下面的命令启动和编译我们的代码了
# npm run build 构建脚本
# npm start 使用 babel-node 启动进程
这里的注意点:
babel-node
不适合用于生产环境,生产环境应使用编译后的代码。 不过在开发环境里面使用还是挺方便的。接下来你可能会问
大家可以在这里 ( Using Babel ) 查到更多感兴趣的信息