问题描述
我正在尝试使用Webpack + Babel在IE> = 11中运行ES2015功能的React App。设置是自定义的，使用 inferno-compat 图层，因此此处不使用 create-react-app 。
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-compat layer, so no create-react-app used here.
但是 - 尽管应用了最新的 babel-polyfill 和 babel-preset-env 练习到我的 .babelrc 和webpack配置，尝试时我的bundle.js中仍然出现 SCRIPT1002：语法错误使用IE11访问应用程序。
However - despite applying the latest babel-polyfill and babel-preset-env practices to my .babelrc and webpack config, I still get a SCRIPT1002: Syntax error within my bundle.js when trying to access the app with IE11.
当我按照IEs控制台中的语法错误引用时，这是生成的bundle.js中相互冲突的部分（箭头函数）特别是）：
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):
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"]
}
}
]
]
}
我在 webpack.base.config.js babel-polyfill c>这里：
I include the babel-polyfill within my webpack.base.config.js here:
// ... stuff
entry: {
index: ['babel-polyfill', './index.js'],
},
// ... more stuff
为了让它在IE11中运行而缺少什么想法？
Any ideas what's missing to get it running in IE11?
推荐答案
我发现了这个问题。我正在使用模块 rambdax 作为我的devDependencies之一，其中包含用ES6语法编写的源代码（未转换为ES5） - 更具体地说是箭头函数 => 直接包含在我的bundle.js中。 IE11当然不能执行箭头函数或任何其他ES6语法。
I found the issue. I'm using the module rambdax as 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.
不幸的是，编译时，Babel和Webpack（UglifyJS插件）都不会触及导入的node_modules的源代码。 bundle.js，表示：作为ES6导入的模块源代码将保留在webpack中的ES6 bundle.js 。
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.
请参阅有关此主题的更多信息。
See https://github.com/facebookincubator/create-react-app/issues/1125 for more information on this topic.
我也已在'rambdax'存储库中提出了有关此问题的问题。您可以在那里找到更多相关信息：
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
这篇关于SCRIPT1002：使用React + Babel + Webpack在IE11中出现语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！