如何在Vite配置中添加对chrome命名空间的支持？

问题背景 #

用Vite和Svelte开发Chrome扩展，执行build操作时会弹出如下警告：

3:43:06 PM [vite-plugin-svelte] /home/mike/Code/myapp/components/Component.svelte:50:18
'chrome' is not defined

清楚这是因为chrome是Chrome扩展专属的全局命名空间，不属于标准浏览器环境API，且该警告不影响编译输出，但希望彻底消除它。已查阅Svelte文档及社区讨论，未找到现成解决方案，当前配置文件如下：

svelte.config.js #

import sveltePreprocess from "svelte-preprocess";

export default {
  preprocess: sveltePreprocess(),
};

vite.config.ts #

export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      stream: "rollup-plugin-node-polyfills/polyfills/stream",
      events: "rollup-plugin-node-polyfills/polyfills/events",
      assert: "assert",
      crypto: "crypto-browserify",
      util: "util",
      "node-fetch": "just-use-native-fetch",
    },
  },
  define: {
    "process.env": process.env ?? {},
  },
  build: {
    target: "es2020",

    rollupOptions: {
      plugins: [nodePolyfills({ crypto: true })],
      output: {
        globals: ["chrome"],
      },
    },
    commonjsOptions: {
      include: [],
    },
    minify: isMinifiying,
    emptyOutDir: false,
  },
  optimizeDeps: {
    disabled: false,
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
      target: "es2020",
    },
  },
});

解决方案 #

要消除该警告，核心是让代码检查工具和构建流程识别chrome为合法全局变量，以下是三种可行方案：

方案1：修改Vite配置声明全局变量 #

在vite.config.ts的define字段中添加chrome的全局声明，告诉Vite构建工具该变量是全局存在的：

export default defineConfig({
  // ... 保留原有配置
  define: {
    "process.env": process.env ?? {},
    chrome: "chrome" // 新增这一行
  },
  // ... 保留原有配置
});

方案2：通过ESLint声明全局变量（若项目使用ESLint） #

如果项目配置了ESLint，可在根目录的.eslintrc.cjs或.eslintrc.json中添加全局变量配置：

{
  "globals": {
    "chrome": "readonly"
  }
}

也可以直接在使用chrome的Svelte文件顶部添加单行注释：

/* global chrome */

方案3：通过svelte-preprocess配置全局变量 #

修改svelte.config.js，在sveltePreprocess中添加替换规则，让预处理工具识别chrome：

import sveltePreprocess from "svelte-preprocess";

export default {
  preprocess: sveltePreprocess({
    replace: {
      chrome: "chrome"
    }
  }),
};

验证 #

修改配置后重新执行npm run build，'chrome' is not defined的警告即可消失。

内容的提问来源于stack exchange，提问作者mikemaccana