防止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 配置中：

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

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

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        // the default entry point
        app: './index.html',

        // 1️⃣
        'service-worker': './src/service-worker.ts',
      },
      output: {
        // 2️⃣
        entryFileNames: assetInfo => {
          return assetInfo.name === 'service-worker'
             ? '[name].js'                  // put service worker in root
             : 'assets/js/[name]-[hash].js' // others in `assets/js/`
        }
      },
    },
  },
})

演示