摘要:利用在開發(fā)中使用整理自,從屬于筆者的現(xiàn)代開發(fā)語法基礎(chǔ)與實踐技巧系列中的模塊化與構(gòu)建章節(jié)。本文主要介紹了如何利用第三方庫在應(yīng)用中順滑地使用語法。
利用 std/esm 在 Node.js 開發(fā)中使用 ES Modules利用 std/esm 在 Node.js 開發(fā)中使用 ES Modules 整理自ES Modules in Node Today!,從屬于筆者的現(xiàn)代 JavaScript 開發(fā):語法基礎(chǔ)與實踐技巧系列中的模塊化與構(gòu)建章節(jié)。本文主要介紹了如何利用 std/esm 第三方庫在 Node.js 應(yīng)用中順滑地使用 ES Modules 語法。
隨著主流瀏覽器逐步開始支持 ES Modules 標準,越來越多的目光投注于 Node.js 對于 ESM 的支持實現(xiàn)上;目前 Node.js 使用 CommonJS 作為官方的模塊解決方案,雖然內(nèi)置的模塊方案促進了 Node.js 的流行,但是也為引入新的 ES Modules 造成了一定的阻礙。CommonJS 與 ES Modules 模塊標準的對比如下:
// CJS const a = require("./a") module.exports = { a, b: 2 } // ESM import a from "./a" export default { a, b: 2 }
鑒于 CommonJS 并不兼容于 ES Modules,Node.js 打算引入 .mjs(Modular JavaScript)文件擴展來指明模塊解析規(guī)則;這個有點類似于目前對于 JSON 文件的解析,如果我們指明了載入 .json 格式文件,Node.js 會自動調(diào)用 JSON.parse 方法。Node.js 擬計劃在 2020 年發(fā)布的 9.x 版本中引入內(nèi)置的 ESM 支持,詳細的 Node.js 中 ESM 實現(xiàn)規(guī)范查看 Node.js 官方文檔 ES Module Interoperability;而目前主流的辦法即是采用 Rollup、Webpack 這樣的構(gòu)建工具或者 Babel 這樣的轉(zhuǎn)化工具來進行代碼轉(zhuǎn)化。
而近日正式發(fā)布的 @std/esm 為我們提供了高性能的 Node.js 中 CommonJS 與 ES Modules 模塊間調(diào)用,其能夠作用于 Node.js 4.x 以上版本;它能夠順滑地集成到現(xiàn)有的 Webpack、Babel 環(huán)境中,并且支持不同模塊使用不同的依賴版本。不同于目前的解決方案需要是發(fā)布編譯之后的 CommonJS 格式的文件,[@std/esm] 能夠以最小的代價的、按需轉(zhuǎn)化的、動態(tài)緩存的方式來進行源代碼轉(zhuǎn)化,其基本命令行中的使用方式如下所示:
> require("@std/esm") @std/esm enabled > import path from "path"; undefined > path.join("Hello","World"); "Hello/World"
[@std/esm] 除了會自動識別 .mjs 擴展的文件之外,它還支持任何包含 import/export、Dynamic import、file URI scheme 等語句的文件,典型的用例如下:
// 首先安裝依賴 npm i --save @std/esm // index.js import hello from "./main.js"; hello(); // main.js import thing from "./constants.js"; export default function hello() { console.log(thing); } // constants.js export default "Hello World!"; // 運行文件 node -r @std/esm index.js // Hello World!
筆者在自己嘗試的時候發(fā)現(xiàn) @std/esm 還存在些 Bug,對于緩存代碼的處理也并不完善,目前并不建議直接用于生產(chǎn)環(huán)境,但是有所了解還是不錯的。@std/esm 官方給出的與 Node.js 9 以及 CommonJS 模塊的加載時間對比如下,可以發(fā)現(xiàn)還是很接近于內(nèi)建的解決方案性能的:
Loading CJS equivs was ~0.28 milliseconds per module
Loading built-in ESM was ~0.51 milliseconds per module
First @std/esm no cache run was ~1.56 milliseconds per module
Secondary @std/esm cached runs were ~0.54 milliseconds per module
延伸閱讀更多 Node.js 相關(guān)資料參考 這里
多個提高Node.js應(yīng)用吞吐量的小優(yōu)化技巧介紹
JavaScript 語法樹與代碼轉(zhuǎn)化
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/87246.html
摘要:前端每周清單第期微服務(wù)實踐,與,組件技巧,攻防作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單第 26 期:Node.js 微服務(wù)實踐,Vue.js 與 GraphQL,Angular 組件技巧,HeadlessChrome 攻防 作者:王下邀月熊 編輯:徐川...
摘要:前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。對該漏洞的綜合評級為高危。目前,相關(guān)利用方式已經(jīng)在互聯(lián)網(wǎng)上公開,近期出現(xiàn)攻擊嘗試爆發(fā)的可能。 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡...
摘要:前端日報精選從源碼看數(shù)組排序的詭異問題顯示網(wǎng)格和隱式網(wǎng)格的區(qū)別打包工具完全入門指南使用之前要在里學的件事工作機制第部分中文深入理解中的代碼片段,你能猜對幾個掘金深入理解筆記中的類深入理解筆記迭代器和生成器最新版構(gòu)建分享小王子 2017-08-13 前端日報 精選 從 V8 源碼看 JS 數(shù)組排序的詭異問題顯示網(wǎng)格和隱式網(wǎng)格的區(qū)別JS打包工具rollup——完全入門指南使用 Redux ...
摘要:非官方字段集合官方字段請參考。下面介紹的是非官方字段,也就是各種工具定義的相關(guān)字段。詳細參考相關(guān)字段設(shè)置項目的瀏覽器兼容情況。相關(guān)字段測試庫。相關(guān)字段代碼檢查與優(yōu)化。 package.json 非官方字段集合 package.json 官方字段請參考 https://docs.npmjs.com/files/package.json。下面介紹的是非官方字段,也就是各種工具定義的相關(guān)字段...
摘要:以為例,編寫來幫助我們完成重復的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化,然后為你執(zhí)行一系列的自動化操作,同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一:前端工程化的發(fā)展 很久以前,互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代,大家可能...
閱讀 2676·2021-11-16 11:53
閱讀 2737·2021-07-26 23:38
閱讀 2073·2019-08-30 15:55
閱讀 1751·2019-08-30 13:21
閱讀 3650·2019-08-29 17:26
閱讀 3306·2019-08-29 13:20
閱讀 875·2019-08-29 12:20
閱讀 3192·2019-08-26 10:21