关于reactjs:使用Webpack,Babel和React的IE11中的语法错误

Syntax error in IE11 with Webpack, Babel and React

我在Internet Explorer 11的React Redux项目中遇到语法错误,但我不知道为什么引起此错误。

我正在使用Webpack和Babel对其进行编译。

我尝试使用babel-polyfill和babel-es6-polyfill,但这没有帮助。

这是我得到的错误:

1
2
SCRIPT1002: Syntax error
File: app.js, Line: 70, Column: 1

第70行的第1列是eval Webpack的开始位置:

1
2
3
4
5
6
7
8
9
10
/***/ }),
/* 21 */,
/* 22 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\
\
Object.define... <- Line 70
^--- Column 1

这是我的webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
'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;

我的依赖项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
"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:

1
2
3
4
5
6
7
{
  "presets" : [
     "es2015",
     "react",
     "stage-1"
   ]
}

编辑1

按照BANANENMANNFRAU的回答,我添加了babel-preset-env并编辑了.babelrc,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "presets" : [
      ["env", {
        "targets": {
           "browsers": [
              "last 5 versions",
              "ie >= 11"
            ]
         }
      }],
     "es2015",
     "react",
     "stage-1"
   ]
}

这没有帮助,它仍然导致IE11中的错误。


我知道已经过了一年,但是我相信问题是您的devtool配置:

1
webpackConfig.devtool = 'eval-source-map';

IE11显然不是webpack为这些对象插入的eval()代码的粉丝。使用webpackConfig.devtool = 'none'(或替代值之一)应对其进行修复。


使用npm install babel-preset-env --save-dev安装babel-preset-env并在.babelrc中使用以下配置:

1
2
3
4
5
6
7
8
9
10
{
 "presets" : [
    ["env", {
     "targets": {
       "browsers": ["last 2 versions","ie >= 11"]
      }
    }],
   "react",
  ]
}

您还可以从配置中删除以下部分:

1
2
3
4
5
6
7
8
9
10
11
        loaders: [
            {
                /*
                 * Use Babel to compile JS and JSX files
                 * See .babelrc
                 */
                test: /\\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader'
            }
        ],

在此处检查文档