可能改变前端工程化未来的特性：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(

{ useRoutes(routes)}

);

其中包括很多Node.js不能处理的部分，比如：

TS语法（需要编译成JS，并处理文件描述符为Node.js可识别的云南idc服务商形式）。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。