javascript - 如何使用 Babel 为 Internet Explorer 11 构建 React 应用程序？

Question

// webpack.config.js

const webpack = require('webpack');
const precss = require('precss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PROD = process.env.NODE_ENV === 'production';

const jsPresets = [
  ['env', {
    targets: PROD ? {
      'browsers' : [
      'last 4 versions',
      'safari >= 7',
      'Explorer 11',
      ]
    } : {
      chrome: 1,
    },
  }],
  'es2015',
  'stage-1',
];

const baseConfig = {
  entry: [
    'babel-polyfill',
    'antd/dist/antd.css',
    './node_modules/m-react-splitters/lib/splitters.css',
    './node_modules/cli-truncate/index.js',
    'react-s-alert/dist/s-alert-default.css',
    'react-s-alert/dist/s-alert-css-effects/flip.css',
    'react-s-alert/dist/s-alert-css-effects/bouncyflip.css',
    'react-quill/dist/quill.snow.css',
  ],
  output: {
    path: './wp-content/plugins/clausehound/js',
    filename: 'clausehound.js',
  },
  module: {
    loaders: [{
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style', 'css?-url!postcss'),
    }, {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      include: /cli-truncate\/index.js/,
      loader: 'babel-loader',
      query: {
        presets: jsPresets,
        plugins: [
          ['import', { libraryName: 'antd' }],
          ['transform-es2015-arrow-functions'],
        ],
      },
    }, {
      test: /\.jsx/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: jsPresets.concat(['react']),
      },
    }],
    rules: [
      { test: /[\/]jquery\.js$/, use: 'expose-loader?$!expose?jQuery' }
    ],
  },

  postcss: () => [precss],

  plugins: [
    new ExtractTextPlugin('../css/clausehound.css', { allChunks: true }),
    new webpack.OldWatchingPlugin(),
  ],
};

// Modify config if production build or not
if (PROD) {
  module.exports = Object.assign({}, baseConfig, {
    plugins: baseConfig.plugins.concat([
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
      new webpack.DefinePlugin({
        process: {
          env: {
            NODE_ENV: JSON.stringify('production'),
          },
        },
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      [
      'transform-es2015-arrow-functions',
      'transform-class-properties',
      'syntax-class-properties',
      ],
    ]),
  });
} else {
  module.exports = baseConfig;
}

IE11 破坏了箭头函数语法。大多数(如果不是全部)节点模块都具有箭头函数，我不想将其全部包含在捆绑的 js 文件中。我运行了 babel-loader，只是为了测试，我包含了来自“cli-truncate”的文件，该文件向 baseConfig 的 entry 属性抛出语法错误，但是应用程序仍然会在该包的 index.js 中的 () => 处抛出错误。

代码从 cli-truncate 失败的确切行是这样的: module.exports = (输入、列、选项) => {..}

我不认为这是这个包特有的，但我猜我需要以某种方式修改 webpack 配置，我不确定。有什么想法如何解决这个问题吗？

错误:

文件:

Answer 1

为了确保 Babel 支持 IE11，您还需要将其添加到当前的 env 目标列表中。例如:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "Chrome >= 59",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11",
          "last 4 Edge versions"
        ]
      },
      "useBuiltIns": true
    }],
    "react",
    "stage-1"
  ],
  "ignore": [
    "node_modules"
  ],
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-class-properties",
    "syntax-class-properties"
  ]
}

另请参阅:Babel Env documentation