可能改變前端工程化未來的特性：ESM Loader Hooks
大家好，我卡頌。
在最近發佈的Node v18.6.0中，帶來了一個試驗特性 ESM Loader Hooks API[1]。
如果他最終落地，很可能會成爲改變前端工程化未來的特性。本文我們來聊聊他。
本文參考：
Custom ESM loaders: Who, what, when, where, why, how[2]
特性簡介
用過webpack的朋友一定知道webpack中有個loader的概念，用於加載並處理不同類型文件，比如css-loader、url-loader。
loader的執行順序取決於webpack內部對文件樹解析、遍歷的順序。
今天要介紹的ESM Loader Hooks與webpack loader類似，只不過對文件樹的解析、遍歷是由Node.js原生支持的ESM規範（而不是打包工具）確定的。
通過定義不同loader，就能在 「不使用工程化工具」 的前提下，對項目中各個ESM模塊進行處理。
舉個例子，在命令行通過--experimental-loader指令開啓特性後，執行如下語句：
$> node --loader redirect.mjs app.mjs其中，app.mjs爲 「待處理的源文件」，.mjs後綴指代該文件是個ESM模塊（相對應的，.cjs後綴指CJS模塊）。
--loader用於指定自定義的ESM Loader，這裏指定的是redirect.mjs，app.mjs會交由redirect.mjs處理。
redirect.mjs代碼如下：
// redirect.mjs
export function resolve(specifier, context, nextResolve) {
let redirect = 'app.prod.mjs';
switch(process.env.NODE_ENV) {
case 'development':
redirect = 'app.dev.mjs';
break;
case 'test':
redirect = 'app.test.mjs';
break;
}
return nextResolve(redirect);
}
redirect.mjs會根據 「Node 當前所屬環境」 改寫文件的引入路徑。
比如在開發環境（process.env.NODE_ENV === 'development'），app.mjs經由redirect.mjs處理，會重定向到app.dev.mjs。
ESM Loader Hooks API中之所以帶Hooks字眼，是因爲每個 「自定義 ESM Loader」，都可以像鉤子（Hooks）一樣連接其他 「自定義 ESM Loader」（或者Node.js提供的默認ESM Loader）。
比如在如下語句中：
$> node --loader c.mjs --loader b.mjs --loader a.mjs app.mjsapp.mjs會依次經過a b c三個 「自定義 ESM Loader」 處理。
整個過程就像一個promise.then鏈條（事實上，每個ESM loader確實會返回一個promise）。
實際例子
來看一個更接近日常開發的例子，考慮如下ESM模塊：
// app.tsx
import ReactDOM from 'react-dom/client';
import {
BrowserRouter,
useRoutes,
} from 'react-router-dom';
import App from './AppHeader.tsx';
import routes from 'https://example.com/routes.json' assert { type: 'json' };
import './global.css' assert { type: 'css' };
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
<main>{useRoutes(routes)}</main>
</BrowserRouter>
);
其中包括很多Node.js不能處理的部分，比如：
-
TS語法（需要編譯成JS，並處理文件描述符爲Node.js可識別的形式） -
JSX轉換（需要編譯成React.createElement或jsxRuntime.jsx） -
需要處理引入的
CSS文件 -
需要處理遠程引入的模塊（代碼中引入
routes的語句）
處理 CSS 文件
以處理CSS文件舉例，假設CSS文件內容如下：
.Container {
border: 1px solid black;
}
.SomeInnerPiece {
background-color: blue;
}如果爲了測試目的，僅需要生成類名對應快照即可，所以可以實現一個簡易的CSS loader，處理輸入的CSS文件，將結果輸出爲Node.js可執行的JSON格式：
{
"Container": "Container",
"SomeInnerPiece": "SomeInnerPiece"
}參考：CSS loader 的簡易實現 [3]
處理遠程引入的模塊
再以處理 「處理遠程引入的模塊」 舉例。
當識別到https://開頭的文件描述符（即import聲明或import()表達式中字符串的部分）時， 可以利用https模塊發起請求，返回請求對應promise：
import { get } from 'https';
export function load(url, context, nextLoad) {
if (url.startsWith('https://')) {
return new Promise((resolve, reject) => {
get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => resolve({
format: 'module',
shortCircuit: true,
source: data,
}));
}).on('error', err => reject(err));
});
}
return nextLoad(url, context);
}
參考：Https loader 的簡易實現 [4]
總結
當ESM Loader Hooks特性趨於穩定，配套的loader生態足夠豐富後，很多原來需要打包工具才能實現的工程化需求都能用Node.js原生解決。
比如，要處理上述提到的app.tsx文件，只需執行如下命令：
$> node --loader typescript-loader --loader css-loader --loader network-loader app.tsx你覺得這個特性對未來前端工程化會有多大影響呢？
參考資料
[1] ESM Loader Hooks API: https://nodejs.org/en/blog/release/v18.6.0/
[2] Custom ESM loaders: Who, what, when, where, why, how: https://dev.to/jakobjingleheimer/custom-esm-loaders-who-what-when-where-why-how-4i1o
[3] CSS loader 的簡易實現: https://github.com/JakobJingleheimer/demo-css-loader/blob/main/loader.mjs
[4] Https loader 的簡易實現: https://github.com/nodejs/loaders-test/blob/835506a638c6002c1b2d42ab7137db3e7eda53fa/https-loader/loader.js
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fGn1G3aLLgfTfd13dQVxWg