用于 Internet Explorer 9 的 React、Webpack 和 Babel

Question

尝试为 React 支持 IE 9。升级为 Webpack使用babel 6.3.26和babel-preset-es2015和babel-preset-react。但是，在 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 以供生产使用？

Answer 1

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

在函数内部getLoaders()，将预设添加到 babel loader 配置查询中：

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

希望这对你有用。

babel/babel-loader 参考