如何在不縮小的情況下構建 React 的生產版本？

Question

背景

我一直在或多或少地遵循官方指南來使用 React 設置本地開發環境，它似乎使用了create-react-app ，它確實設置了很多。

現在，如果我運行npm run build我會得到build文件夾中所有內容的縮小版本。 但是，如果我運行npm start服務的版本似乎沒有任何修改。 但是我看不到這些文件。

問題

所以要么：

• 我可以從某處npm start生成的文件嗎？ 因為這些似乎是未修改的。 （ build永遠不會在那里修改）
• 或者我可以以某種方式運行npm run build ，以便它使用未最小化的文件進行“開發”構建嗎？

嘗試

我的目標只是獲得未最小化版本的反應腳本。

至於最后一個問題，我已經按照這個問題中的建議嘗試了一些參數和環境變量，但是正如您所看到的，它失敗了：

$ NODE_ENV=dev npm run build --dev --configuration=dev

> example-project@0.1.0 build [...]
> react-scripts build

Creating an optimized production build...
[...]

系統

我的package.json有默認腳本：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

---

注意：請不要問我為什么這樣做或試圖說服我這是不好的。 我可能想要這個的原因有很多，例如調試或這個特定的用例。

Answer 1

要更改 webpack 配置和構建腳本，您必須從 create-react-app 中彈出（我不建議執行此步驟，因為它會破壞未來的兼容性），或者您可以使用 rewire 之類的工具來覆蓋某些設置

看看這個https://github.com/timarney/react-app-rewired

我個人使用只是重新布線

npm i rewire --save-dev

這是我過去為我的一個項目創建的示例配置，它運行良好！

1. 創建一個 build.js
2. 更改您的 package.json 以便它運行 build.js

構建.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename = '[name].js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = '[name].css';
config.plugins[5].options.publicPath = '../';

然后在我的 package.json 中，我更改了這樣的 npm 腳本鏈接（將運行 build.js 腳本的節點構建）

包.json

"scripts": {
    "start": "react-scripts start",
    "build": "node build && gulp",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

所以如果你真的想從 create-react-app 中彈出，你所要做的就是運行

npm run-script eject

然后您將獲得一個包含 create-react-app 使用的所有配置的新文件夾

但是正如我之前所說的，沒有理由不使用重新布線而只是覆蓋配置而不是彈出

如果有幫助，請不要忘記標記為答案干杯和成功

Answer 2

為什么看不到源文件？ 這是我會嘗試的：

1. 使用npm run start啟動你的npm run start應用npm run start
2. 打開瀏覽器訪問http://localhost:3000
3. 打開開發人員工具並檢查 webpack-dev 服務器創建的分塊包。 在 Mac 上的 Chrome 中，您可以執行以下操作： cmd+option+j將打開開發人員工具。 然后單擊源選項卡：在此選項卡中，您將看到由 react 的構建配置創建的包。 現在這些包的輸出可能不漂亮，但它就在那里。

或者，即使您使用create-react-app ，您的應用程序的所有構建配置設置都包含在您的webpack.config.js文件中。 由於此配置僅封裝在react-scripts節點模塊中。 因此，也許您可​​以嘗試直接編輯此文件，而無需彈出： <base_path>/node_modules/react-scripts/config/webpack.config.js 。 盡管您需要小心不要破壞現有的配置設置。 您可能想弄亂生產版本的source-map設置。 至少這樣，如果你破壞了這個文件，你總是可以刪除並重新安裝react-scripts並返回到你的初始配置。 這也將允許您在“半安全”沙盒環境中進行自定義。 請記住， create-react-app沒有提供任何魔法，而只是為您的構建配置設置有用的默認值。

最后，正如@xzesstence 指出的，您可以嘗試react-app-rewired模塊。

希望這有幫助！

Answer 3

我想要一個 React 應用程序的未混淆代碼——主要是出於好奇，我有源代碼——同時有在 Angular 中重寫它的工作（生成一個更易於維護的應用程序，其大小為 5%，依賴項為 1%）。

我從未使用過 React 但通過修改文件發現

<base_path>/node_modules/react-scripts/config/webpack.config.prod.js

並用以下內容替換 module.exports 下的大型優化配置項...

module.exports = {...

    optimization: {
            minimize: false,
            splitChunks: {
                chunks: 'all',
                name: true
            },
            runtimeChunk: true
        },

npm run build構建了未混淆的、可讀的代碼，按預期運行，沒有使用其他修改。 僅將 Gitbash 與命令npm install 、 npm run build和npm start 一起使用- 只是認為有人可能會覺得這很有用。

我不推薦這樣做，因為你想要的代碼仍然包裹在 webpack eval 中。 從源代碼中選擇有用的部分或重新構建應用程序會更容易。 充其量，我必須了解集群 react 和 webpack 是什么。

Answer 4

文件保存在服務器進程內存中並且不會寫入磁盤，除非您彈出腳本（或者如果可以使用像“rewire”這樣的工具）並修改它們以使用writeToDisk選項將其寫入磁盤，如中所述webpack DevServer 文檔。

但是，您可以通過導航到webpack-dev-server下的webpack-dev-server端點來獲取實際的文件列表/鏈接。

例如，如果在 localhost:3000 使用默認 url，則使用以下 url 查看服務器上的所有文件：

http://localhost:3000/webpack-dev-server

但您真正需要的只是 index.html（通常只是加載 JS 文件的存根）和以下 3 個 JS 文件，它們在所有 create-react-app 分期付款中似乎都一致，以及它們各自的源代碼地圖文件。

1. main.chunk.js
2. 包.js
3. 供應商~main.chunk.js

您可以右鍵單擊頁面上的鏈接並保存它們，或者您可以直接導航鏈接或從 Chrome 開發工具“源”選項卡中獲取它們。

請注意，通常對於代碼更改僅更新 main.chunk.js 文件，因此對於平均代碼更改，您可能只獲取更新的 main.chunk.js 和 main.chunk.js.map 文件。

Answer 5

我知道現在回答這個為時已晚，但試試這個npm i -D cra-build-watch 。

我覺得這個庫被低估了，但它只是觀察 react 應用程序中的變化，而不是一次又一次地重新構建整個包。

盡管重新布線有助於通過不縮小構建來進行構建，但是，它仍然會一次又一次地經歷整個構建過程。

Answer 6

在這個問題上花了一整天，我找不到辦法得到生產代碼的非縮小版本，

我所做的是：打開 chrome 上的開發工具，導航到源選項卡； 現在找到 javascript 文件（在 create-react-app 中它通常在 static > js > main.js 中）

當 javascript 文件可見時，在屏幕的左下角會出現一對大括號（看圖片）：

開發工具的屏幕截圖

當你點擊花括號時，它美化了代碼，然后你可以在代碼中添加斷點，處理那段代碼並不方便，但現在這對我有用。

希望能幫助到你。