javascript SCRIPT1002：使用 React + Babel + Webpack 的 IE11 中的语法错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47672324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SCRIPT1002: Syntax error in IE11 with React + Babel + Webpack
提问by VoodooDS
I'm trying to get my React App with ES2015 functionalities running in IE >= 11 using Webpack + Babel. The setup is custom, using the inferno-compatlayer, so no create-react-appused here.
我正在尝试使用 Webpack + Babel 在 IE >= 11 中运行具有 ES2015 功能的 React 应用程序。设置是自定义的，使用inferno-compat层，所以create-react-app这里没有使用。
However - despite applying the latest babel-polyfilland babel-preset-envpractices to my .babelrcand webpack config, I still get a SCRIPT1002: Syntax errorwithin my bundle.js when trying to access the app with IE11.
但是 - 尽管对我的和 webpack 配置应用了最新babel-polyfill和babel-preset-env实践，当我尝试使用 IE11 访问应用程序时.babelrc，我的bundle.js 中仍然出现SCRIPT1002: Syntax 错误。
When I follow the syntax error reference in IEs console, this is the part within the generated bundle.js that's conflicting (the arrow-function in particular):
当我遵循 IE 控制台中的语法错误参考时，这是生成的 bundle.js 中冲突的部分（特别是箭头函数）：
function add(x, y) {
if (y === undefined) {
return yHolder => add(x, yHolder);
}
return x + y;
}
These are the relevant dependencies within my package.json:
这些是 my 中的相关依赖项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",
}
This is my .babelrc:
这是我的.babelrc：
{
"presets":
[
"react",
"flow",
"es2015",
[
"env", {
"modules": "commonjs",
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}
]
]
}
I include the babel-polyfillwithin my webpack.base.config.jshere:
我包括babel-polyfill在我的webpack.base.config.js这里：
// ... stuff
entry: {
index: ['babel-polyfill', './index.js'],
},
// ... more stuff
Any ideas what's missing to get it running in IE11?
有什么想法让它在 IE11 中运行吗？
回答by VoodooDS
I found the issue. I'm using the module rambdaxas one of my devDependencies, which contains source code written in ES6 syntax (not transpiled to ES5) - more specifically arrow-functions =>that are directly included within my bundle.js. IE11 of course can't execute arrow-functions or any other ES6 syntax.
我发现了这个问题。我将该模块rambdax用作我的 devDependencies 之一，其中包含以 ES6 语法编写的源代码（未转换为 ES5）——更具体地说=>，是直接包含在我的 bundle.js 中的箭头函数。IE11 当然不能执行箭头函数或任何其他 ES6 语法。
Unfortunately neither Babel nor Webpack (UglifyJS Plugin) will touch the source of imported node_modules when compiling the bundle.js, which means: Module source code that gets imported as ES6 will remain ES6 in your webpack bundle.js.
不幸的是，Babel 和 Webpack（UglifyJS 插件）在编译 bundle.js 时都不会触及导入的 node_modules 的源代码，这意味着：作为 ES6 导入的模块源代码将在您的 webpack 中保留 ES6 bundle.js。
See https://github.com/facebookincubator/create-react-app/issues/1125for more information on this topic.
有关此主题的更多信息，请参阅https://github.com/facebookincubator/create-react-app/issues/1125。
I also already filed an issue regarding this problem within the ′rambdax′ repository. You can find out more about it there: https://github.com/selfrefactor/rambdax/issues/4
我也已经在 'rambdax' 存储库中提交了一个关于这个问题的问题。你可以在那里找到更多关于它的信息：https: //github.com/selfrefactor/rambdax/issues/4
回答by Yanuxx
Not sure if it is still an issue.
不确定它是否仍然是一个问题。
With Webpack 4 I have done that
使用 Webpack 4 我做到了
{
test: /\.js$/,
include: [
// absolute path to module
]
}
Included modules go through Babel hook.
包含的模块通过 Babel hook。
回答by user4447655
I had the same issue as VoodooDS mentioned here: https://stackoverflow.com/a/47695625/4447655
我遇到了与此处提到的 VoodooDS 相同的问题：https://stackoverflow.com/a/47695625/4447655
The IE was complaining about a fat arrow function => in a third-party library socket.io-client(the library said something about ModuleConcatenation bailout: Module is not an ECMAScript modulein its source), and I knew that I updated this library to a newest version (2.3.0). Downgrading this package to a version previously used (2.0.3) solved an issue for me.
IE 抱怨第三方库中的胖箭头函数 => socket.io-client（该库ModuleConcatenation bailout: Module is not an ECMAScript module在其源代码中说了一些事情），我知道我将这个库更新到了最新版本 (2.3.0)。将此包降级到以前使用的版本 (2.0.3) 为我解决了一个问题。
I use Babel 7.7.4 + React + Webpack 4, babel-loader, polyfill etc, so it wasn't a problem with my webpack configuration and transpiling ES6 to ECMAScript.
我使用 Babel 7.7.4 + React + Webpack 4、babel-loader、polyfill 等，所以我的 webpack 配置和将 ES6 转换为 ECMAScript 没有问题。
