防止service-worker.js与vite/rollup捆绑

Question

我有一个使用 Vite 编译和捆绑的基于 TypeScript 的 Vuejs 项目。

我正在尝试配置构建系统来编译我的自定义服务工作线程 (src/service-worker.ts) 并将输出放置在 dist/service-worker.js 中。特别是，我不希望将其作为应用程序 JS 包的一部分包含在内，因为它需要作为静态网站的一部分在该众所周知的 URL 上提供服务。

现有的结构是这样的：

index.html
public/
 favicon.ico
src/
 service-worker.ts
 main.ts
 /* etc */

我希望输出是这样的：

dist/
 index.html
 assets/index.[hash].js
 assets/vendor.[hash].js
 /* ... */
 service-worker.js  # <-- I would like the file emitted here

如果服务工作线程不需要被转译/编译，我知道我可以简单地将它包含在其中public/，并将其复制到dist/原封不动地复制到文件夹中。

我看过vite-plugin-pwa但它相当不透明并且与工作箱相关。

其他相关问题涉及人们想要完全排除文件的情况情况，这并不是我所追求的。

如何编译 TypeScript 文件，但将其输出未捆绑在我的 dist 文件夹中？

Answer 1

build.rollupOptions您可以在 Vite 配置中配置入口点和输出位置：

\n

\n

1. 添加文件的入口点service-worker.ts（通过build.rollupOptions.input）。

   \n
\n

2. 添加输出文件名格式化程序，将服务工作线程文件放入输出目录的根目录中（通过build.rollupOptions.output.entryFilenames）。

   \n
\n

\n

// vite.config.ts\nimport { defineConfig } from \'vite\'\nimport vue from \'@vitejs/plugin-vue\'\n\nexport default defineConfig({\n  plugins: [vue()],\n  build: {\n    rollupOptions: {\n      input: {\n        // the default entry point\n        app: \'./index.html\',\n\n        // 1\xef\xb8\x8f\xe2\x83\xa3\n        \'service-worker\': \'./src/service-worker.ts\',\n      },\n      output: {\n        // 2\xef\xb8\x8f\xe2\x83\xa3\n        entryFileNames: assetInfo => {\n          return assetInfo.name === \'service-worker\'\n             ? \'[name].js\'                  // put service worker in root\n             : \'assets/js/[name]-[hash].js\' // others in `assets/js/`\n        }\n      },\n    },\n  },\n})\n

\n

演示

\n