Polymer lit-element Web 组件在 IE 中不起作用答案

【问题标题】：Polymer lit-element web components not working in IEPolymer lit-element Web 组件在 IE 中不起作用
【发布时间】：2020-02-02 19:12:21
【问题描述】：

我已经使用 Lit-Element 创建了自定义 Web 组件，它在 Chrome、Firefox、Eadge、Opera 上运行良好，但在 IE 11 中无法运行。我也尝试将其编译成 es5，但仍然没有成功。

IE 控制台出错：

Webpack 规则：

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-syntax-dynamic-import'],
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                targets: '>1%, not dead, not ie 11'
              }
            ]
          ]
        }
      }
    ]
  },

package.json

{
  "name":"pwa-conf-app",
  "main":"sw.js",
  "scripts":{
  "webpack":"webpack",
  "webpack-dev-server":"webpack-dev-server --history-api-fallback",
  "build":"npm run webpack -- --env.mode production --env.presets 
    serviceworker",
  "dev":"npm run webpack-dev-server -- --env.mode development",
  "dev:sw":"npm run webpack-dev-server -- --env.mode development  -- 
   env.presets serviceworker"
 },
  "keywords":[

 ],
 "devDependencies":{
  "@babel/core":"^7.1.5",
  "@babel/plugin-syntax-dynamic-import":"^7.0.0",
  "@babel/preset-env":"^7.1.5",
  "babel-loader":"^8.0.4",
  "babel-preset-minify":"^0.5.0",
  "clean-webpack-plugin":"^0.1.19",
  "copy-webpack-plugin":"^4.5.2",
  "css-loader":"^1.0.0",
  "html-webpack-plugin":"^3.2.0",
  "mini-css-extract-plugin":"^0.4.1",
  "style-loader":"^0.21.0",
  "webpack":"^4.23.1",
  "webpack-cli":"^3.0.8",
  "webpack-dev-server":"^3.1.4",
  "webpack-merge":"^4.1.3",
  "workbox-webpack-plugin":"^3.3.1"
 },
 "dependencies":{
  "@webcomponents/webcomponentsjs":"^2.1.3",
  "babel-preset-es2015":"^6.24.1",
  "lit-element":"^2.0.0"
 }
}

【问题讨论】：

我检查了错误，它显示了 => 函数。 IE 不支持箭头函数。您说您曾尝试将其编译为 ES5，但看起来它不符合 ES5，因为箭头函数仍然存在，或者您可能错过了一些步骤或文件导致此错误。

标签： polymer internet-explorer-11 web-component lit-element

【解决方案1】：

你需要转译 lit-element 和 lit-html ：

module: {
rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      plugins: ['@babel/plugin-syntax-dynamic-import'],
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',
            targets: '>1%, not dead, not ie 11'
          }
        ]
      ]
    }
  },
  {
    test: /node_modules(?:\/|\\)lit-element|lit-html/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    }
  }
]
},

编辑： 你可能需要包含"webcomponents-bundle.js"

也许@babel/polyfill

【讨论】：