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) 是不会被转换的