大家好，我卡颂。

在最近发布的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）。