防止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

如果 service worker 不需要 transpiled/compiled，我知道我可以简单地，它会被原样复制到 dist/ 文件夹。

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

其他相关问题涉及人们希望从他们的构建输出中的情况，这不是我所追求的。

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

Answer 1

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

为 service-worker.ts 文件添加一个入口点（通过 build.rollupOptions.input）。
为输出文件名添加格式化程序，将服务工作者文件放在输出目录的根目录中（通过 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]-[hash].js'            // put service worker in root
             : 'assets/js/[name]-[hash].js', // others in `assets/js/`
        }
      },
    },
  },
})

demo

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

Prevent service-worker.js from being bundled with vite / rollup

rollup

typescript

service-worker

vuejs3

vite