利用 std/esm 在 Node.js 開發(fā)中使用 ES Modules

Anshiii 發(fā)布于2019-08-21 11:53 / 1664人閱讀

摘要：利用在開發(fā)中使用整理自，從屬于筆者的現代開發(fā)語法基礎與實踐技巧系列中的模塊化與構建章節(jié)。本文主要介紹了如何利用第三方庫在應用中順滑地使用語法。

利用 std/esm 在 Node.js 開發(fā)中使用 ES Modules 整理自ES Modules in Node Today!，從屬于筆者的現代 JavaScript 開發(fā)：語法基礎與實踐技巧系列中的模塊化與構建章節(jié)。本文主要介紹了如何利用 std/esm 第三方庫在 Node.js 應用中順滑地使用 ES Modules 語法。

利用 std/esm 在 Node.js 開發(fā)中使用 ES Modules

隨著主流瀏覽器逐步開始支持 ES Modules 標準，越來越多的目光投注于 Node.js 對于 ESM 的支持實現上；目前 Node.js 使用 CommonJS 作為官方的模塊解決方案，雖然內置的模塊方案促進了 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 會自動調用 JSON.parse 方法。Node.js 擬計劃在 2020 年發(fā)布的 9.x 版本中引入內置的 ESM 支持，詳細的 Node.js 中 ESM 實現規(guī)范查看 Node.js 官方文檔 ES Module Interoperability；而目前主流的辦法即是采用 Rollup、Webpack 這樣的構建工具或者 Babel 這樣的轉化工具來進行代碼轉化。

而近日正式發(fā)布的 @std/esm 為我們提供了高性能的 Node.js 中 CommonJS 與 ES Modules 模塊間調用，其能夠作用于 Node.js 4.x 以上版本；它能夠順滑地集成到現有的 Webpack、Babel 環(huán)境中，并且支持不同模塊使用不同的依賴版本。不同于目前的解決方案需要是發(fā)布編譯之后的 CommonJS 格式的文件，[@std/esm] 能夠以最小的代價的、按需轉化的、動態(tài)緩存的方式來進行源代碼轉化，其基本命令行中的使用方式如下所示：

> 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ā)現 @std/esm 還存在些 Bug，對于緩存代碼的處理也并不完善，目前并不建議直接用于生產環(huán)境，但是有所了解還是不錯的。@std/esm 官方給出的與 Node.js 9 以及 CommonJS 模塊的加載時間對比如下，可以發(fā)現還是很接近于內建的解決方案性能的：

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 相關資料參考這里

多個提高Node.js應用吞吐量的小優(yōu)化技巧介紹

JavaScript 語法樹與代碼轉化

云服務器 GPU云服務器在阿里云服務器上安裝node.js 在php中使用組件在VBScript中使用類 webrtc在webview中使用問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/87246.html

前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
前端每周清單半年盤點之 Node.js 篇

摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。對該漏洞的綜合評級為高危。目前，相關利用方式已經在互聯(lián)網上公開，近期出現攻擊嘗試爆發(fā)的可能。前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡...

kid143 2019-08-21 11:59 評論0 收藏0
2017-08-13 前端日報

摘要：前端日報精選從源碼看數組排序的詭異問題顯示網格和隱式網格的區(qū)別打包工具完全入門指南使用之前要在里學的件事工作機制第部分中文深入理解中的代碼片段，你能猜對幾個掘金深入理解筆記中的類深入理解筆記迭代器和生成器最新版構建分享小王子 2017-08-13 前端日報精選從 V8 源碼看 JS 數組排序的詭異問題顯示網格和隱式網格的區(qū)別JS打包工具rollup——完全入門指南使用 Redux ...

Eastboat 2019-08-21 11:54 評論0 收藏0
package.json 非官方字段集合

摘要：非官方字段集合官方字段請參考。下面介紹的是非官方字段，也就是各種工具定義的相關字段。詳細參考相關字段設置項目的瀏覽器兼容情況。相關字段測試庫。相關字段代碼檢查與優(yōu)化。 package.json 非官方字段集合 package.json 官方字段請參考 https://docs.npmjs.com/files/package.json。下面介紹的是非官方字段，也就是各種工具定義的相關字段...

denson 2019-08-23 11:56 評論0 收藏0
webpack4.x升級摘要

摘要：以為例，編寫來幫助我們完成重復的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化，然后為你執(zhí)行一系列的自動化操作，同樣的操作也發(fā)生在這些的預處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展很久以前，互聯(lián)網行業(yè)有個職位叫做軟件開發(fā)工程師在那個時代，大家可能...

levinit 2019-08-23 18:11 評論0 收藏0