共计 3689 个字符，预计需要花费 10 分钟才能阅读完成。
如何让 node 运行 es6 模块文件，及其原理
最新版的 node 支持最新版 ECMAScript 几乎所有特性，但有一个特性却一直到现在都还没有支持，那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的，包括 node 项目，所以，node 不能运行 es6 模块文件就会很不便。
让 node 运行 es6 模块文件的方式有两种：
转码 es6 模块为 commonjs 模块
hook node 的 require 机制，直接让 node 的 require 加载 import/export
1. 转码 es6 模块为 commonjs 模块
因为 node 支持几乎所有除 import/export 外的语法，所以我们只需要将 import/export 转码成 require/exports，而不需要转码其他语法。
比如下面的项目：
– package.json
– src/
– index.js
– print.js
– …
# package.json
{
“main”: “lib/index.js” # 由工具转码 src 目录下源文件到 lib 目录下
}
# src/index.js
import print from ‘./print’;
print(‘index’);
export default print;
# src/print.js
export default str => {
console.log(‘print: ‘ + str);
};
因为 src 目录下的源文件都是 es6 模块化规范的，node 并不能直接运行，所以需要转码成 commonjs 规范的代码。
这个过程有两个方案：
如果不会单独使用 src 目录下的某个文件，而仅仅是以 src/index.js 为入口文件使用，可以把 src 目录下的文件打包成一个文件到 lib/index.js：这种方式推荐使用工具 rollup
如果需要单独使用 src 目录下的文件，那就需要把 src 目录下的文件一对一的转码到 lib 目录下：这种方式推荐使用工具 gulp + babel
1.1 用 rollup 把 src 目录下的文件打包成一个文件到 lib/index.js
相关文件：
# rollup.config.js
export default {
input: ‘src/index.js’,
output: {
file: ‘lib/index.js’,
format: ‘cjs’,
},
};
# package.json
{
“scripts”: {
“build”: “rollup -c”
},
“devDependencies”: {
“rollup”: “^0.66.4”
}
}
运行命令：
npm run build
结果：
# lib/index.js
‘use strict’;
var print = str => {
console.log(‘print: ‘ + str);
};
print(‘index’);
module.exports = print;
1.2 用 gulp + babel 把 src 目录下的文件一对一的转码到 lib 目录下
相关文件：
# build.js
const gulp = require(‘gulp’);
const babel = require(‘gulp-babel’);
gulp.task(‘babel’, () =>
gulp.src(‘src/**/*.js’)
.pipe(babel({
plugins: [‘@babel/plugin-transform-modules-commonjs’]
}))
.pipe(gulp.dest(‘lib’))
);
gulp.series(‘babel’)();
# package.json
{
“scripts”: {
“build”: “node build.js”
},
“devDependencies”: {
“@babel/core”: “^7.1.2”,
“@babel/plugin-transform-modules-commonjs”: “^7.2.0”,
“gulp”: “^4.0.0”,
“gulp-babel”: “^8.0.0”
}
}
运行命令：
npm run build
结果：
# lib/index.js
“use strict”;
Object.defineProperty(exports, “__esModule”, {
value: true
});
exports.default = void 0;
var _print = _interopRequireDefault(require(“./print”));
function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj}; }
(0, _print.default)(‘index’);
var _default = _print.default;
exports.default = _default;
# lib/print.js
“use strict”;
Object.defineProperty(exports, “__esModule”, {
value: true
});
exports.default = void 0;
var _default = str => {
console.log(‘print: ‘ + str);
};
exports.default = _default;
2. hook node 的 require 机制，直接加载 import/export
这种机制一般是通过对 node 的 require 机制进行 hook，劫持 require 抓取的源文件代码，把源代码转码成 commonjs 规范之后，再传送给 require 机制原本的代码流中。
pirates 之类的第三方 npm 包提供了这种添加 hook 的功能。
babel-register 便是使用这种方式达到 node 运行 es6 模块文件的目的的。
2.1 使用 babel-register 直接运行 es6 模块文件
示例目录：
– package.json
– src/
– entry.js # 这里多了一个入口文件，专门用于注册 babel-register
– index.js
– print.js
– …
相关文件：
# package.json
{
“scripts”: {
“run”: “node src/entry.js”
},
“devDependencies”: {
“@babel/core”: “^7.1.2”,
“@babel/plugin-transform-modules-commonjs”: “^7.2.0”,
“@babel/register”: “^7.0.0”
}
}
# src/entry.js # 入口文件必须使用 commonjs 规范来写，因为还没有注册 hook
require(‘@babel/register’)({
plugins: [‘@babel/plugin-transform-modules-commonjs’]
});
require(‘./index’);
# src/index.js
import print from ‘./print’;
print(‘index’);
# src/print.js
export default str => {
console.log(‘print: ‘ + str);
};
运行：
npm run run
结果：
# 命令行打印
print: index
这种方式因为中间转码会有额外的性能损耗，所以不建议在生产环境下使用，只建议在开发模式下使用。
2.2 使用 babel-node 直接运行 es6 模块文件
babel-node 对 babel-register 进行了封装，提供了在命令行直接运行 es6 模块文件的便捷方式。
示例目录：
– package.json
– src/
– index.js
– print.js
– …
相关文件：
# package.json
{
“scripts”: {
“run”: “babel-node src/index.js –plugins @babel/plugin-transform-modules-commonjs”
},
“devDependencies”: {
“@babel/core”: “^7.1.2”,
“@babel/node”: “^7.2.0”,
“@babel/plugin-transform-modules-commonjs”: “^7.2.0”
}
}
# src/index.js
import print from ‘./print’;
print(‘index’);
# src/print.js
export default str => {
console.log(‘print: ‘ + str);
};
运行：
npm run run
结果：
# 命令行打印
print: index
这种方式也不建议在生产环境下使用，只建议在开发模式下使用。
3. 链接
es6 就是指 ECMAScript 2015
es7 就是指 ECMAScript 2016
es8 就是指 ECMAScript 2017
es9 就是指 ECMAScript 2018
到写这篇文章为止，已发布了 ECMAScript 2018。
后续
更多博客，查看 https://github.com/senntyou/blogs
作者：深予之 (@senntyou)
版权声明：自由转载 - 非商用 - 非衍生 - 保持署名（创意共享 3.0 许可证）