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

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

相关推荐
随笔记4 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
疾风铸境21 小时前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
try again!1 天前
rollup.js 和 webpack
开发语言·javascript·webpack
依旧7051 天前
webpack打包流程
webpack
ak啊1 天前
Webpack打包过程中的核心机制-Chunk 的生成与优化
前端·webpack·源码
挖稀泥的工人1 天前
面试看这一篇webpack
前端·webpack
雾散尽时1 天前
Webpack在项目中的配置与工作原理解析
webpack
程序员黄同学2 天前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
jndingxin2 天前
OpenCV 图形API(5)API参考:数学运算用于执行图像或矩阵加法操作的函数add()
opencv·webpack·矩阵
ak啊2 天前
Webpack Loader 执行机制
前端·webpack·源码