问题
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?
回答1:
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),
)
})
来源:https://stackoverflow.com/questions/65035451/how-to-create-ie11-bundles-with-webpack-5-and-babel-7