加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – IE11中的Webpack,Babel和React语法错误

发布时间:2020-12-15 20:44:46 所属栏目:百科 来源:网络整理
导读:我在Internet Explorer 11中的React Redux项目中遇到语法错误,但我不知道为什么会导致它. 我正在使用Webpack和Babel来编译它. 我尝试使用babel-polyfill和babel-es6-polyfill,但这没有帮助. 这是我得到的错误: SCRIPT1002: Syntax errorFile: app.js,Line:
我在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("nnObject.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中使用以下配置:
{
  "presets" : [
    ["env",{
      "targets": {
        "browsers": ["last 2 versions","ie >= 11"]
      }
    }],]
}

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

loaders: [
            {
                /*
                 * Use Babel to compile JS and JSX files
                 * See .babelrc
                 */
                test: /.jsx?/,

检查文档here

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读