IE11 中的点符号属性访问器

Posted 2023-03-24

技术标签:

【中文标题】IE11 中的点符号属性访问器【英文标题】：Dot notation property accessor in IE11 【发布时间】：2018-03-02 14:34:20 【问题描述】：

我正在 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'
            )
        
    ]

【问题讨论】：

IE11 绝对“理解”. 运算符。该行的问题是“默认”属性名称：这是一个保留字，IE 不喜欢这样使用它。 【参考方案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/

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

【讨论】：