怎样让 node 运转 es6 模块文件，及其道理

最新版的 node 支撑最新版 ECMAScript 险些一切特征，但有一个特征却一向到如今都还没有支撑，那就是从 ES2015 最先定义的模块化机制。而如今我们许多项目都是用 es6 的模块化范例来写代码的，包含 node 项目，所以，node 不能运转 es6 模块文件就会很不方便。

让 node 运转 es6 模块文件的体式格局有两种：

1. 转码 es6 模块为 commonjs 模块
2. 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 范例的代码。

这个历程有两个计划：

1. 假如不会零丁运用 src 目次下的某个文件，而仅仅是以 src/index.js 为进口文件运用，能够把 src 目次下的文件打包成一个文件到 lib/index.js：这类体式格局引荐运用东西 rollup
2. 假如须要零丁运用 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许可证）