如何让 node 运行 es6 模块文件,及其原理

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

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

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

这个过程有两个方案:

  1. 如果不会单独使用 src 目录下的某个文件,而仅仅是以 src/index.js 为入口文件使用,可以把 src 目录下的文件打包成一个文件到 lib/index.js:这种方式推荐使用工具 rollup
  2. 如果需要单独使用 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
{
"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 + 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
{
"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 noderequire 机制,直接加载 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
{
"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-nodebabel-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. 链接

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

后续

更多博客,查看 https://github.com/senntyou/blogs

作者:深予之 (@senntyou)

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证

如何让 node 运行 es6 模块文件,及其原理的更多相关文章

  1. Node.js require 模块加载原理 All In One

    Node.js require 模块加载原理 All In One require 加载模块,搜索路径 "use strict"; /** * * @author xgqfrms ...

  2. node搭环境(四)--webpack启服务运行VUE模块文件(手写简单脚手架)

    webpack启服务步骤: 1.新建空文件夹webpack-vue.在空文件夹右键点击- GIt Bath here--输入cnpm init--按程序走完会生成package.json文件 2.打开 ...

  3. ES6模块

    1. ES6模块是什么? ES6在语言层级上出现了“模块”的概念. javascript中一个文件就是一个模块,如果模块中使用了ES6的语法import或者export, 这个文件就是一个ES6模块. ...

  4. Node.js模块导出module.exports 和 exports,Es6模块导出export 和export default的区别

    1.module.exports  module变量代表当前模块.这个变量是一个对象,module对象会创建一个叫exports的属性,这个属性的默认值是一个空的对象: module.exports ...

  5. 【node】fs模块,文件和目录的操作

    检查文件是否存在,查询文件信息 fs.stat() fs.stat('./server.js', function (err, stat) { if (stat && stat.isF ...

  6. 37.Node.js工具模块---处理和转换文件路径的工具 Path模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js path 模块提供了一些用于处理文件路径的小工具,我们可以通过以下方 ...

  7. Linux进阶之VMware Linux虚拟机运行提示“锁定文件失败 虚拟机开启模块snapshot失败”的解决办法

    问题1:VMware Linux虚拟机运行提示"锁定文件失败 虚拟机开启模块snapshot失败"的解决办法 非正常关闭虚拟机(例如开关机过程中关掉VMware等操作),再次启动虚 ...

  8. 学习rollup.js模块文件打包

    学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...

  9. Webpack4教程:第一部分,入口、输入和ES6模块

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...

随机推荐

  1. 「JOI 2019 Final」 硬币收藏

    题目链接 戳我 \(Solution\) 先将所有棋子移动到最近的目标点上 我们设两个变量\(ans1,ans2\)表示到目前为止这个点上可以移动棋子的数目,然后\(f[i][j]\)表示\((i,j ...

  2. 使用Python进行层次聚类

    使用 scipy.cluster.hierarchy.linkage进行层次聚类 from scipy.cluster.hierarchy import dendrogram, linkage,fcl ...

  3. mongodb远程链接命令

    mongo 172.17.0.170:27017/spider_data -u admin -p 然后输入密码 切换数据库 use spider_data 查看所有表 show tables

  4. python 购物车+用户认证程序

    创建文件a.txt,b.txt.c.txt用于存放应该持续保存的信息 a.txt :用户密码输入错误3次就锁定 b.txt :购物时的活动,每个用户只能参与一次 c:txt :购物完后的发票在这里查看 ...

  5. swift 高级模式匹配 if case

    let age = 22 let sex = "girl" if (sex == "girl" && age >= 18 &&am ...

  6. [go]unsafe.Sizeof浅析

    sizeof 如果x为一个切片,sizeof返回的大小是切片的描述符,而不是切片所指向的内存的大小. 那么这里如果换成一个数组呢?而不是一个切片 arr := [...]int{1,2,3,4,5} ...

  7. Get web site source code

    public String getPageSource() { StringBuffer sb = new StringBuffer(); try { // 构建一URL对象 URL url = ne ...

  8. SOAP1.1&SOAP1.2

    http://www.webxml.com.cn/webservices/ChinaTVprogramWebService.asmx?op=getTVstationString SOAP 1.1 以下 ...

  9. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  10. asp.netMVC中配置automap

    第一.新建类库,以解决方案名XXX为例,建立子类库名为  XXX.AutoMapper. 第二. XXX.AutoMapper类库中,添加对automap的引用. 第三.创建映射文件类 ModelPr ...