大家好，我卡颂。
在最近发布的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
你觉得这个特性对未来前端工程化会有多大影响呢？
我正在参与技术社区创作者签约计划招募活动，点击链接报名投稿。
评论(0)