基于Lit的Web组件库在无构建器项目中引入时lit解析失败求助

问题原因 #

浏览器原生ES模块不支持「裸导入」（比如import {LitElement} from 'lit'），只有Vite这类构建工具会自动解析这类导入路径。你的Polymer 2项目没有构建器，浏览器无法识别lit这个裸模块名，因此抛出解析错误。

解决方案 #

方案1：将Lit打包进组件库（独立使用） #

如果希望组件库无需依赖外部引入的Lit，可以修改Vite配置，把Lit从外部依赖列表中移除，让构建工具将Lit代码打包到你的组件库产物中：

修改vite.config.js：

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

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/my-title.js'),
      name: 'MyTitle',
      fileName: 'my-title',
      formats: ['es'], // 保持ES模块格式适配浏览器
    },
    rollupOptions: {
      external: [], // 清空外部依赖，将Lit打包进产物
    },
  },
});

重新执行构建后，将生成的my-title.js引入Polymer项目的HTML中（确保script标签为type="module"）：

<script type="module" src="./lib/my-title.js"></script>

此时组件库已包含Lit的代码，浏览器可直接运行。

方案2：通过Import Map映射Lit的CDN地址（共享依赖） #

如果想避免重复打包Lit、减少文件体积，可以利用浏览器的importmap特性，将裸导入的lit映射到CDN地址：

1. 在Polymer项目的HTML文件头部添加Import Map：

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.1.2/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.1.2/"
    }
  }
</script>

2. 确保Vite配置中保留Lit为外部依赖（默认已配置，也可显式声明）：

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

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/my-title.js'),
      name: 'MyTitle',
      fileName: 'my-title',
      formats: ['es'],
    },
    rollupOptions: {
      external: ['lit'], // 将Lit设为外部依赖，不打包进产物
    },
  },
});

3. 构建组件库后，在Polymer项目中先引入Import Map，再引入你的组件库：

<script type="importmap">
  <!-- 上面的映射内容 -->
</script>
<script type="module" src="./lib/my-title.js"></script>

浏览器会通过Import Map自动将import 'lit'解析为对应的CDN模块。

注意事项 #

• 确保Polymer项目中引入组件库的script标签必须带有type="module"，否则浏览器不会按ES模块方式处理。
• 若Polymer 2项目使用HTML Imports而非ES模块，可将组件库打包为IIFE格式（修改Vite的formats: ['iife']），再通过普通script标签引入。

内容的提问来源于stack exchange，提问作者Geoffrey Lalloué