個(gè)人中心
退出
可能改變前端工程化未來的特性：ESM Loader Hooks
大家好，我卡頌。
在最近發(fā)布的Node v18.6.0中，帶來了一個(gè)試驗(yàn)特性ESM Loader Hooks API[1]。
如果他最終落地，很可能會(huì)成為改變前端工程化未來的特性。本文我們來聊聊他。
本文參考：
Custom ESM loaders: Who, what, when, where, why, how[2]
特性簡(jiǎn)介
用過webpack的朋友一定知道webpack中有個(gè)loader的概念，用于加載并處理不同類型文件，比如css-loader、url-loader。
loader的執(zhí)行順序取決于webpack內(nèi)部對(duì)文件樹解析、遍歷的順序。
今天要介紹的ESM Loader Hooks與webpack loader類似，只不過對(duì)文件樹的解析、遍歷是由Node.js原生支持的ESM規(guī)范（而不是打包工具）確定的。
通過定義不同loader，就能在「不使用工程化工具」的前提下，對(duì)項(xiàng)目中各個(gè)ESM模塊進(jìn)行處理。
舉個(gè)例子，在命令行通過--experimental-loader指令開啟特性后，執(zhí)行如下語句：
$> node --loader redirect.mjs app.mjs
其中，app.mjs為「待處理的源文件」，.mjs后綴指代該文件是個(gè)ESM模塊（相對(duì)應(yīng)的，.cjs后綴指CJS模塊）。
--loader用于指定自定義的ESM Loader，這里指定的是redirect.mjs，app.mjs會(huì)交由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會(huì)根據(jù)「Node當(dāng)前所屬環(huán)境」改寫文件的引入路徑。
比如在開發(fā)環(huán)境（process.env.NODE_ENV === 'development'），app.mjs經(jīng)由redirect.mjs處理，會(huì)重定向到app.dev.mjs。
ESM Loader Hooks API中之所以帶Hooks字眼，是因?yàn)槊總€(gè)「自定義ESM Loader」，都可以像鉤子（Hooks）一樣連接其他「自定義ESM Loader」（或者Node.js提供的默認(rèn)ESM Loader）。
比如在如下語句中：
$> node --loader c.mjs --loader b.mjs --loader a.mjs app.mjs
app.mjs會(huì)依次經(jīng)過a b c三個(gè)「自定義ESM Loader」處理。
整個(gè)過程就像一個(gè)promise.then鏈條（事實(shí)上，每個(gè)ESM loader確實(shí)會(huì)返回一個(gè)promise）。
實(shí)際例子
來看一個(gè)更接近日常開發(fā)的例子，考慮如下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可識(shí)別的形式）
JSX轉(zhuǎn)換（需要編譯成React.createElement或jsxRuntime.jsx）
需要處理引入的CSS文件
需要處理遠(yuǎn)程引入的模塊（代碼中引入routes的語句）
處理CSS文件
以處理CSS文件舉例，假設(shè)CSS文件內(nèi)容如下：
.Container {
border: 1px solid black;
}
.SomeInnerPiece {
background-color: blue;
}
如果為了測(cè)試目的，僅需要生成類名對(duì)應(yīng)快照即可，所以可以實(shí)現(xiàn)一個(gè)簡(jiǎn)易的CSS loader，處理輸入的CSS文件，將結(jié)果輸出為Node.js可執(zhí)行的JSON格式：
{
"Container": "Container",
"SomeInnerPiece": "SomeInnerPiece"
}
參考：CSS loader的簡(jiǎn)易實(shí)現(xiàn)[3]
處理遠(yuǎn)程引入的模塊
再以處理「處理遠(yuǎn)程引入的模塊」舉例。
當(dāng)識(shí)別到https://開頭的文件描述符（即import聲明或import()表達(dá)式中字符串的部分）時(shí)， 可以利用https模塊發(fā)起請(qǐng)求，返回請(qǐng)求對(duì)應(yīng)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的簡(jiǎn)易實(shí)現(xiàn)[4]
總結(jié)
當(dāng)ESM Loader Hooks特性趨于穩(wěn)定，配套的loader生態(tài)足夠豐富后，很多原來需要打包工具才能實(shí)現(xiàn)的工程化需求都能用Node.js原生解決。
比如，要處理上述提到的app.tsx文件，只需執(zhí)行如下命令：
$> node --loader typescript-loader --loader css-loader --loader network-loader app.tsx
你覺得這個(gè)特性對(duì)未來前端工程化會(huì)有多大影響呢？
參考資料
[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的簡(jiǎn)易實(shí)現(xiàn):
https://github.com/JakobJingleheimer/demo-css-loader/blob/main/loader.mjs
[4]
Https loader的簡(jiǎn)易實(shí)現(xiàn):
https://github.com/nodejs/loaders-test/blob/835506a638c6002c1b2d42ab7137db3e7eda53fa/https-loader/loader.js
作者：卡頌
歡迎關(guān)注微信公眾號(hào) ：魔術(shù)師卡頌
分類導(dǎo)航