如何配置Vite来为Chrome DevTools扩展输出单包？

Question

我正在尝试用Vite创建一个Chrome DevTools扩展。

有几个不同的入口点。主要的两个是src/background.ts和devtools.html (引用src/devtools.ts)。

有一些代码我想在src/devtools-shared.ts中与他们共享。

在运行构建之后，入口点仍然包含import语句。为什么以及如何去掉它们，使它们成为自包含的包(理想情况下不是生活，只是好的旧的顶层脚本)？

下面是我得到的信息：

vite.config.js

const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  resolve: {
    alias: {
      "root": resolve(__dirname),
      "@": resolve(__dirname, "src")
    }
  },
  esbuild: {
    keepNames: true
  },
  build: {
    rollupOptions: {
      input: {
        'background': "src/background.ts",
        'content-script': "src/content-script.ts",
        'devtools': "devtools.html",
        'panel': "panel.html",
      },
      output: {
        entryFileNames: chunkInfo => {
          return `${chunkInfo.name}.js`
        }
      },
      // No tree-shaking otherwise it removes functions from Content Scripts.
      treeshake: false
    },
    // TODO: How do we configured ESBuild to keep functions?
    minify: false
  }
})

src/devtools-shared.ts

export const name = 'devtools'

export interface Message {
    tabId: number
}

src/background.ts

import * as DevTools from './devtools-shared'

src/devtools.ts

import * as DevTools from './devtools-shared'

然后在dist/background.js中，我仍然有：

import { n as name } from "./assets/devtools-shared.8a602051.js";

我不知道是什么控制了这一切。我以为不会有任何import语句。

background.ts入口点需要是lib还是什么？

对于devtools.html，是否有其他选项可以控制这一点？

我知道有https://github.com/StarkShang/vite-plugin-chrome-extension，但这在Chrome DevTool扩展中不能很好地工作。我更喜欢自己配置Vite。

Answer 1

事实证明，这是不可能的。当有多个入口点时，Rollup强制执行代码拆分。参见https://github.com/rollup/rollup/issues/2756。

我能想到的唯一解决方法是拥有多个vite.config.js文件，例如：

• vite.config.background.js
• vite.config.content-script.js
• vite.config.devtools.js

然后在package.json中做类似这样的事情

  "scripts": {
    "build": "npm-run-all clean build-background build-content-script build-devtools",
    "build-background": "vite build -c vite.config.background.js",
    "build-content-script": "vite build -c vite.config.content-script.js",
    "build-devtools": "vite build -c vite.config.devtools.js",
    "clean": "rm -rf dist"
  },

这效率不是很高，因为它在每个构建之间重复了大量的工作，但这是一个汇总问题。