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

如何让 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许可证

原文地址:https://www.cnblogs.com/lovellll/p/10113263.html

时间: 2024-10-08 22:58:03

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

使用import和exec运行模块文件的异同

使用import和exec运行模块文件的异同 实例代码 #script1.py import sys print(sys.platform) x = 'span' print(x*8) 在cmd中 >>> import script1 win32 spanspanspanspanspanspanspanspan >>> exec(open('script1.py').read()) win32 spanspanspanspanspanspanspanspan 看上去毫无

Electron + React + Node.js + ES6 开发本地 App

Electron + React + Node.js + ES6 开发本地 App 1.概述 近来工作上需要做一款 PC 上的软件,这款软件大体来讲是类似 PPT 的一款课件制作软件.由于我最近几年专注于移动 App 的开发,对 PC 端开发的了解有些滞后.所以我首先需要看看,在 PC 上采用什么框架能够顺利完成我的工作. 我的目标是,在完成这款软件的同时能够顺便学习一下比较流行的技术.在经过前期技术调研后,我明确了实现这款软件所需要的技术条件: 不采用 C++ 方面的类库,比如 MFC.Qt.

Node.js(二)——模块与包管理工具

http,process等等这些都是模块 一.Node.js的模块与Commonjs规范 1.js的天生缺陷--缺少模块化管理机制 ·表现--JS中容易出现变量被覆盖,方法被替代的情况(既被污染).特别是存在依赖关系时,容易出现错误.这是因为JS缺少模块管理机制,来隔离实现各种不同功能的JS判断,避免它们相互污染. ·解决--经常采用命名空间的方式,把变量和函数限制在某个特定的作用域内,人肉约定一套命名规范来限制代码,保证代码安全运行.jQuery中有许多变量和方法,但是无法直接访问,必须通过j

Node.js 的模块系统

Node.js的模块系统是借鉴 CommonJS 的 Modules 规范实现的,因此,下面我们需要先了解 CommonJS 的 Modules 规范,希望对大家学习Node.js有所帮助. CommonJS 的 Modules 规范 CommonJS 对模块的定义非常简单,主要分为 模块引用.模块定义和模块标识三个部分. 1. 模块引用 - require() 方法 2. 模块定义 - module.exports 对象 3. 模块标识 - 传递给 require() 方法的参数 通过 Com

第二章. node中的模块和require

一 什么是模块.            JavaScript诞生初,它只不过是一个网页的小脚本而已,没有人会想到它会发展到现在能有大量的库,工具,组件变得如此复杂,慢慢地javascript发展中,人们发现javascript有个先天的缺陷--缺少模块.       在其他语言中,java有类,python有import, php 有include和require甚至比它底层的C也有include.而javascript只能通过 <script>标签引入,这种方式令代码变得杂乱,依赖变得不清晰

(三)、node.js的模块和包

我们做东西不可能把所有的功能都放在一起,那样会相互影响,我们需要把他们分门别类, 让他们各自执行各自的功能,这就是包或者模块,包和模块这两个概念经常地会用,其实他俩讲的是一个东西 而在node.js中一个文件就是一个包 下面我们就来具体的讲解一下: Node.js 提供了 exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获取模块的 exports 对象.让我们以一个例子来了解模块. 创建一个module.js

Node.js:模块

概要:本篇博客主要介绍node.js的模块 1.创建模块 在node.js中创建一个模块非常简单,因为一个文件就是一个模块.我们只需要明白如何从其他文件中获取这个模块.Node.js提供了 exports 和 require 两个对象,其中exports是模块的公开接口,require用于从外部获取一个模块的接口,即所获取模块的exports对象.看下面的例子. 创建一个module.js的文件,内容是: var name; exports.setName = function(thyName)

Node学习HTTP模块(HTTP 服务器与客户端)

Node学习HTTP模块(HTTP 服务器与客户端) Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端.http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由JavaScript封装,兼顾了高性能与简易性.http.request 则是一个HTTP 客户端工具,用于向 HTTP 服务器发起请求. 'http'模块提供两种使用方式: 作为服务端使用时,创建一个HTTP服务

使用Node.JS监听文件夹变化

使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具 当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应的JS或CSS. 构建自动布署工具 通过侦听源文件夹的改变,你可以自动即时将改后的文件布署到测试服务器,加快你的开发测试速度. 这些工具其实都需要侦听文件夹的改变,基于Node.JS的侦听文件夹改变的模块有很多. fs.watch 其中Node.JS的文件系统也可侦听某个目录的改变, 如fs.wat