39

バックグラウンド

私は多かれ少なかれ公式ガイドに従って、reactでローカル開発環境をセットアップしcreate-react-appましたが、実際に多くのセットアップを行うを使用しているようです。

ここで、実行するnpm run buildと、フォルダー内のすべての縮小版が取得されbuildます。ただし、npm startNodeJS が提供するバージョンを実行すると、変更はないようです。しかし、これらのファイルを見ることができません。

質問

したがって、次のいずれかです。

  • 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"
  },

注:なぜ私がそうしているのか尋ねたり、それが悪いことであると私に納得させようとしたりしないでください. デバッグやこの特定のユースケースなど、これが必要な理由はたくさんあります。

4

5 に答える 5

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は、他の変更を使用せずに、期待どおりに実行される、難読化されていない読み取り可能なコードをビルドしました。コマンドnpm install、npm run build、およびnpm startでのみGitbashを使用しました -誰かがそれを便利だと思うかもしれません。

必要なコードがまだ webpack eval の混乱に包まれているため、これはお勧めしません。ソースから有用なビットを選択するか、アプリを再構築する方が簡単です。せいぜい、クラスターの反応と webpack が何であるかを確認することができました。

于 2020-10-14T20:50:19.410 に答える