我在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
按照BANANENMANNFRAU的回答,我添加了babel-preset-env并编辑了我的.babelrc如下:
{ "presets" : [ [ "env",{ "targets": { "browsers": [ "last 5 versions","ie >= 11" ] } }],"es2015","stage-1" ] }
这没有帮助,它仍然导致IE11中的错误.
使用npm install babel-preset-env –save-dev安装
babel-preset-env并在.babelrc中使用以下配置:
原文链接:https://www.f2er.com/react/300847.html{ "presets" : [ ["env",{ "targets": { "browsers": ["last 2 versions","ie >= 11"] } }],] }
您还可以从配置中删除以下部分:
loaders: [ { /* * Use Babel to compile JS and JSX files * See .babelrc */ test: /\.jsx?/,
检查文档here