可能改变前端工程化未来的特性: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
指令开启特性后,执行如下语句:
$> 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
你觉得这个特性对未来前端工程化会有多大影响呢?
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
参考资料
[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
可能改变前端工程化未来的特性:ESM Loader Hooks相关推荐
- 话题:什么是前端工程化?
虽然前端工程化的概念兴起还没几年的时间,但是对于"工程化"这个词并不是一个新鲜词了,在其他软件开发的领域很早就已经有了高度的工程化,例如Web服务端开发.只不过那个时候,前端工程师 ...
- 【话题】什么是前端工程化?
虽然前端工程化的概念兴起还没几年的时间,但是对于"工程化"这个词并不是一个新鲜词了,在其他软件开发的领域很早就已经有了高度的工程化,例如Web服务端开发.只不过那个时候,前端工程师 ...
- 分享狼叔关于《大前端工程化的实践与思考》
前言 本文来自极客前端训练营的主题公开课,非原创. 作者简介 桑世龙(狼叔),阿里巴巴前端技术专家,nodejs<狼书>作者. 快速发展的大背景 前端发展太快了,在2004年之前,大概只要 ...
- 普元云计算-聊聊前端工程化的实践与未来
转载本文需注明出处:微信公众号EAWorld,违者必究. 目录: 一.前端过去一年的发展 二.工程化是前端实现的核心 三.EOS8前端工程化设计实践分析 四.总结与展望 一.前端过去一年的发展 ...
- 聊聊前端工程化的实践与未来
转载本文需注明出处:微信公众号EAWorld,违者必究. 目录: 一.前端过去一年的发展 二.工程化是前端实现的核心 三.EOS8前端工程化设计实践分析 四.总结与展望 一.前端过去一年的发展 201 ...
- 前端架构,前端工程化
前端架构: 1.前端工程化 web应用复杂度的增加,特别是单页面应用的风靡.组件化,工程化,自动化成了前端发展的趋势.或者说一线的互联网公司就是这么做的. 每个前端团队都在打造自己的前端开发体系,这通 ...
- Angular、Vue、React 和前端的未来
最近社区针对框架的争论,从发文互怼再到粉丝站队再到大漠穷秋准备离职,令人唏嘘不已.不知从何而起,前端圈已经逐步变成了前端娱乐圈.越来越多的人开始站队 Angular.Vue.React,仅仅围绕这些库 ...
- 从阿里前端工程化中台实践,看中台建设的舍与得
作者|朱华军(阿大) 出品|InfoQ&阿里巴巴新零售淘系技术部 导读:随着前端技术不断从 Web 延伸至各种"端",大前端的概念早已成为业内共识.伴随着大前端的发展,与之 ...
- js读取外部json指定字段值完整代码_前端工程化 剖析npm的包管理机制(完整版)...
导读 现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区,理解其内部机制非常有利于加深我们对模块开发的理解.各项前端工程化的配置以加快 ...
- 前端工程化——脚手架及自动化构建
定义 一切以提高效率.降低成本.质量保证为目的的手段,都属于工程化 前端工程化主要解决的问题 传统语言或语法的弊端 无法使用模块化/组件化 重复性的机械工作 代码风格统一.质量保证 依赖后端服务接口的 ...
最新文章
- (广州)软件开发定制服务,工作流引擎 OA 库存管理系统
- html中设置表格单实线,css实现表格实线的方法
- 十 	mybatis逆向工程
- [转载] 管Q某犇借的手写堆
- mapreduce 算法
- 【笔试题】C语言:模拟实现strcat
- 关于待机、休眠、睡眠的区别和优缺点
- C语言 assert 函数 - C语言零基础入门教程
- spring读取properties配置文件_Spring-1
- MetaMask发布自定义网络API,允许开发人员为其用户提供多链服务
- 工作了五年的公司,拖欠员工报酬,该起诉吗?
- 移动滚动条显示或隐藏元素事件
- Bootstrap 多媒体对象(Media Object)
- php过滤excel文件,phpexcel读取excel内存释放怎么处理
- mac nginx 指定php.ini,基于Mac自带nginx、php,配置php运行环境
- 学习的四重境界,给上初中侄女,如何学习,如何定义社会人才
- Opencv速成笔记--图像处理1
- jemter ramp-up
- 李欣桐 计算机竞赛,【赛出精彩】我校举行数学计算能力竞赛活动
- 微信前台WEUI前台实例+EXCEL导出,SSM框架完整流程
热门文章
- Visual Studio Code中设置HTML/HTML5模板
- html网页页面显示不正常原因,网页不能正常显示css是什么原因?
- 专科毕业五年,曲线救国进腾讯
- 中国大学最卷的专业,让我读上了
- Cisco2960交换机配置(二)
- 【不忘初心】经典珍藏 LTSB|1709|1809|LTSC 四版集合八合一[纯净精简版]2020.07.20
- 计算机专业考研复习要点,2017年最新考研各科目复习要点
- 计算机与信息技术基础读书笔记,信息技术读书笔记
- 电脑能正常上网,但是显示无Internet
- 将Ubuntu 用户目录下的中文目录修改为英文