[英]Async / Await using babel regenerator-runtime does not work in ie11
I have a template app that I want to make work with ie11, for that I'm using webpack + babel.我有一个模板应用程序,我想使用 ie11,因为我使用的是 webpack + babel。 For some reason I ignore, my JS does not work at all in ie11 even though I did set it as a target in my config.
由于某种原因我忽略了,我的 JS 在 ie11 中根本不起作用,即使我确实将它设置为我的配置中的目标。 To test it, I use a ie11 on the internet but I don't have access to the stack errors since I'm on MacOS.
为了测试它,我在互联网上使用了 ie11,但由于我在 MacOS 上,我无法访问堆栈错误。
What am I missing here?我在这里想念什么?
Source code for more info: https://github.com/VelynnXV/Front-End-Workflow更多信息的源代码: https://github.com/VelynnXV/Front-End-Workflow
website: https://nifty-noether-cafbd5.netlify.app/网站: https://nifty-noether-cafbd5.netlify.app/
app.js应用程序.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 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
// 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 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"
}
}
Your providing two babel configurations - one embedded in webpack.config.js
and one in babel.config.js
.您提供了两种 babel 配置——一种嵌入在
webpack.config.js
中,另一种嵌入在babel.config.js
中。 Pretty sure the webpack.config.js
config will take precedence and clobber the babel config.很确定
webpack.config.js
配置将优先并破坏 babel 配置。 So just rm the options
param to babel-loader
in your webpack config and stick with babel config file.因此,只需在 webpack 配置中将
options
参数设置为babel-loader
并坚持使用 babel 配置文件。
With the webpack
5 you might have to set the target
for es5
to make it work on IE11 as following:使用
webpack
5 您可能必须为es5
设置target
以使其在 IE11 上工作,如下所示:
// webpack.config.js
module.exports = {
// ...
target: ["web", 'es5'],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.