问题描述
我有一个模板应用程序,我想与 ie11 一起使用,为此我使用的是 webpack + babel。 出于某种原因,我忽略了,即使我在配置中将其设置为目标,我的 JS 在 ie11 中也根本无法工作。为了测试它,我在互联网上使用了 ie11,但由于我使用的是 MacOS,因此无法访问堆栈错误。
我在这里遗漏了什么?
更多信息的源代码:https://github.com/VelynnXV/Front-End-Workflow
网站:https://nifty-noether-cafbd5.netlify.app/
app.js
import regeneratorRuntime from "regenerator-runtime";
async function app() {
console.log('App entry point')
const template = document.getElementById('app')
await new Promise(r => setTimeout(() => r(),2500))
template.innerHTML = `
<div class="web-container">
<div id="">
Async / awat test
</div>
</div>
`
console.log('App finished')
};
app();
webpack.config.json
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',entry: ['core-js/stable','./src/app.js'],output: {
path: path.resolve(__dirname,'./dist'),filename: 'app.js',},devServer: {
publicPath: "./src/",contentBase: path.join(__dirname,'dist'),compress: true,port: 9000,plugins: [
new HtmlWebpackPlugin({ // will generate the html file WITH app.js
// see plugin here : https://webpack.js.org/plugins/html-webpack-plugin/
template: './src/index.html',filename: './index.html'
})
],module: {
rules: [ // set of rules letting webpack kNow how to handle .xyz files
{
test: /\.m?js$/,// source: https://webpack.js.org/loaders/babel-loader/
exclude: /(node_modules|bower_components)/,use: {
loader: 'babel-loader',}
}
],};
babel.config.js
// babel.config.js
module.exports = api => {
return {
plugins: [
"@babel/plugin-transform-runtime",],presets: [
[
"@babel/preset-env",{
useBuiltIns: "entry",corejs:3,// caller.target will be the same as the target option from webpack
targets: api.caller(caller => caller && caller.target === "node")
? { node: "current" }
: { chrome: "58",ie: "11" }
}
]
]
}
}
package.json
{
"name": "front-end-workflow","version": "1.0.0","description": "","main": "src/app.js","scripts": {
"dev": "npm run clean && npm run build && webpack serve","build": "webpack","clean": "rimraf ./dist"
},"author": "","license": "ISC","devDependencies": {
"@babel/core": "^7.12.17","@babel/plugin-transform-runtime": "^7.12.17","@babel/preset-env": "^7.12.17","babel-loader": "^8.2.2","css-loader": "^5.0.2","html-loader": "^2.1.0","html-webpack-plugin": "^5.2.0","sass": "^1.32.8","sass-loader": "^11.0.1","style-loader": "^2.0.0","webpack": "^5.23.0","webpack-cli": "^4.5.0","webpack-dev-server": "^3.11.2"
},"dependencies": {
"@babel/runtime": "^7.6.3","core-js": "^3.3.2"
}
}
解决方法
您提供了两种 babel 配置 - 一种嵌入在 webpack.config.js
中,一种嵌入在 babel.config.js
中。非常确定 webpack.config.js
配置将优先并破坏 babel 配置。因此,只需在您的 webpack 配置中将 options
参数改为 babel-loader
并坚持使用 babel 配置文件。
使用 webpack
5,您可能需要为 target
设置 es5
才能使其在 IE11 上运行,如下所示:
// webpack.config.js
module.exports = {
// ...
target: ["web",'es5'],}