gpt4 book ai didi

webpack - 使用 babel regenerator-runtime 的异步/等待在 ie11 中不起作用

转载 作者:行者123 更新时间:2023-12-04 08:04:28 26 4
gpt4 key购买 nike

我有一个模板应用程序,我想与 ie11 一起使用,为此我使用的是 webpack + babel。
出于某种原因,我忽略了,即使我在配置中将其设置为目标,我的 JS 在 ie11 中也根本无法工作。为了测试它,我在互联网上使用了 ie11,但由于我使用的是 MacOS,因此无法访问堆栈错误。
我在这里缺少什么?
更多信息的源代码:https://github.com/VelynnXV/Front-End-Workflow
网站:https://nifty-noether-cafbd5.netlify.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" }
}
]
]
}
}

包.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"
}
}


最佳答案

webpack 5 您可能需要设置 targetes5使其在 IE11 上工作如下:

// webpack.config.js

module.exports = {
// ...
target: ["web", 'es5'],
}

关于webpack - 使用 babel regenerator-runtime 的异步/等待在 ie11 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66297291/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com