likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 4

在上篇中，我们通过引入通用构建系统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插件本质上就是一个编译期的常量替代功能。

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插件。

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

// vite.config.ts
import Define from 'unplugin-define/vite'

export default defineConfig({
  plugins: [
    Define ({
       VOERKAI18N:"voerkai18n",
       //...      
    }),
  ],
})

上例作为一个演示项目，简单粗暴地对源代码行行字符串替换只能适用于一些简单场合，稍微复杂点些就不能满足要求。

此时可以尝试使用正则表达式进行匹配替换，在开发VoerkaI18n时，要从源代码中提取到t("要翻译的内容"，var1,var2)里面"要翻译的内容"，第一版本就是采用的正则表达式匹配替换，匹配t函数的正则表达式如下：

const DefaultTranslateExtractor = String.raw`\bt\(\s*("|'){1}(?:((?<namespace>\w+)::))?(?<text>.*?)(?=(\1\s*\))|(\1\s*\,))`

在实际开发时，还需要考虑提取范围限制、语法表达式等种种限制，正则表达式匹配替换打开显得力不从心。

这时就得重磅请出AST抽象语法树这尊大神了，下篇介绍一下如何使用AST抽象语法树对源代码进行处理！

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