脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → node运行es6模块文件

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

 更新时间：2018年12月11日 09:15:01   作者：senntyou  
这篇文章主要介绍了如何让node运行es6模块文件及其原理详解，详细的介绍了2种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

最新版的 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。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅谈Koa2框架利用CORS完成跨域ajax请求

    浅谈Koa2框架利用CORS完成跨域ajax请求

    这篇文章主要介绍了浅谈Koa2框架利用CORS完成跨域ajax请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • nodejs初步体验篇

    nodejs初步体验篇

    这篇文章主要介绍了nodejs初步体验篇的相关资料,需要的朋友可以参考下
    2015-11-11
  • Node.js中出现未捕获异常的处理方法

    Node.js中出现未捕获异常的处理方法

    这篇文章主要给大家介绍了关于Node.js中出现未捕获异常的处理方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-06-06
  • 编译打包nodejs服务代码如何部署到服务器

    编译打包nodejs服务代码如何部署到服务器

    这篇文章主要介绍了编译打包nodejs服务代码如何部署到服务器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • node获取客户端ip功能简单示例

    node获取客户端ip功能简单示例

    这篇文章主要介绍了node获取客户端ip功能,结合实例形式分析了node.js获取客户端IP地址的原理与实现方法,需要的朋友可以参考下
    2019-08-08
  • nodejs中request库使用HTTPS代理的方法

    nodejs中request库使用HTTPS代理的方法

    这篇文章主要介绍了nodejs中request库使用HTTPS代理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 详解使用抽象语法树AST实现一个AOP切面逻辑

    详解使用抽象语法树AST实现一个AOP切面逻辑

    这篇文章主要为大家介绍了使用抽象语法树AST实现一个AOP切面逻辑的简单方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • adm-zip-0.4.13-中文文档详解

    adm-zip-0.4.13-中文文档详解

    这篇文章主要介绍了adm-zip-0.4.13-中文文档,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05
  • Node.js中的child_process模块详解

    Node.js中的child_process模块详解

    这篇文章主要给大家介绍了关于Node.js中child_process模块的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-06-06
  • Node.js的项目构建工具Grunt的安装与配置教程

    Node.js的项目构建工具Grunt的安装与配置教程

    Grunt是为Node打造的项目构建工具,相当于C/C++世界中的makefile,可以执行像压缩、编译、单元测试、代码检查以及打包发布的任务,下面我们就来一起看一下Node.js的项目构建工具Grunt的安装与配置教程:
    2016-05-05

最新评论