可能改变前端工程化未来的特性：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指令开启特性后，执行如下语句：,其中，app.mjs为「待处理的源文件」，.mjs后缀指代该文件是个ESM模块（相对应的，.cjs后缀指CJS模块）。,--loader用于指定自定义的ESM Loader，这里指定的是redirect.mjs，app.mjs会交由redirect.mjs处理。,redirect.mjs代码如下：,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）。,比如在如下语句中：,app.mjs会依次经过a b c三个「自定义ESM Loader」处理。,整个过程就像一个promise.then链条（事实上，每个ESM loader确实会返回一个promise）。,来看一个更接近日常开发的例子，考虑如下ESM模块：,其中包括很多Node.js不能处理的部分，比如：,以处理CSS文件举例，假设CSS文件内容如下：,如果为了测试目的，仅需要生成类名对应快照即可，所以可以实现一个简易的CSS loader，处理输入的CSS文件，将结果输出为Node.js可执行的JSON格式：,参考：CSS loader的简易实现[3]。,再以处理「处理远程引入的模块」举例。,当识别到https://​开头的文件描述符（即import​声明或import()​表达式中字符串的部分）时， 可以利用https​模块发起请求，返回请求对应promise：,参考：Https loader的简易实现[4]。,当ESM Loader Hooks特性趋于稳定，配套的loader生态足够丰富后，很多原来需要打包工具才能实现的工程化需求都能用Node.js原生解决。,比如，要处理上述提到的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。