使用 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

批處理文件執行創建所有內容的創建工作。 The folder then gets added as a project within Eclipse ("Eclipse IDE for JavaScript and Web Developers", Version: 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 我應該做些什么不同的事情？ 這很令人困惑，因為我之前創建了幾個項目並且沒有任何問題，但是我不得不將其擱置一段時間以處理其他事情，而對於我的生活，我無法弄清楚為什么我無法做到這一點在工作，在忙。

--編輯--

我想我已經確定了問題的根源。 這似乎是反應預設： 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”。