如何让 node 运行 es6 模块文件,及其原理最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目,所以,node 不能运行 es6 模块文件就会很不便。让 node 运行 es6 模块文件的方式有两种:转码 es6 模块为 commonjs 模块hook node 的 require 机制,直接让 node 的 require 加载 import/export1. 转码 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:这种方式推荐使用工具 rollup如果需要单独使用 src 目录下的文件,那就需要把 src 目录下的文件一对一的转码到 lib 目录下:这种方式推荐使用工具 gulp + babel1.1 用 rollup 把 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 用 gulp + babel 把 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 机制原本的代码流中。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 规范来写,因为还没有注册 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 使用 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.jsimport print from ‘./print’;print(‘index’);# src/print.jsexport default str => { console.log(‘print: ’ + str);};运行:npm run run结果:# 命令行打印print: index这种方式也不建议在生产环境下使用,只建议在开发模式下使用。3. 链接es6 就是指 ECMAScript 2015es7 就是指 ECMAScript 2016es8 就是指 ECMAScript 2017es9 就是指 ECMAScript 2018到写这篇文章为止,已发布了 ECMAScript 2018。后续更多博客,查看 https://github.com/senntyou/blogs作者:深予之 (@senntyou)版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)