使用 Babel 编译 React 项目时的错误

Question

我正在使用以下命令通过命令行创建项目：

npx create-react-app xxxxxx

我创建了一个完整的批处理文件来处理整个事情，添加几个模块，如 babel、lodash 和 webpack，添加一些其他模块来解决一些“对等”问题，并移动一些文件来完成它使用 babel 和 webpack 更容易管理文件。这是批处理文件的内容：

@echo off

IF %1.==. GOTO No1
Goto SetName


:Dowork
cls
echo New folder name: %arg1%
call npx create-react-app %arg1%
cd %arg1%
mkdir dev
mkdir dist
@echo on
::call npm init -y
call npm install node-sass --save-dev
call npm install sass --save-dev
call npm install fibers --save-dev
call npm install react-router-dom --save-dev
::call npm install webpack webpack-cli --save-dev
::call npm install lodash --save-dev
::call npm install @babel/core @babel/cli babel-preset-react-app --save-dev
@echo off
xcopy ..\_run_babel.bat /Q > nul
xcopy ..\_run_webpack.bat /Q > nul
move .\src\* .\dev\ > nul
cd ..\
set arg1=
echo Setup complete

GOTO End1


:SetName
set arg1=%1
GOTO Dowork


:No1
cls
set /p entry=Enter project/folder name: 
IF %entry%.==. GOTO NoName
set arg1=%entry%
set entry=
GOTO Dowork


:NoName
cls
ECHO No project/folder name specified
GOTO End1


:End1

批处理文件执行创建所有内容的创建工作。然后将该文件夹添加为 Eclipse 中的一个项目（“用于 JavaScript 和 Web 开发人员的 Eclipse IDE”，版本：2019-12 (4.14.0)）。但是，现在我只是想让它处理简单的工作，我遇到了麻烦。它甚至不想处理使用新项目创建的默认文件。我用以下方式启动 babel：

npx babel-cli --watch dev --out-dir src --presets react-app/prod

这样，对于它尝试处理的每个文件，我都会收到如下错误：

ReferenceError: [BABEL] dev\App.js: Unknown option: %project_folder%\node_modules\babel-preset-react-app\prod.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options
.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "%project_folder%\\node_modules\\babel-preset-react-
app\\prod.js")
    at Logger.error (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
    at %AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
    at %AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (%AppData%\Roaming\npm-cache\_npx\19028\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\index.js:212:65)

我真的不明白这一点，不知道为什么会发生这种情况，或者如何解决它？项目初始化有什么问题吗？运行 babel 我应该做些什么不同的事情？这很令人困惑，因为我之前创建了几个项目并且没有任何问题，但是我不得不将其搁置一段时间以处理其他事情，而对于我的生活，我无法弄清楚为什么我不能做到这一点现在开始工作。

-- 编辑--

我想我已经确定了问题的根源。好像是 react 预设：babel-preset-react-app。假设它与 create-react-app 进程一起安装。只是为了好玩，我还尝试单独安装预设。我唯一没有收到错误消息的情况是，如果我在没有定义 react-app 预设的情况下运行 babel-cli。我可以删除预设然后在旧版本上安装吗？

Answer 1

好的，事实证明我做的一切都完全错了。事实上，我根本不需要这个特殊的 babel 命令。我错误地认为我需要先用 babel 进行转译，然后才能用 webpack 压缩东西。所以，我现在重建了我的批处理文件“Dowork”部分，如下所示：

:Dowork
cls
echo New folder name: %arg1%
call npx create-react-app %arg1%
cd %arg1%
@echo on
call npm install node-sass --save-dev
call npm install sass --save-dev
call npm install fibers --save-dev
call npm install react-router-dom --save-dev
call npm install webpack-cli --save-dev
call npm install @babel/preset-env @babel/preset-react --save-dev
call npm install html-webpack-plugin babel-loader html-loader css-loader style-loader file-loader --save-dev
@echo off
xcopy ..\_run_webpack.bat /Q > nul
xcopy ..\webpack.config.js /Q > nul
cd ..\
set arg1=
echo Setup complete

GOTO End1

这填充了一些未作为 create-react-app 的一部分安装的所需组件、预设和加载程序。然后我使用以下作为我的默认 webpack 配置文件：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        babelrc: false,
                        presets: [
                            "@babel/env",
                            "@babel/react"
                        ]
                    }
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: "html-loader"
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                    }
                ]
            }
        ]
    }
};

所以现在，根据我需要部署到的位置，我可以通过 babel 构建：

npm run build

或者我启动 webpack：

npx webpack --mode production

结果我大大误解了如何构建东西，以及以什么方式使用 babel 和 webpack。而且我还认为预设的“react-app”不再存在，所以现在改为“env”和“react”。