如何让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.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
:这种方式推荐使用工具 rollup - 如果需要单独使用
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
。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Extjs 项目中常用的小技巧,也许你用得着(1)
- Extjs4.2+webAPI+EF实现分页以及webapi的数据传值
- 【实践操作】 在iOS11中使用Core ML 和TensorFlow对手势进行智能识别
- 这或许是对小白最友好的python入门了吧——15,嵌套
- C#新功能--命名参数与可选参数
- 这或许是对小白最友好的python入门了吧——14,遍历字典
- C#新功能--命名参数
- Tomcat 安全配置与性能优化
- 【机器学习】伪标签(Pseudo-Labelling)的介绍:一种半监督机器学习技术
- 这或许是对小白最友好的python入门了吧——13,字典初识
- PHP 安全与性能
- 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该...
- Linux 系统与数据库安全
- 这或许是对小白最友好的python入门了吧——12,列表深入体验
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 记一个OLED编程中文显示函数的坑(留意变量数据类型的范围)
- tp5框架基于Ajax实现列表无刷新排序功能示例
- 浅谈pycharm下找不到sqlalchemy的问题
- PHP实现常用排序算法的方法
- 利用Python实现原创工具的Logo与Help
- PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
- 浅谈python下tiff图像的读取和保存方法
- Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
- 解决vscode python print 输出窗口中文乱码的问题
- 对python3新增的byte类型详解
- Python实现的特征提取操作示例
- Linux进程间通信方式之socket使用实例
- python实现图片识别汽车功能
- Mac下Anaconda的安装和使用教程
- linux ubuntu中安装、卸载和删除python-igraph的方法教程