在上篇中,我们通过引入通用构建系统unplugin
抺平不同构建系统的API差异,现在我们可以只需要创建一个unplugin
插件就可以输出Vite/Rollup/webpack/esbuild/Rspack
插件,这对插件开发来说实在是太方便了。
对普通插件开发者而言,一般插件最主要的扩展在于:
- 对
Import URI
的处理,如可以自定义导入import { t } from "myref:voerkaii18n?a=1'
,通过相应的Hook
进行处理。 - 对源代码进行提取、转换、格式化、压缩等等,这是最重要的功能
- 其他可复制文件,CSS处理等。
其中对源代码进行处理是插件最核心常用的,这也是本系列要重点讨论的问题。
通过只需要实现通过transformInclude
和transform
两个API就可以非常容易实现源代码的转码等功能。
通过在unplugin
的transform
中,传入的code
参数就是一个普通的字符串。我们可以使用最简单的字符串替换方式,开发实现一个类似webpack
中的DefinePlugin
这类的插件。
DefinePlugin
插件本质上就是一个编译期的常量替代功能。
ts
import type { UnpluginFactory } from 'unplugin'
import { createUnplugin } from 'unplugin'
export interface Options {
Record<string,string,number,boolean>
}
export const unpluginFactory: UnpluginFactory<Options | undefined> = options => ({
name: 'unplugin-define',
// 对声明在fileExts的文件进行处理
transformInclude(id) {
return id.endsWith(".js")
},
// 对源代码中的常量进行替换
transform(code) {
Object.entries(options).forEach(([name,value])=>{
return code.replaceAll(name, value)
}
return code
}
})
export const unplugin = /* #__PURE__ */ createUnplugin(unpluginFactory)
export default unplugin
export const viteDefinePlugin = unplugin.vite
export const rollupDefinePlugin = unplugin.rollup
export const webpackDefinePlugin = unplugin.webpack
export const rspackDefinePlugin = unplugin.rspack
export const esbuildDefinePlugin = unplugin.esbuild```
好了,一次就输出了Vite/Rollup/webpack/esbuild/Rspack
的Define
插件。
使用该插件时就跟普通插件一样:
javascript
// vite.config.ts
import Define from 'unplugin-define/vite'
export default defineConfig({
plugins: [
Define ({
VOERKAI18N:"voerkai18n",
//...
}),
],
})
上例作为一个演示项目,简单粗暴地对源代码行行字符串替换只能适用于一些简单场合,稍微复杂点些就不能满足要求。
此时可以尝试使用正则表达式进行匹配替换,在开发VoerkaI18n
时,要从源代码中提取到t("要翻译的内容",var1,var2)
里面"要翻译的内容"
,第一版本就是采用的正则表达式匹配替换,匹配t
函数的正则表达式如下:
javascript
const DefaultTranslateExtractor = String.raw`\bt\(\s*("|'){1}(?:((?<namespace>\w+)::))?(?<text>.*?)(?=(\1\s*\))|(\1\s*\,))`
在实际开发时,还需要考虑提取范围限制、语法表达式等种种限制,正则表达式匹配替换打开显得力不从心。
这时就得重磅请出AST抽象语法树
这尊大神了,下篇介绍一下如何使用AST抽象语法树
对源代码进行处理!
以下是我的一大波开源项目推荐:
- 全流程一健化React/Vue/Nodejs国际化方案 - VoerkaI18n
- 无以伦比的React表单开发库 - speedform
- 终端界面开发增强库 - Logsets
- 简单的日志输出库 - VoerkaLogger
- 装饰器开发 - FlexDecorators
- 有限状态机库 - FlexState
- 通用函数工具库 - FlexTools
- 小巧优雅的CSS-IN-JS库 - Styledfc
- 为JSON文件添加注释的VSCODE插件 - json_comments_extension
- 开发交互式命令行程序库 - mixed-cli
- 强大的字符串插值变量处理工具库 - flexvars
- 前端link调试辅助工具 - yald
- 异步信号 - asyncsignal