摘要:如何讓運行模塊文件,及其原理最新版的支持最新版幾乎所有特性,但有一個特性卻一直到現在都還沒有支持,那就是從開始定義的模塊化機制。便是使用這種方式達到運行模塊文件的目的的。
如何讓 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。
后續更多博客,查看 https://github.com/senntyou/blogs
作者:深予之 (@senntyou)
版權聲明:自由轉載-非商用-非衍生-保持署名(創意共享3.0許可證)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99876.html
摘要:掛機科了次使用這個結構,匿名函數就有了自己的執行環境或閉包,然后我們立即執行。注意,匿名函數的圓括號是必需的,因為以關鍵字開頭的語句通常被認為是函數聲明請記住,中不能使用未命名的函數聲明。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 20 篇。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! 如果你錯過了前面的章節,可以在這里找到它們: ...
摘要:要想讓模塊再次運行,必須清除緩存。模塊加載的順序,按照其在代碼中出現的順序。最近參加了公司開展的一次培訓,結構性思維培養。 序言 模塊化,大家用vue,react等東西,都會接觸到像exports,module.exports,export,export default,require,define,import等等字段,感覺很多人對于這些東西還是分不清,概念非常的模糊,便想著寫這么一...
摘要:使用要給項目構建接入動態鏈接庫的思想,需要完成以下事情把網頁依賴的基礎模塊抽離出來,打包到一個個單獨的動態鏈接庫中去。接入已經內置了對動態鏈接庫的支持,需要通過個內置的插件接入,它們分別是插件用于打包出一個個單獨的動態鏈接庫文件。 webpack優化 查看所有文檔頁面:全棧開發,獲取更多信息。原文鏈接:webpack優化,原文廣告模態框遮擋,閱讀體驗不好,所以整理成本文,方便查找。 ...
摘要:在他的重學前端課程中提到到現在為止,前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識,其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙,深度廣度一樣都不能差。 開篇 前端開發是一個非常特殊的行業,它的歷史實際上不是很長,但是知識之繁雜,技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到: 到現在為止,前端工程師已經成為研...
閱讀 3872·2021-09-27 13:35
閱讀 1069·2021-09-24 09:48
閱讀 2899·2021-09-22 15:42
閱讀 2339·2021-09-22 15:28
閱讀 3145·2019-08-30 15:43
閱讀 2609·2019-08-30 13:52
閱讀 2971·2019-08-29 12:48
閱讀 1451·2019-08-26 13:55