如何配置Astro将src独立TS文件打包为dist中未被页面引用的单独文件？

你可以通过配置Astro的Vite构建选项，让src/somescript.ts被单独打包到dist目录，无需被任何页面引用。具体步骤如下：

1. 修改Astro配置文件 #

在astro.config.mjs中添加Vite的Rollup构建配置，指定额外的入口文件：

import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        // 自定义入口：键名对应输出的文件名前缀
        input: {
          somescript: './src/somescript.ts',
        },
        output: {
          // 输出到dist根目录，保持文件名与入口键名一致（自动添加.js后缀）
          entryFileNames: '[name].js',
          chunkFileNames: '[name].js',
          assetFileNames: '[name][extname]',
        },
      },
    },
  },
});

2. 配置浏览器扩展Manifest #

构建完成后，dist目录会生成somescript.js，直接在manifest.json的content_scripts中引用该文件即可：

"content_scripts": [
  {
    "matches": ["https://*/*"],
    "js": ["somescript.js"],
    "run_at": "document_end"
  }
]

为什么之前的方法不可行？ #

public目录下的文件会被Astro原样复制到dist，不会经过Vite的编译打包流程。你在public/content.js中引入src/somescript.ts时，浏览器无法识别TS文件，且src目录的文件不会被复制到dist，导致路径错误，因此这种方式无法生效。

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