IE11 中的点符号属性访问器

Question

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

"SCRIPT1010: Expected identifier" 在线包含：

exports.default = assertString;

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

exports['default'] = assertString;

它会很好用。

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

顺便说一句，这些语法问题实际上存在于流行的软件包中，例如 'validator' 或传单，我觉得它们在 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/

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

IE11 中的点符号属性访问器

Dot notation property accessor in IE11

javascript

transpiler

reactjs

webpack

babeljs

IE11 中的点符号 属性 访问器

Dot notation property accessor in IE11

javascript

transpiler

reactjs

webpack

babeljs

IE11 中的点符号属性访问器