如何使用 Webpack 5 和 Babel 7 创建 IE11 包 [英] How to create IE11 Bundles with Webpack 5 and Babel 7
本文介绍了如何使用 Webpack 5 和 Babel 7 创建 IE11 包的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我们如何将现代 JavaScript 编译成可与 Internet Explorer 11 (ie11) 一起使用的向后兼容的 JavaScript 包?具体来说,我们如何使用最新版本的 Webpack 5 和 Babel 7 来做到这一点?
How can we compile modern JavaScript into backwards-compatible JavaScript bundles that can be used with Internet Explorer 11 (ie11)? Specifically, how can we do this with the latest versions of Webpack 5 and Babel 7?
推荐答案
这是我能创建的最少配置,其中包含一个测试文件,用于在 IE 11 中进行测试.在 GitHub 上下载.
Here's the most minimal configuration I could create, with a test file that's included to test with IE 11. Download on GitHub.
package.json
{
"browserslist": [
"ie 11"
],
"scripts": {
"dev": "webpack -w",
"build": "webpack"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/preset-env": "^7.12.7",
"babel-loader": "^8.2.2",
"core-js": "^3.8.0",
"webpack": "^5.8.0",
"webpack-cli": "^4.2.0"
}
}
webpack.config.js
module.exports = {
entry: './index.js',
module: {
rules: [{
test: /.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3
}]
]
}
}
}]
}
}
Greeting.js
export default '2020 has been one hell of a year!'
index.js
/*
* Test that uses modern JavaScript and will be compiled to work in IE 11
*/
import greeting from './Greeting'
window.addEventListener('load', async () => {
const o = {
greeting: await Promise.resolve(greeting)
}
console.log(
o,
Object.entries(o),
Object.keys(o),
Object.values(o),
)
})
这篇关于如何使用 Webpack 5 和 Babel 7 创建 IE11 包的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文