最新版的 node 支持最新版 ECMA 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目,所以,node 不能运行 es6 模块文件就会很不便。

node 运行 es6 模块文件的方式有两种:

  • 转码 es6 模块为 commonjs 模块
  • hook noderequire 机制,直接让 noderequire 加载 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 用 rollupsrc 目录下的文件打包成一个文件到 lib/index.js

相关文件:

# rollup.config.js
export default {
 input: \'src/index.js\',
 output: {
 file: \'lib/index.js\',
 format: \'cjs\',
 },
};


# package.json
{
 \" s\": {
 \"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 + babelsrc 目录下的文件一对一的转码到 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
{
 \" s\": {
 \"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\";

 .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\";

 .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

这种机制一般是通过对 noderequire 机制进行 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
{
 \" s\": {
 \"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-nodebabel-register 进行了封装,提供了在命令行直接运行 es6 模块文件的便捷方式。

示例目录:

- package.json
- src/
 - index.js
 - print.js
 - ...

相关文件:

# package.json
{
 \" s\": {
 \"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 就是指 ECMA 2015

es7 就是指 ECMA 2016

es8 就是指 ECMA 2017

es9 就是指 ECMA 2018

到写这篇文章为止,已发布了 ECMA 2018

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏 打印