Rsbuild 如何替换 CRA html 模版里的变量

date

Jul 17, 2024

slug

rsbuild-html-var

status

Published

tags

React

type

Post

URL

summary

Author

Rsbuild 本身是支持多个 HTML 模版语法的，所以正常使用 Rsbuild 应该不会遇到这个问题。我的背景是我们之前的项目脚手架HTML模版是基于 CRA 的。他里面用没用其他的 HTML 模版，而是用的`%var%`这种变量，然后通过 webpack 插件对变量进行替换。

所以问题就来了，如果我想直接在这种项目里引入 Rsbuild 使用的话，在不影响原有打包流程的情况下，要么新增一个 HTML模版给 Rsbuild用，要么支持 Rsbuild 对之前的 HTML 模版里的变量进行替换。

显然添加一个HTML 文件不是很优雅的做法，所以我仔细看了一下 Rsbuild 的文档，官方并没有相应的解决文档，毕竟人家也没让你们这么用。

但是 Rsbuild 提供了htmlPlugin的方法，所以经过尝试之后通过使用htmlPlugin就可以进行对 HTML 模版变量进行替换了。

具体方法如下：

// rsbuild.config.ts
import { loadEnv, defineConfig } from '@rsbuild/core';
...
export default defineConfig({
	...
	tools: {
    htmlPlugin(config, a) {
      const htmlContent = fs.readFileSync(config.template, 'utf8')
      config.templateContent = htmlContent;
      const envVar = loadEnv();
      const htmlVarMap = envVar.parsed
      Object.keys(htmlVarMap).forEach((key) => {
        const value = htmlVarMap[key];
        config.templateContent = config?.templateContent?.replace(new RegExp('%' + escapeStringRegexp(key) + '%', 'g'), value);
      });
      return config
    },
    ...
})

function escapeStringRegexp(string) {
  if (typeof string !== 'string') {
    throw new TypeError('Expected a string');
  }
  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
}

就这么简单，当然最好的办法还是推荐使用 HTML 模版。