![](/img/trans.png)
[英]Babel and Webpack are throwing "Can't resolve 'regenerator-runtime/runtime'"
[英]Async / Await using babel regenerator-runtime does not work in ie11
我有一個模板應用程序,我想使用 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" }
}
]
]
}
}
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 您可能必須為es5
設置target
以使其在 IE11 上工作,如下所示:
// webpack.config.js
module.exports = {
// ...
target: ["web", 'es5'],
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.