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

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

相关推荐
王解7 小时前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
幼儿园的小霸王1 天前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
Amd7941 天前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 天前
09 —— Webpack搭建开发环境
前端·webpack·node.js
契机再现1 天前
babel与AST
javascript·webpack·typescript
景天科技苑1 天前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
前端李易安2 天前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
loey_ln2 天前
webpack配置和打包性能优化
前端·webpack·性能优化
Amd7942 天前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
三天不学习2 天前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm