可能改變前端工程化未來的特性：ESM Loader Hooks

卡頌發表於2022-07-18
前端Hook

大家好，我卡頌。

在最近釋出的Node v18.6.0中，帶來了一個試驗特性ESM Loader Hooks API。

如果他最終落地，很可能會成為改變前端工程化未來的特性。本文我們來聊聊他。

歡迎加入人類高質量前端框架群，帶飛

本文參考：

Custom ESM loaders: Who, what, when, where, why, how

特性簡介

用過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的簡易實現

處理遠端引入的模組

再以處理處理遠端引入的模組舉例。

當識別到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的簡易實現

總結

當ESM Loader Hooks特性趨於穩定，配套的loader生態足夠豐富後，很多原來需要打包工具才能實現的工程化需求都能用Node.js原生解決。

比如，要處理上述提到的app.tsx檔案，只需執行如下命令：

$> node --loader typescript-loader --loader css-loader --loader network-loader app.tsx

你覺得這個特性對未來前端工程化會有多大影響呢？

相關文章