javascript - How to create IE11 Bundles with Webpack 5 and Babel 7 - Stack Overflow

admin管理员组

文章数量:1287665

How can we pile modern JavaScript into backwards-patible 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?

How can we pile modern JavaScript into backwards-patible 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?

• javascript
• webpack
• babeljs
• internet-explorer-11
• babel-loader

Share Improve this question Follow asked Nov 27, 2020 at 10:08 anthumchrisanthumchris 9,09022 gold badges3434 silver badges5757 bronze badges 1

• I created this self-answered question after spending days trying to get this working. Hope it helps others avoid the pain too. – anthumchris Commented Nov 27, 2020 at 10:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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 piled 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),
  )
})

本文标签： javascriptHow to create IE11 Bundles with Webpack 5 and Babel 7Stack Overflow