可能改变前端工程化未来的特性:ESM Loader Hooks

Posted 小生方勤

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了可能改变前端工程化未来的特性: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-loaderurl-loader

loader的执行顺序取决于webpack内部对文件树解析、遍历的顺序。

今天要介绍的ESM Loader Hookswebpack loader类似,只不过对文件树的解析、遍历是由Node.js原生支持的ESM规范(而不是打包工具)确定的。

通过定义不同loader,就能在「不使用工程化工具」的前提下,对项目中各个ESM模块进行处理。

举个例子,在命令行通过--experimental-loader指令开启特性后,执行如下语句:

$> node --loader redirect.mjs app.mjs

其中,app.mjs「待处理的源文件」.mjs后缀指代该文件是个ESM模块(相对应的,.cjs后缀指CJS模块)。

--loader用于指定自定义的ESM Loader,这里指定的是redirect.mjsapp.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.createElementjsxRuntime.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

彦祖,亦菲,点个「在看」

暑期编程PK赛 得CSDN机械键盘等精美礼品!

以上是关于可能改变前端工程化未来的特性:ESM Loader Hooks的主要内容,如果未能解决你的问题,请参考以下文章

esm的最简单理解

前端工程化7:自定义实现Webpack中的Loader和Plugin

前端工程化-loader机制

前端工程化-loader机制

人工智能的未来:趋势和对软件工程师的启示

每个前端都需要知道这些面向未来的CSS技术