SCRIPT1002: React + Babel + Webpack的IE11语法错误
我试着使用Webpack + Babel在IE >= 11中运行>=功能来获得我的React。设置是自定义的，使用inferno-compat层，所以这里不使用create-react-app。
然而--尽管将最新的babel-polyfill和babel-preset-env实践应用于我的.babelrc和webpack配置，但在尝试用IE11访问应用程序时，我仍然在bundle.js中得到了一个SCRIPT1002:语法错误。
当我遵循IEs控制台中的语法错误引用时，这是生成的bundle.js中冲突的部分(特别是箭头函数)：
function add(x, y) {
if (y === undefined) {
return yHolder => add(x, yHolder);
}
return x + y;
}这些是我的package.json中的相关依赖项
"dependencies": {
"inferno-redux": "^3.10.1",
"react": "^15.6.0",
"react-dom": "^15.6.0",
"react-ga": "^2.2.0",
"react-swipeable": "^4.1.0",
"redux": "^3.7.2",
"redux-saga": "^0.16.0",
"regenerator-runtime": "^0.11.0"
},
"devDependencies": {
//... stuff
"babel-cli": "^6.26.0",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-inferno": "^3.2.0",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
//... some more stuff
"webpack": "^3.8.1",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-dev-middleware": "^1.12.2",
"webpack-dev-server": "^2.9.5",
"webpack-manifest-plugin": "^1.3.2",
"webpack-merge": "^4.1.1",
}这是我的.babelrc
{
"presets":
[
"react",
"flow",
"es2015",
[
"env", {
"modules": "commonjs",
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}
]
]
}我将babel-polyfill包含在我的webpack.base.config.js中：
// ... stuff
entry: {
index: ['babel-polyfill', './index.js'],
},
// ... more stuff有什么想法可以让它在IE11中运行吗？
回答 3
Stack Overflow用户
发布于 2017-12-07 12:55:12
我发现了问题。我使用模块rambdax作为我的devDependencies之一，它包含用ES6语法编写的源代码(不是转换到ES5) --更具体地说，是箭头--直接包含在bundle.js中的函数=>。当然，IE11不能执行箭头函数或任何其他ES6语法。
不幸的是，无论是Babel还是Webpack (UglifyJS插件)在编译bundle.js时都不会接触到导入的node_modules的源代码，这意味着:以ES6的形式导入的模块源代码将保留在webpack bundle.js中的ES6。
有关此主题的更多信息，请参见https://github.com/facebookincubator/create-react-app/issues/1125。
我还在“rambdax”存储库中提交了一个关于这个问题的问题。您可以在那里找到更多关于它的信息：https://github.com/selfrefactor/rambdax/issues/4
Stack Overflow用户
发布于 2019-12-17 07:30:48
与VoodooDS在这里提到的问题相同：https://stackoverflow.com/a/47695625/4447655
IE抱怨第三方库socket.io-client中的胖箭头函数socket.io-client(库在其源代码中提到了ModuleConcatenation bailout: Module is not an ECMAScript module )，我知道我将这个库更新为最新版本(2.3.0)。将此包降级为以前使用的版本(2.0.3)为我解决了一个问题。
我使用Babel 7.7.4 + React + Webpack 4，babel装载机，填充等，所以我的webpack配置和把ES6转到ECMAScript没有问题。
Stack Overflow用户
发布于 2020-12-17 15:50:53
在webpack的例子中，5：
如果有必要，在运行时代码中关闭ES2015语法 默认情况下，webpack的运行时代码使用ES2015语法构建更小的包。如果您的构建目标环境不支持此语法(如IE11)，则需要设置目标：“web”，“ES5”以恢复为ES5语法(如果目标环境是浏览器)。
来源。
https://stackoverflow.com/questions/47672324
复制相似问题
腾讯云开发者
