最新版的 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: 这种方式推荐使用工具 https://rollupjs.org/guide/en
如果需要单独使用 src 目录下的文件, 那就需要把 src 目录下的文件一对一的转码到 lib 目录下: 这种方式推荐使用工具 https://github.com/gulpjs/gulp + https://babeljs.io/
1.1 用 https://rollupjs.org/guide/en 把 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 用 https://github.com/gulpjs/gulp + https://babeljs.io/ 把 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 机制原本的代码流中.
https://github.com/ariporad/pirates 之类的第三方 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 规范来写, 因为还没有注册 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 使用 直接运行 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.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 http://www.ecma-international.org/ecma-262/6.0/
es7 就是指 ECMAScript 2016 http://www.ecma-international.org/ecma-262/7.0/
es8 就是指 ECMAScript 2017 http://www.ecma-international.org/ecma-262/8.0/
es9 就是指 ECMAScript 2018 http://www.ecma-international.org/ecma-262/9.0/
到写这篇文章为止, 已发布了 ECMAScript 2018.
后续
更多博客, 查看 https://github.com/senntyou/blogs
作者: 深予之 (@senntyou) https://github.com/senntyou
来源: https://segmentfault.com/a/1190000017318527