使用 Webpack、Babel 和 React 的 IE11 中的语法错误
Posted
技术标签:
【中文标题】使用 Webpack、Babel 和 React 的 IE11 中的语法错误【英文标题】：Syntax error in IE11 with Webpack, Babel and React 【发布时间】：2017-12-26 00:09:30 【问题描述】：我在 Internet Explorer 11 中的 React + Redux 项目中遇到语法错误，但我不知道是什么原因造成的。
我正在使用 Webpack 和 Babel 来编译它。
我尝试使用 babel-polyfill 和 babel-es6-polyfill，但这没有帮助。
这是我得到的错误：
SCRIPT1002: Syntax error
File: app.js, Line: 70, Column: 1
第 70 行第 1 列是 Webpack 的 eval 开始的位置：
/***/ ),
/* 21 */,
/* 22 */
/***/ (function(module, exports, __webpack_require__)
"use strict";
eval("\n\nObject.define... <- Line 70
^--- Column 1
这是我的webpack.config.js：
'use strict';
// Include modules and plugins
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// App and build directories
const APP_DIR = path.resolve(__dirname, 'src/');
const BUILD_DIR = path.resolve(__dirname, 'public');
// Extract sass from the application, see index.jsx
const extractSass = new ExtractTextPlugin(
filename: 'css/[name].css'
);
// The config file to load
let env = (process.env.NODE_ENV || 'dev').toLowerCase();
let configFile = path.resolve(__dirname, 'config/config.' + env + '.json');
// Default config file if not found
const defaultConfigFile = path.resolve(__dirname, 'config/config.dev.json');
/*
* Config to be injected into the app
* Note that JSON files are parsed upon requiring
*/
let config;
/*
* Get the actual config
*/
try
config = require(configFile);
console.log('Loaded config file ' + configFile);
catch (e)
config = require(defaultConfigFile);
console.log('Fallen back to default config file');
// The actual webpack config
const webpackConfig =
entry:
// The app entry point
app: APP_DIR + '/index.jsx',
// Vendor files will be used for bundling, they will not be compiled into the app itself
vendor: [
'axios',
'prop-types',
'react',
'reactstrap',
'react-chartjs-2',
'react-dom',
'react-redux',
'react-router',
'react-router-dom',
'redux',
'sprintf-js',
]
,
output:
path: BUILD_DIR,
filename: 'js/app.js'
,
module:
/*
* These are loaders for webpack, these will assist with compilation
*/
loaders: [
/*
* Use Babel to compile JS and JSX files
* See .babelrc
*/
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel-loader'
],
rules: [
/*
* Sass/Scss compilation rules
*/
test: /\.scss$/,
use: extractSass.extract(
use: [
loader: 'css-loader'
,
loader: 'sass-loader'
],
fallback: 'style-loader'
)
,
/*
* JS(X) compilation rules
* We need this, otherwise Webpack will crash during compile time
*/
test: /\.jsx?/,
loader: 'babel-loader'
]
,
plugins: [
/*
* The CommonsChunkPlugin is responsible to create bundles out of commonly used modules
* E.g. React, React Dom, etc
*/
new webpack.optimize.CommonsChunkPlugin(
name: 'vendor', // See entry.vendor
filename: 'js/vendor.bundle.js'
),
extractSass
],
externals:
/*
* The config external will be available to the app by using require('config')
*/
'config': JSON.stringify(config)
,
devServer:
contentBase: BUILD_DIR,
compress: true,
port: 7600,
inline: true,
,
;
if (env === 'production')
webpackConfig.devtool = 'hidden-source-map';
else
webpackConfig.devtool = 'eval-source-map';
module.exports = webpackConfig;
还有我的依赖：
"dependencies":
"axios": "^0.16.1",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-polyfill": "6.5.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-1": "^6.24.1",
"chart.js": "^2.6.0",
"cross-env": "^3.2.4",
"css-loader": "^0.27.3",
"enumify": "^1.0.4",
"extract-text-webpack-plugin": "^2.1.0",
"history": "^4.6.3",
"ip": "^1.1.5",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"node-sass": "^4.5.1",
"prop-types": "^15.5.10",
"react": "^15.4.2",
"react-addons-css-transition-group": "^15.5.2",
"react-addons-transition-group": "^15.5.2",
"react-chartjs-2": "^2.1.0",
"react-dom": "^15.4.2",
"react-js-pagination": "^2.1.0",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"reactstrap": "^4.5.0",
"redux": "^3.6.0",
"sass-loader": "^6.0.3",
"sprintf-js": "^1.1.0",
"style-loader": "^0.16.0",
"webpack": "^2.3.2"
,
"devDependencies":
"eslint-plugin-react": "^6.10.3",
"webpack-dev-server": "^2.5.1"
还有我的 .babelrc：
"presets" : [
"es2015",
"react",
"stage-1"
]
编辑 1
按照 BAANNENMANNFRAU 的回答，我添加了 babel-preset-env 并将我的 .babelrc 编辑为如下：
"presets" : [
[ "env",
"targets":
"browsers": [
"last 5 versions",
"ie >= 11"
]
],
"es2015",
"react",
"stage-1"
]
这没有帮助，它仍然导致IE11中的错误。
【问题讨论】：
你运气好吗？我目前正在遇到同样的事情。我通过删除源映射进一步缩小了范围，但 babel-preset-env 似乎并没有包含它应该包含的内容。 在另一个主题***.com/a/50372766/7801987找到解决方案 【参考方案1】：我知道已经过了一年多，但我认为问题出在您的 devtool 配置上：
webpackConfig.devtool = 'eval-source-map';
显然，IE11 不喜欢由 webpack 插入的 eval() 代码。使用webpackConfig.devtool = 'none'（或alternative values之一）应该可以解决它。
【讨论】：
【参考方案2】：使用npm install babel-preset-env --save-dev 安装babel-preset-env 并在您的.babelrc 中使用以下配置：
"presets" : [
["env",
"targets":
"browsers": ["last 2 versions", "ie >= 11"]
],
"react",
]
您还可以从配置中删除以下部分：
loaders: [
/*
* Use Babel to compile JS and JSX files
* See .babelrc
*/
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel-loader'
],
查看文档here
【讨论】：
我尝试了您的解决方案，但没有奏效，结果相同。我不得不排除babelrc: false，因为否则它不会编译。我在帖子中添加了我的.babelrc。不过谢谢你的帖子。
添加你的 babelrc 的东西。这是至关重要的信息。以上是关于使用 Webpack、Babel 和 React 的 IE11 中的语法错误的主要内容，如果未能解决你的问题，请参考以下文章
将 webpack 与 babel 和 babel-preset-react 和 babel-preset-es2015 一起使用
如何使用 React 和 Webpack 设置 Babel 6 阶段 0
为啥 React 需要 Babel 和 Webpack 才能工作？