資訊專欄INFORMATION COLUMN
摘要：如何讓運行模塊文件，及其原理最新版的支持最新版幾乎所有特性，但有一個特性卻一直到現(xiàn)在都還沒有支持，那就是從開始定義的模塊化機制。便是使用這種方式達(dá)到運行模塊文件的目的的。
如何讓 node 運行 es6 模塊文件，及其原理
最新版的 node 支持最新版 ECMAScript 幾乎所有特性，但有一個特性卻一直到現(xiàn)在都還沒有支持，那就是從 ES2015 開始定義的模塊化機制。而現(xiàn)在我們很多項目都是用 es6 的模塊化規(guī)范來寫代碼的，包括 node 項目，所以，node 不能運行 es6 模塊文件就會很不便。
讓 node 運行 es6 模塊文件的方式有兩種：
轉(zhuǎn)碼 es6 模塊為 commonjs 模塊
hook node 的 require 機制，直接讓 node 的 require 加載 import/export
1. 轉(zhuǎn)碼 es6 模塊為 commonjs 模塊因為 node 支持幾乎所有除 import/export 外的語法，所以我們只需要將 import/export 轉(zhuǎn)碼成 require/exports，而不需要轉(zhuǎn)碼其他語法。
比如下面的項目：
- 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);
};
因為 src 目錄下的源文件都是 es6 模塊化規(guī)范的，node 并不能直接運行，所以需要轉(zhuǎn)碼成 commonjs 規(guī)范的代碼。
這個過程有兩個方案：
如果不會多帶帶使用 src 目錄下的某個文件，而僅僅是以 src/index.js 為入口文件使用，可以把 src 目錄下的文件打包成一個文件到 lib/index.js：這種方式推薦使用工具 rollup
如果需要多帶帶使用 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"
}
}
運行命令：
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"
}
}
運行命令：
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 機制，直接加載 import/export
這種機制一般是通過對 node 的 require 機制進(jìn)行 hook，劫持 require 抓取的源文件代碼，把源代碼轉(zhuǎn)碼成 commonjs 規(guī)范之后，再傳送給 require 機制原本的代碼流中。
pirates 之類的第三方 npm 包提供了這種添加 hook 的功能。
babel-register 便是使用這種方式達(dá)到 node 運行 es6 模塊文件的目的的。
2.1 使用 babel-register 直接運行 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ī)范來寫，因為還沒有注冊 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
結(jié)果：
# 命令行打印 print: index
這種方式因為中間轉(zhuǎn)碼會有額外的性能損耗，所以不建議在生產(chǎn)環(huán)境下使用，只建議在開發(fā)模式下使用。
2.2 使用 babel-node 直接運行 es6 模塊文件babel-node 對 babel-register 進(jì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);
};
運行：
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。
后續(xù)更多博客，查看 https://github.com/senntyou/blogs
作者：深予之 (@senntyou)
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99876.html
摘要：掛機科了次使用這個結(jié)構(gòu)，匿名函數(shù)就有了自己的執(zhí)行環(huán)境或閉包，然后我們立即執(zhí)行。注意，匿名函數(shù)的圓括號是必需的，因為以關(guān)鍵字開頭的語句通常被認(rèn)為是函數(shù)聲明請記住，中不能使用未命名的函數(shù)聲明。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 20 篇。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 如果你錯過了前面的章節(jié)，可以在這里找到它們： ...
摘要：要想讓模塊再次運行，必須清除緩存。模塊加載的順序，按照其在代碼中出現(xiàn)的順序。最近參加了公司開展的一次培訓(xùn)，結(jié)構(gòu)性思維培養(yǎng)。 序言 模塊化，大家用vue，react等東西，都會接觸到像exports，module.exports，export，export default，require，define，import等等字段，感覺很多人對于這些東西還是分不清，概念非常的模糊，便想著寫這么一...
摘要：使用要給項目構(gòu)建接入動態(tài)鏈接庫的思想，需要完成以下事情把網(wǎng)頁依賴的基礎(chǔ)模塊抽離出來，打包到一個個單獨的動態(tài)鏈接庫中去。接入已經(jīng)內(nèi)置了對動態(tài)鏈接庫的支持，需要通過個內(nèi)置的插件接入，它們分別是插件用于打包出一個個單獨的動態(tài)鏈接庫文件。 webpack優(yōu)化 查看所有文檔頁面：全棧開發(fā)，獲取更多信息。原文鏈接：webpack優(yōu)化，原文廣告模態(tài)框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...
摘要：在他的重學(xué)前端課程中提到到現(xiàn)在為止，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學(xué)習(xí)。一基礎(chǔ)前端工程師吃飯的家伙，深度廣度一樣都不能差。 開篇 前端開發(fā)是一個非常特殊的行業(yè)，它的歷史實際上不是很長，但是知識之繁雜，技術(shù)迭代速度之快是其他技術(shù)所不能比擬的。 winter在他的《重學(xué)前端》課程中提到： 到現(xiàn)在為止，前端工程師已經(jīng)成為研...
閱讀 3909·2021-09-27 13:35
閱讀 1084·2021-09-24 09:48
閱讀 2913·2021-09-22 15:42
閱讀 2354·2021-09-22 15:28
閱讀 3158·2019-08-30 15:43
閱讀 2625·2019-08-30 13:52
閱讀 2982·2019-08-29 12:48
閱讀 1463·2019-08-26 13:55
