大家好，我卡頌。

在最近發(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í)行如下語(yǔ)句：

$> 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）。

比如在如下語(yǔ)句中：

$> 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語(yǔ)法（需要編譯成JS，并處理文件描述符為Node.js可識(shí)別的形式）。
• JSX轉(zhuǎn)換（需要編譯成React.createElement或jsxRuntime.jsx）。
• 需要處理引入的CSS文件。
• 需要處理遠(yuǎn)程引入的模塊（代碼中引入routes的語(yǔ)句）。

處理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。