用于 Internet Explorer 9 的 React、Webpack 和 Babel答案

【问题标题】：React, Webpack and Babel for Internet Explorer 9用于 Internet Explorer 9 的 React、Webpack 和 Babel
【发布时间】：2016-01-07 08:51:33
【问题描述】：

尝试为 React 支持 IE 9。升级为使用 babel 6.3.26 和 babel-preset-es2015 和 babel-preset-react 用于 Webpack。但是，在 IE 9 中加载文件时，会出现语法错误。

webpack.config.js

/* eslint-env node */
var path = require('path');
var packageJson = require('./package.json');
var _ = require('lodash');
var webpack = require('webpack');

var context = process.env.NODE_ENV || 'development';

var configFunctions = {
    development: getDevConfig,
    production: getProdConfig,
    test: getTestConfig
};

var config = configFunctions[context]();

console.log('Building version %s in %s mode', packageJson.version, context);

module.exports = config;

function getLoaders() {
    if (context.indexOf('test') === -1) {
        return [
            {
                test: /\.js?$/,
                exclude: /(test|node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    } else {
        return [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    }
}

function getBaseConfig() {
    return {
        context: __dirname + "/src",
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'bundle.js',
            publicPath: '/static/'
        },
        stats: {
            colors: true,
            reasons: true
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        module: {
            loaders: _.union(
                getLoaders(),
                [
                    {
                        test: /\.scss$/,
                        loader: 'style!css!sass'
                    },
                    {
                        test: /\.eot$|\.svg$|\.woff$|\.ttf$/,
                        loader: 'url-loader?limit=30000&name=fonts/[name]-[hash:6].[ext]'
                    },
                    {
                        test: /\.(png|.jpe?g|gif)$/,
                        loader: 'url-loader?limit=5000&name=img/[name]-[hash:6].[ext]'
                    },
                    {
                        test: /\.mp4$/,
                        loader: 'url-loader?limit=5000&name=videos/[name]-[hash:6].[ext]'
                    }
                ]
            )
        }
    };

}

function getDevConfig() {
    return _.merge({}, getBaseConfig(), {
        devtool: 'cheap-module-eval-source-map',
        entry: [
            'babel-polyfill',
            'webpack-hot-middleware/client',
            './App'
        ],
        plugins: [
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin()
        ],
        eslint: {
            emitError: false,
            failOnError: false,
            failOnWarning: false,
            quiet: true
        }
    });
}

function getProdConfig() {
    return _.merge({}, getBaseConfig(), {
        devtool: 'source-map',
        entry: [
            'babel-polyfill',
            './App'
        ],
        plugins: [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                compress: {
                    warnings: false
                }
            })
        ],
        eslint: {
            emitError: true,
            failOnError: true
        }
    })
}

function getTestConfig() {
    return _.merge({}, getBaseConfig(), {})
}

检查bundle.js 的违规行会发现const 的用法不是ES5。我在这里错过了什么吗？我需要将 ES6 代码转译成 ES5 以供生产使用吗？

【问题讨论】：

标签： reactjs internet-explorer-9 webpack babeljs

【解决方案1】：

IE9 与 ES6 不兼容，因此，是的，您必须将 ES6 代码转换为 ES5。我相信问题是你没有告诉 babel 使用 react 和 es2015 预设。我确定你已经在你的机器上安装了它们，但是 babel loader 只做你告诉它的事情。

在您的 getLoaders() 函数中，将预设添加到您的 babel 加载器配置查询中：

query: {
  plugins: ['transform-runtime'],
  presets: ['react', 'es2015']
}

希望这对你有用。

babel/babel-loader reference

【讨论】：

抱歉，.babelrc 中的预设省略了，已编辑我的问题。
@mrkre 哦，好吧。但是，在您的编辑中，预设仍然在错误的位置。它们应该与您的plugins 一起在query 定义中。我不确定还有什么可能导致您遇到问题。对不起。
你是对的，虽然可能不是问题的原因。感谢您的帮助。
从 Babel v6 开始，所有年度预设都已弃用。我们建议改用 @babel/preset-env。 babeljs.io/docs/en/babel-preset-es2015

【解决方案2】：

我正在使用 create-react-app (v16.4.2)。我尝试使用以下方法让默认的 hello world 在 IE9 中工作：

1：

import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

2：

import "babel-polyfill";

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

但它们都不适合我。我最终将以下行添加到公用文件夹中的 index.html 文件中，它解决了我的问题：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

更多信息请访问：https://polyfill.io/v2/docs/

【讨论】：