IE11 中的点符号属性访问器

Question

我正在 IE 11.248.16299.0 上测试 ReactJs 应用程序，目前收到此错误：

“SCRIPT1010：预期标识符”包含：

exports.default = assertString;

现在我知道这个错误意味着 IE 无法理解点符号，如果我将这一行重写为：

exports['default'] = assertString;

它会工作得很好。

使用适当的解决方案，可以通过向打包我的应用程序的 Webpack 提供正确的预设或插件来解决此问题。 但是我尝试了es2015、stage-0、babel-preset-env，但找不到任何解决方案或正确的配置组合。

顺便说一句，这些语法问题实际上存在于流行的包中，例如“验证器”或传单，我觉得奇怪的是它们在 IE11 上不起作用，即使这样宣传也是如此。因此，我想，也许我与包或 npm 有什么特别的关系？

无论如何，主要问题是 在这种情况下我应该如何配置我的 webpack 以正确转译？

当前配置：

const webpackConfig = {
devtool: 'source-map',
entry: ['babel-polyfill', './src/index.js'],
output: {
    filename: 'webapp-XXXXXXXXX-[git-revision-version].js',
    publicPath: '/',
    path: path.resolve(__dirname, outputDir.development)
},
stats: {
    // quiet: true
},
devServer: {
    // quiet: true,
    port: PORT_NUMBER
},
plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV) || '"development"',
            CLIENT_VERSION: JSON.stringify(pkg.version) || '""'
        }
    }),
    new GitRevisionPlugin(),
    new HtmlWebpackPlugin({
        template: 'index.ejs'
    }),
    extractSass
],
module: {
    rules: [
        {
            test: /\.js$/,
            include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
            exclude: [
                /(bower_components)/,
                path.resolve(__dirname, 'node_modules/react-leaflet'),
                path.resolve(__dirname, 'node_modules/react-dom'),
                path.resolve(__dirname, 'node_modules/lodash')
            ],
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        'react',
                        [
                            'env',
                            {
                                targets: {
                                    browsers: ['last 2 versions']
                                }
                            }
                        ],
                        [
                            "es2015", {
                                "loose": false,
                                "modules": false
                            }
                        ],
                        'stage-0',
                    ],
                    plugins: [
                        'transform-class-properties',
                        'syntax-trailing-function-commas'
                    ]
                }
            }
        },
        {
            // images
            test: /\.(ico|jpe?g|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '../img/[name].[ext]'
                    // name: '[name].[ext]'
                }
            }
        },
        {
            test: /\.scss$/,
            use: extractSass.extract({
                use: [
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ],
                // use style-loader in development
                fallback: 'style-loader'
            })
        }
    ]
}

}

Answer 1

对于那些以后会偶然发现这一点的人。

正如@Pointy 正确指出的那样，由于使用了保留字，会发生此错误。 要解决这个问题，您必须在 babelrc 或 webpack 配置中添加以下插件：

https://babeljs.io/docs/plugins/transform-es3-member-expression-literals/

和

https://www.npmjs.com/package/babel-preset-es2015

坦率地说，这个问题的名称是“es3-member-expression-literals”，这让我作为业余 Web 开发人员感到困惑。

你也很可能需要这个：

https://babeljs.io/docs/plugins/transform-es3-property-literals/

这会转换保留对象的属性名称