轻松玩转Vite/Rollup/webpack/esbuild/Rspack/babel插件开发(二)

在上篇中,我们通过引入通用构建系统unplugin抺平不同构建系统的API差异,现在我们可以只需要创建一个unplugin插件就可以输出Vite/Rollup/webpack/esbuild/Rspack插件,这对插件开发来说实在是太方便了。

对普通插件开发者而言,一般插件最主要的扩展在于:

  • Import URI的处理,如可以自定义导入import { t } from "myref:voerkaii18n?a=1',通过相应的Hook进行处理。
  • 对源代码进行提取、转换、格式化、压缩等等,这是最重要的功能
  • 其他可复制文件,CSS处理等。

其中对源代码进行处理是插件最核心常用的,这也是本系列要重点讨论的问题。

通过只需要实现通过transformIncludetransform两个API就可以非常容易实现源代码的转码等功能。

通过在unplugintransform中,传入的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/RspackDefine插件。

使用该插件时就跟普通插件一样:

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抽象语法树对源代码进行处理!

以下是我的一大波开源项目推荐:

相关推荐
理想不理想v5 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
~甲壳虫15 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
Beamon__15 小时前
element-plus按需引入报错AutoImport is not a function
webpack·element-plus
CodeToGym15 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫15 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫15 小时前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
lin-lins2 天前
模块化开发 & webpack
前端·webpack·node.js
柳鲲鹏3 天前
LINUX/CMAKE编译opencv_contrib
linux·opencv·webpack
前端李易安3 天前
webpack的常见配置
前端·webpack·node.js
魏大帅。3 天前
Webpack入门教程:从基本概念到优化技巧
前端·webpack·node.js