时间戳

首页 > 解决方案 > SCRIPT1006：预期的 '() React 应用程序与 webpack 和 Babel

reactjs - SCRIPT1006：预期的 '() React 应用程序与 webpack 和 Babel

问题描述

我正在使用 babel 和 webpack 设置一个 React 应用程序。该应用程序在 chrome 和除 internet exlorer11 之外的其他浏览器上运行良好。

这是我的package.json

    {
  "name": "xai",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack",
    "start": "webpack serve"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not ie < 11",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/node": "^7.14.2",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "image-webpack-loader": "^7.0.1",
    "path": "^0.12.7",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.1",
    "copy-to-clipboard": "^3.3.1",
    "fast-text-encoding": "^1.0.3",
    "firebase": "^8.6.3",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack": "0.0.5-beta.2",
    "gh-pages": "^3.2.0",
    "history": "^5.0.0",
    "hookrouter": "^1.2.5",
    "lodash": "^4.17.21",
    "markdown-loader": "^6.0.0",
    "max-validator": "^1.2.1",
    "node-sass": "^6.0.0",
    "raw-loader": "^4.0.2",
    "react": "^17.0.2",
    "react-animations": "^1.0.0",
    "react-app-polyfill": "^2.0.0",
    "react-beforeunload": "^2.5.1",
    "react-beforeunload-component": "^1.2.3",
    "react-dom": "^17.0.2",
    "react-likert-scale": "^4.1.1",
    "react-radio-buttons": "^1.2.2",
    "react-router-dom": "^5.2.0",
    "react-toastify": "^7.0.4",
    "react-tooltip": "^4.2.21",
    "reactstrap": "^8.9.0",
    "sass-loader": "^11.1.1",
    "url-loader": "^4.1.1",
    "uuid": "^8.3.2"
  }
}

和webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
  mode: process.env.NODE_ENV || "development",
  resolve: {
    modules: [path.resolve(__dirname, "src/"), "node_modules"],
    extensions: ["*", ".js", ".jsx", ".json"],
    symlinks: false,
    cacheWithContext: false,
  },
  devServer: { contentBase: path.join(__dirname, "src") },
  module: {
    rules: [
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff",
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: "file-loader",
      },
      { test: /\.md$/, use: "raw-loader" },

      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
    }),
  ],
};

我将此配置用于.babelrc

{
  "presets": ["@babel/preset-env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

问题是我曾经加载过应用程序（使用 CRA 时路由中断）。现在我只得到一个带有 SCRIPT1006 的空白页：Expected '('。我想知道你是否可以有一个解决方法来解决这个错误

标签： reactjswebpackbabeljsinternet-explorer-11

解决方案

您可以尝试删除browserslist并使用target: ['web', 'es5']以支持 IE 11。它会将您的代码转换为适用于 IE 11 的 ES5。有关更多信息，您可以参考此答案和此文档。

我按照此博客中的步骤使用 Webpack 和 Babel 设置 React 应用程序，然后像下面这样添加webpack.config.jstarget: ['web', 'es5'] ，它在IE 11 中运行良好。您也可以尝试：

module.exports = {
  // ...
  target: ['web', 'es5'],
};

推荐阅读