在 Vite 中捆绑 Lit.js 进行生产 - RollupError: 无法解析入口模块“index.html”

Question

我已经使用 Lit 和 TypeScript 模板在 Vite 中启动了该项目。

它已自动创建 HTML 和 css 文件。

我的目标是创建一个 app.ts 文件，下载后动态注入 Lit 自定义组件（我的项目是一个第三方插件，通过 CDN 的脚本标签加载）。

当删除 HTML 文件并运行构建脚本 tsc && vite build 时，出现以下错误：

RollupError：无法解析入口模块“index.html”。

为什么 Lit 项目需要 html 文件？如果它是可选的，我如何捆绑以便我只获得捆绑的js？

我已经删除了 HTML 文件，希望它不会捆绑它，但我收到了错误。

Answer 1

使用Vite的库模式，将入口点设置为js/ts文件。

例如

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'lib/index.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['lit'],
    },
  },
})

保留 HTML 文件对于在开发过程中预览组件可能仍然有用。