可能改變前端工程化未來的特性：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.mjs
app.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。
