如何在没有外部库（如 https://crxjs.dev/vite-plugin）的情况下使用 Vite 的内容脚本导入？答案

【问题标题】：How to use imports in content script with Vite without external library like https://crxjs.dev/vite-plugin?如何在没有外部库（如 https://crxjs.dev/vite-plugin）的情况下使用 Vite 的内容脚本导入？
【发布时间】：2023-02-11 01:10:15
【问题描述】：

将 es 模块导入内容脚本时出现问题： (How to import ES6 modules in content script for Chrome Extension)

也许有一种方法可以在一个文件中构建内容脚本来解决这个问题？

我正在使用这个样板 - https://github.com/JohnBra/vite-web-extension。这是我的 vite 配置的样子：

import react from "@vitejs/plugin-react-swc";
import { resolve } from "path";
import { defineConfig } from "vite";
import copyContentStyle from "./utils/plugins/copy-content-style";
import makeManifest from "./utils/plugins/make-manifest";

const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const assetsDir = resolve(root, "assets");
const outDir = resolve(__dirname, "dist");
const publicDir = resolve(__dirname, "public");

const IS_DEV = process.env.DEV === "true";

export default defineConfig({
  resolve: {
    alias: {
      "@src": root,
      "@assets": assetsDir,
      "@pages": pagesDir,
    },
  },
  plugins: [react(), makeManifest(), copyContentStyle()],
  publicDir,
  build: {
    minify: !IS_DEV,
    outDir,
    sourcemap: IS_DEV,
    emptyOutDir: IS_DEV,
    rollupOptions: {
      input: {
        // devtools: resolve(pagesDir, 'devtools', 'index.html'),
        // panel: resolve(pagesDir, "panel", "index.html"),
        content: resolve(pagesDir, "content", "index.ts"),
        background: resolve(pagesDir, "background", "index.ts"),
        popup: resolve(pagesDir, "popup", "index.html"),
        // newtab: resolve(pagesDir, "newtab", "index.html"),
        // options: resolve(pagesDir, "options", "index.html"),
      },
      output: {
        entryFileNames: (chunk) => {
          return `src/pages/${chunk.name}/index.js`;
        },
      },
    },
  },
});

我尝试为内容脚本设置一个单独的 vite 配置，以将其构建在一个文件中。但是，我没有成功

这是它的配置：

import { resolve } from "path";
import { defineConfig } from "vite";
import copyContentStyle from "./utils/plugins/copy-content-style";
import { viteSingleFile } from "vite-plugin-singlefile";

const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const assetsDir = resolve(root, "assets");
const outDir = resolve(__dirname, "dist");
const publicDir = resolve(__dirname, "public");

const IS_DEV = process.env.DEV === "true";

export default defineConfig({
  resolve: {
    alias: {
      "@src": root,
      "@assets": assetsDir,
      "@pages": pagesDir,
    },
  },
  plugins: [copyContentStyle(), viteSingleFile()],
  publicDir,
  build: {
    minify: !IS_DEV,
    outDir,
    sourcemap: IS_DEV,
    emptyOutDir: IS_DEV,
    rollupOptions: {
      input: {
        content: resolve(pagesDir, "content", "index.ts"),
      },
      output: {
        dir: `src/pages/content`,
      },
    },
  },
});

【问题讨论】：

标签： vite browser-extension

【解决方案1】：

我最终为内容脚本创建了一个单独的 vite 配置，如下所示：

import { resolve } from "path";
import { defineConfig } from "vite";
import { viteSingleFile } from "vite-plugin-singlefile";

const root = resolve(__dirname, "src");
const pagesDir = resolve(root, "pages");
const outDir = resolve(__dirname, "dist", "src", "pages", "content");

const IS_DEV = process.env.DEV === "true";

export default defineConfig({
  resolve: {
    alias: {
      "@src": root,
      "@pages": pagesDir,
    },
  },
  plugins: [viteSingleFile()],
  build: {
    copyPublicDir: false,
    minify: !IS_DEV,
    outDir,
    sourcemap: IS_DEV,
    emptyOutDir: IS_DEV,
    rollupOptions: {
      input: {
        content: resolve(pagesDir, "content", "index.ts"),
      },
      output: {
        entryFileNames: "index.js",
      },
    },
  },
});

而且，我运行这一切：

  "scripts": {
    "build:general": "vite build",
    "build:content": "vite build --config vite.contentScript-config.ts",
    "build": "run-p build:*",
    "dev:general": "vite build --watch --mode development",
    "dev:content": "vite build --config vite.contentScript-config.ts --watch --mode development",
    "dev": "run-p dev:*"
  },

【讨论】：