来自公众号:魔术师卡颂
大家好,我卡颂。
在最近发布的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(
<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的简易实现[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
你觉得这个特性对未来前端工程化会有多大影响呢?
参考资料
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
文章评论