defines 参数

该参数是用于在 vite 编译时进行文本替换，其实就是 vite 的 define 配置项，但是与之不同的是，它将会同时作用与 injects , transformers 这俩配置上. 具体请看作用范围

如何使用

该参数是一个 Record<string, string> 类型，因此你需要像下面这样使用

typescript

ViteWebExtKits({
  extensionId: extId,
  defines: {
    foo: "bar",
  },
});

ViteWebExtKits({
  extensionId: extId,
  defines: {
    foo: "bar",
  },
});

我们传递以下这个对象

json

{
  "foo": "bar"
}

{
  "foo": "bar"
}

这意味着，只要我们代码中包含 foo 变量或者字符串，都会被替换为字符串 "bar"

比如我们在 index.entry.tsx 中编写以下代码

tsx

function App() {
  return <div>foo</div>;
}

function App() {
  return <div>foo</div>;
}

在编译后会变成

tsx

function App() {
  return <div>bar</div>;
}

function App() {
  return <div>bar</div>;
}

比如我们在 options 页面中打印

typescript

console.log(foo);

console.log(foo);

编译后会变成

typescript

console.log("bar");

console.log("bar");

注意

如果打印的是 console.log(window.foo) 是不会被转换的