我已经使用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"
}
}
您需要转换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"