ie11 strict use 报错_reactjs – IE11中的Webpack,Babel和React语法错误

在使用Webpack和Babel的React Redux项目中,作者遇到IE11的Syntax error。尝试引入babel-polyfill和babel-es6-polyfill无效。错误出现在Webpack的eval代码处。配置包括Webpack配置文件、.babelrc以及package.json。尝试更新.babelrc以针对IE11,但问题依然存在。
摘要由CSDN通过智能技术生成

我在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...

^--- 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中的错误.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值