javascript - 尝试在产品中构建 ReactJS 应用程序 - 模块构建失败 : SyntaxError: Unexpected token

Question

经过一系列更改(愚蠢的，我知道)之后，我将 React 应用程序推送到产品环境已经有一段时间了，现在当我尝试为产品构建它时，构建失败了，我得到了以下错误:

ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (9:16)

   7 | 
   8 | 
>  9 | ReactDOM.render(<AppRouter />, document.getElementById('app'));
     |                 ^
  10 | 
  11 | 

 @ multi @babel/polyfill ./src/app.js
error Command failed with exit code 2.

这是我的 webpack.config.js 文件:

const path = require('path');

module.exports = (env) => {

    const isProduction = env === 'production';

    console.log(env);
    return {
        entry: ["@babel/polyfill", "./src/app.js"],
        output: {
            path: path.join(__dirname, 'public'),
            filename: 'bundle.js'
        },
        module: {
            rules: [{
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }]
        },
        devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
        devServer: {
            contentBase: path.join(__dirname, 'public'),
            historyApiFallback: true
        }
    };
};

这是我的 package.json 文件:

{
  "name": "SheSaysGo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server",
    "start": "node server/server.js"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "chaituvr-react-graphjs-test": "^0.0.3",
    "cosmicjs": "^3.2.17",
    "express": "4.15.4",
    "google-maps-react": "^2.0.2",
    "live-server": "^1.2.1",
    "lodash": "^4.17.11",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-leaf-carousel": "^1.2.2",
    "react-router-dom": "4.2.2",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  }
}

当我使用“yarn run dev-server”在本地作为开发构建运行它时，它会构建，但当我运行“yarn run build:prod”时，它不会构建。

Answer 1

编辑:抱歉我写了 .babel.rc，它是 .babelrc

<小时/>

让 babel-loader 使用预设 react

看起来 Babel 正在将您的文件解释为常规 JavaScript，而不是 React JSX(或任何名称)。

我在你的 package.json 中看到你正在使用 @babel/preset-react ，所以如果配置良好，它应该可以工作。

在 .babelrc 中

检查你的.babelrc文件，它应该包含如下内容:

{
  "presets": ["@babel/preset-react"]
}

您还可以将文件扩展名更改为 .jsx ，它发现它更清晰，但这取决于你的个人喜好。

在 webpack.config.js 中

或者，您可以在 webpack 配置中定义它。替换这个:

loader: 'babel-loader',

用这个(在你的 webpack.config.js 中):

use: {
    loader: 'babel-loader',
    options: {
        presets: ['@babel/preset-env', '@babel/preset-react']
    }
},

检查包的名称

仔细查看您的package.json，它包含:

"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",

但是您正在使用 @babel/preset-env和@babel/preset-react 。所以npm install --save这些并从您的 package.json 中删除旧的。

运行babel --presets @babel/preset-react ./src/app.js ，查看预设是否存在并且有效:

运行它应该打印到控制台:

ReactDOM.render(React.createElement(AppRouter, null), document.getElementById('app'));

^ 这是 babel 成功将 JSX 转换为 JS。