如何讓node運(yùn)行es6模塊文件及其原理詳解

最新版的 node 支持最新版 ECMAScript 幾乎所有特性，但有一個特性卻一直到現(xiàn)在都還沒有支持，那就是從 ES2015 開始定義的模塊化機(jī)制。而現(xiàn)在我們很多項(xiàng)目都是用 es6 的模塊化規(guī)范來寫代碼的，包括 node 項(xiàng)目，所以，node 不能運(yùn)行 es6 模塊文件就會很不便。

創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為莒縣企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)，莒縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

讓 node 運(yùn)行 es6 模塊文件的方式有兩種：

  • 轉(zhuǎn)碼 es6 模塊為 commonjs 模塊
  • hook node 的 require 機(jī)制，直接讓 node 的 require 加載 import/export

1. 轉(zhuǎn)碼 es6 模塊為 commonjs 模塊

因?yàn)?node 支持幾乎所有除 import/export 外的語法，所以我們只需要將 import/export 轉(zhuǎn)碼成 require/exports，而不需要轉(zhuǎn)碼其他語法。

比如下面的項(xiàng)目：

- package.json
- src/
 - index.js
 - print.js
 - ...
# package.json
{
 "main": "lib/index.js"    # 由工具轉(zhuǎn)碼 src 目錄下源文件到 lib 目錄下
}


# src/index.js
import print from './print';

print('index');

export default print;


# src/print.js
export default str => {
 console.log('print: ' + str);
};

因?yàn)?src 目錄下的源文件都是 es6 模塊化規(guī)范的，node 并不能直接運(yùn)行，所以需要轉(zhuǎn)碼成 commonjs 規(guī)范的代碼。

這個過程有兩個方案：

  • 如果不會單獨(dú)使用 src 目錄下的某個文件，而僅僅是以 src/index.js 為入口文件使用，可以把 src 目錄下的文件打包成一個文件到 lib/index.js：這種方式推薦使用工具 rollup
  • 如果需要單獨(dú)使用 src 目錄下的文件，那就需要把 src 目錄下的文件一對一的轉(zhuǎn)碼到 lib 目錄下：這種方式推薦使用工具 gulp + babel

1.1 用 rollup 把 src 目錄下的文件打包成一個文件到 lib/index.js

相關(guān)文件：

# 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"
 }
}

運(yùn)行命令：

npm run build

結(jié)果：

# lib/index.js
'use strict';

var print = str => {
 console.log('print: ' + str);
};

print('index');

module.exports = print;

1.2 用 gulp + babel 把 src 目錄下的文件一對一的轉(zhuǎn)碼到 lib 目錄下

相關(guān)文件：

# 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"
 }
}

運(yùn)行命令：

npm run build

結(jié)果：

# 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 機(jī)制，直接加載 import/export

這種機(jī)制一般是通過對 node 的 require 機(jī)制進(jìn)行 hook，劫持 require 抓取的源文件代碼，把源代碼轉(zhuǎn)碼成 commonjs 規(guī)范之后，再傳送給 require 機(jī)制原本的代碼流中。

pirates 之類的第三方 npm 包提供了這種添加 hook 的功能。

babel-register 便是使用這種方式達(dá)到 node 運(yùn)行 es6 模塊文件的目的的。

2.1 使用 babel-register 直接運(yùn)行 es6 模塊文件

示例目錄：

- package.json
- src/
 - entry.js       # 這里多了一個入口文件，專門用于注冊 babel-register
 - index.js
 - print.js
 - ...

相關(guān)文件：

# 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 規(guī)范來寫，因?yàn)檫€沒有注冊 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);
};

運(yùn)行：

npm run run

結(jié)果：

# 命令行打印

print: index

這種方式因?yàn)橹虚g轉(zhuǎn)碼會有額外的性能損耗，所以不建議在生產(chǎn)環(huán)境下使用，只建議在開發(fā)模式下使用。

2.2 使用babel-node 直接運(yùn)行 es6 模塊文件

babel-node 對 babel-register 進(jìn)行了封裝，提供了在命令行直接運(yùn)行 es6 模塊文件的便捷方式。

示例目錄：

- package.json
- src/
 - index.js
 - print.js
 - ...

相關(guān)文件：

# 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);
};

運(yùn)行：

npm run run

結(jié)果：

# 命令行打印

print: index

這種方式也不建議在生產(chǎn)環(huán)境下使用，只建議在開發(fā)模式下使用。

3. 鏈接

es6 就是指 ECMAScript 2015

es7 就是指 ECMAScript 2016

es8 就是指 ECMAScript 2017

es9 就是指 ECMAScript 2018

到寫這篇文章為止，已發(fā)布了 ECMAScript 2018。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：如何讓node運(yùn)行es6模塊文件及其原理詳解
網(wǎng)頁網(wǎng)址：http://muchs.cn/article36/piphpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)