如何通过CDN单独加载Lit依赖与TypeScript构建的Web组件

完全可以实现你想要的效果——发布由TypeScript构建的Lit元素时不打包Lit依赖，通过CDN分别加载Lit与组件，让多个组件共享同一版本的Lit实例。具体实现步骤如下：

1. 调整打包工具配置（以Rollup为例） #

需要将Lit相关依赖标记为外部依赖，让打包工具保留组件代码中的import语句，而不是把Lit的代码打包进来。在Rollup配置文件中添加external字段：

export default {
  // 其他配置...
  external: ['@lit/lit', 'lit', '@lit/core'], // 列出所有Lit相关依赖
  output: {
    format: 'es', // 输出ES模块格式
    file: 'fs-gist.js'
  }
};

同时确保TypeScript编译时保留原有的模块导入路径，tsconfig.json中保持module: "ESNext"或"ES6"即可。

2. 修改package.json配置 #

按照你给出的示例调整字段，同时通过peerDependencies声明对Lit的依赖（明确告知用户需要提供Lit环境）：

{
  "main": "fs-gist.js",
  "module": "fs-gist.js",
  "types": "fs-gist.d.ts",
  "type": "module",
  "peerDependencies": {
    "@lit/lit": "^2.0.0" // 指定兼容的Lit版本范围
  }
}

使用peerDependencies而非dependencies，可以避免用户安装组件时重复下载Lit，同时强制组件使用外部提供的Lit版本，确保共享。

3. 发布组件到npm #

将编译后的fs-gist.js、类型文件fs-gist.d.ts和修改后的package.json一起发布到npm，unpkg会自动托管这些文件供CDN加载。

4. 在浏览器中加载使用 #

按照你设想的方式，先加载Lit依赖，再加载你的组件：

<script type="module" src="https://unpkg.com/@lit/lit"></script>
<script type="module" src="https://unpkg.com/@fireflysemantics/fs-gist"></script>

此时多个基于Lit的组件都会共享同一个Lit实例，不会重复加载Lit代码，有效减少页面资源体积。

注意事项 #

• 版本兼容性：确保所有共享Lit的组件都依赖兼容的Lit版本范围，避免版本冲突导致运行错误。
• 模块解析：ES模块会自动处理依赖加载顺序，即使先加载组件，浏览器也会先去解析并加载Lit依赖，不过显式先加载Lit可以让依赖提前就绪。
• 打包验证：发布前检查fs-gist.js的代码，确认其中的Lit导入语句（如import { LitElement } from '@lit/lit'）是保留的，没有被打包进组件代码。

内容的提问来源于stack exchange，提问作者Ole