大家好,我卡颂。
在最近发布的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不能处理的部分,比如:
以处理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);
}
当ESM Loader Hooks特性趋于稳定,配套的loader生态足够丰富后,很多原来需要打包工具才能实现的工程化需求都能用Node.js原生解决。
比如,要处理上述提到的app.tsx文件,只需执行如下命令:
$> node --loader typescript-loader --loader css-loader --loader network-loader app.tsx
你觉得这个特性对未来前端工程化会有多大影响呢?
来源: 魔术师卡颂
webpack的loaders是一块很重要的组成部分。我们都知道webpack是用于打包的,里面的所有资源都是“模块”,内部实现了对模块资源进行加载的机制。loader的作用为了转换应用程序的资源文件。
知道在webpack中使用scss,less之类的东西,需要配置style-loader, css-loader, sass-loader这些,但是在vue-cli的项目中会报Invalid CSS after ...load the styles的错误,这是由于loader重复加载导致的。
我们在写webpack配置文件的时候,应该有注意到经常用到loader这个配置项,那么loader是用来做什么的呢?loader其实是用来将源文件经过转化处理之后再输出新文件。
方案一:使用lib-flexible包:使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包;方案二:使用less或者sass等CSS 预处理语言写适配方案:基准按照设计图尺寸,但是缺点是不通用,不同页面可能设计图基准尺寸不同
那是因为,webpack 默认只支持打包 Javascript 模块,比如 import m1 from m1.js,而对于引入了图片模块,webpack 并不知道该如何处理,因此在打包的时候就报错了。对于上述打包图片资源报错的问题
通过配置 name 和 outputPath 选项,可以自定义图片名称和路径。打包后,dist 目录下会生成一个 images 文件夹;url-loader 将图片转化成 base 编码字符串和 main.js 打包在一起。
`babel-loader` 是一个 npm 包,它使得 webpack 可以通过 babel 转译 JavaScript 代码。babel 的功能在于「代码转译」,具体一点,即将目标代码转译为能够符合期望语法规范的代码。在转译的过程中
整理一些常用的loader分享给大家,方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行,不喜勿喷。style-loader用于将css编译完成的样式,挂载到页面style标签上。
项目中常常会引入一些图片资源,什么jpg|jpeg|png|gif|ico之类的,正常情况下,我们需要做一下性能优化,看看如何大而化小、小而化了,提升生产环境资源加载速度。所以,本文记录一下大图片使用image-webpack-loader插件压缩一下
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!