如何让 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.jsimport print from './print';print('index');export default print;# src/print.jsexport default str => {  console.log('print: ' + str);};

因为 src 目录下的源文件都是 es6 模块化规范的，node 并不能直接运行，所以需要转码成 commonjs 规范的代码。

这个过程有两个方案：

如果不会单独使用 src 目录下的某个文件，而仅仅是以 src/index.js 为入口文件使用，可以把 src 目录下的文件打包成一个文件到 lib/index.js：这种方式推荐使用工具

如果需要单独使用 src 目录下的文件，那就需要把 src 目录下的文件一对一的转码到 lib 目录下：这种方式推荐使用工具 +

1.1 用把 `src` 目录下的文件打包成一个文件到 `lib/index.js`

相关文件：

# rollup.config.jsexport 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 用 + 把 `src` 目录下的文件一对一的转码到 `lib` 目录下

相关文件：

# build.jsconst 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 机制原本的代码流中。

之类的第三方 npm 包提供了这种添加 hook 的功能。

便是使用这种方式达到 node 运行 es6 模块文件的目的的。

2.1 使用直接运行 `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 规范来写，因为还没有注册 hookrequire('@babel/register')({  plugins: ['@babel/plugin-transform-modules-commonjs']});require('./index');# src/index.jsimport print from './print';print('index');# src/print.jsexport default str => {  console.log('print: ' + str);};

运行：

npm run run

结果：

# 命令行打印print: index

这种方式因为中间转码会有额外的性能损耗，所以不建议在生产环境下使用，只建议在开发模式下使用。

2.2 使用直接运行 `es6` 模块文件

对进行了封装，提供了在命令行直接运行 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.jsimport print from './print';print('index');# src/print.jsexport default str => {  console.log('print: ' + str);};

运行：