如何使用Webpack5和Babel7创建IE11Bundle
我们如何将现代 JavaScript 编译成可与 Internet Explorer 11 (ie11) 一起使用的向后兼容的 JavaScript 包?具体来说,我们如何使用最新版本的 Webpack 5 和 Babel 7 做到这一点?
回答
这是我可以创建的最小配置,其中包含一个测试文件以使用 IE 11 进行测试。在 GitHub 上下载。
包.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
}]
]
}
}
}]
}
}
问候.js
export default '2020 has been one hell of a year!'
索引.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),
)
})