首页 > 解决方案 > 是否有为 IE11 设置 babel/webpack 的简单来源?

问题描述

我正在寻找使用 babel/webpack 将 es6 转换为 es5 的帮助,但我空了。如果已经有答案,请告诉我。

包.json:

"dependencies": {
  "@babel/polyfill": "^7.0.0",
  "browserslist": "^4.4.1",
  ...
"devDependencies": {
  "@babel/preset-env": "^7.3.1",
  "eslint": "^5.1.0",
  ...

webpack.config.js:

const path = require('path');

const CleanPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    entry: {
        App: ['@babel/polyfill', './app.js'],
        Library: ['@babel/polyfill', './codegen/library.js'],
        CalculatorPage: ['@babel/polyfill', './calculator-page.js'],
        CalculatorPageExternal: ['@babel/polyfill', './calculator-page-external.js']
    },
    output: {
        path: path.resolve(__dirname, 'static'),
        filename: 'Calc.[name].[chunkhash].js',
        library: [ 'Calc', '[name]' ]
    }

应用程序.js:

require("@babel/polyfill");
...

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["IE >= 10"]
        }
      }
    ]
  ]
}

到目前为止,这并没有改变 webpack 运行时生成的内容。

我知道以前有人问过这方面的问题 - 但似乎每个答案都针对那个人的用例非常具体,以至于我很难找到一个单一的来源“这就是你如何将 esNext 转换为 es5”与 babel 和 webpack。 "

我缺少什么/需要做什么才能使其真正生成 es5 兼容代码?

标签: javascriptwebpackcross-browserbabeljs

解决方案


rules.loaders是您要搜索的 webpack 密钥。

使用babel-loaderand @babel/preset-env(预设用于填充/转换所有年度 EcmaScript 规范,而不需要对特定规范进行微观管理,例如 ES6),您将能够实现这一点。


推荐阅读