我正在IE 11.248.16299.0上测试ReactJs应用程序,当前出现此错误:

包含以下内容的行上的“ SCRIPT1010:期望的标识符”

exports.default = assertString;


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

exports['default'] = assertString;


会很好的。

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

顺便说一句,这些语法问题实际上存在于流行的软件包中,例如“验证器”或传单,我觉得很奇怪,它们甚至不适用于IE11,也无法在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'
            })
        }
    ]
}


}

最佳答案

对于那些以后会偶然发现它的人。

正如@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/

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

09-20 09:19