我正在IE 11.248.16299.0上测试ReactJs应用程序,当前出现此错误:
包含以下内容的行上的“ SCRIPT1010:期望的标识符”
exports.default = assertString;
现在,我知道此错误意味着IE无法理解点符号,如果我将这一行重写为:
exports['default'] = assertString;
会很好的。
使用适当的解决方案,可以通过为打包我的应用的Webpack提供正确的预设或插件来解决此问题。
但是我尝试了
es2015
,stage-0
,babel-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/
这将转换保留的对象属性名称