防止服务人员受伤。js与vite/rollup捆绑在一起

Question

我有一个基于TypeScript的Vuejs项目，使用Vite编译并打包。

我正在尝试配置构建系统，以编译我的定制服务工作者（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不需要转录/编译，我知道我可以简单地将其包含在public/中，并且它会原封不动地复制到dist/文件夹中。

我已经看了vite-plugin-pwa，但这是相当不透明和绑定到工作箱。

其他相关问题与人们希望从其构建输出中完全排除文件的情况有关，这不是我想要的。

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

Answer 1

您可以通过build配置入口点和输出位置。在Vite配置中的汇总选项：

>

为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/`
        }
      },
    },
  },
})

演示