使用lit-html时IE11兼容性问题求助

这个SCRIPT1002错误本质是IE11完全不支持ES6及以上的语法特性——你看到的export const directive = <F extends DirectiveFactory>(f: F): F =>里，箭头函数、TypeScript泛型语法（<F extends...>）、ES模块的export都是IE11无法解析的。结合你的技术栈，下面是一步步的修复方案：

1. 强制Babel转译所有依赖（包括lit-html） #

Parcel默认会跳过node_modules目录的转译，但lit-html的源码是ES6+写的，所以必须让Babel处理它。

首先安装必要的Babel依赖：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript core-js@3

然后在项目根目录创建babel.config.json，配置如下：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-typescript"
  ],
  "include": ["src/**/*", "node_modules/lit-html/**/*"]
}

这里的include明确告诉Babel要转译你的源码和lit-html的代码，useBuiltIns: usage会自动根据目标浏览器注入所需的polyfill。

2. 调整TypeScript配置为IE11兼容 #

修改tsconfig.json，确保编译输出是IE11能识别的ES5语法：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "UMD", // 输出UMD模块，兼容CommonJS/AMD/全局变量，IE11不支持ES模块
    "lib": ["ES2015", "DOM"], // 补充必要的库类型
    "declaration": true, // 保留类型声明
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

把target设为ES5会让TypeScript把箭头函数、泛型等语法转译为IE11能理解的ES5代码，module: UMD则避免了ES模块的export/import语法。

3. 补充Web Components相关Polyfill（如果用到自定义元素） #

如果你的库基于lit-html封装了自定义元素，IE11完全不支持Web Components标准，必须引入polyfill：

npm install --save @webcomponents/webcomponentsjs

然后在你的入口文件顶部添加：

import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';

这个polyfill会补全自定义元素、Shadow DOM等特性的支持。

4. 验证编译结果 #

执行Parcel构建命令后，打开输出的JS文件检查：

• 有没有残留的箭头函数（=>）
• 有没有export/import语法
• 有没有类似<F extends...>的泛型语法

如果还有残留，可能需要检查Parcel的配置，确保它没有忽略Babel的设置。可以尝试在package.json里添加browserslist字段，强制Parcel识别目标浏览器：

"browserslist": [
  "ie 11"
]

5. 测试IE11运行 #

把构建后的库引入到IE11环境中测试，确认语法错误消失。如果还有其他错误，大概率是某些API缺少polyfill，可以通过core-js手动补充，比如：

import 'core-js/stable/promise';
import 'core-js/stable/symbol';

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