☰

React の製品版を縮小せずにビルドするにはどうすればいいですか? 質問する

tag-icon • tag-icon node.js reactjs minify create-react-app react-scripts
React の製品版を縮小せずにビルドするにはどうすればいいですか? 質問する

背景

私は多かれ少なかれフォローしていますReactでローカル開発環境をセットアップするための公式ガイドcreate-react-appそして、実際にたくさん設定する を使用しているようです。

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

質問

つまり、次のいずれかです。

  • どこかで生成されたファイルにアクセスできますかnpm start? これらは変更されていないようです。(buildそこでは決して変更されません)
  • または、何らかの方法で を実行してnpm run build、最小化されていないファイルで「開発」ビルドを行うことはできますか?

トライ

私の目的はただ最小化されていないバージョンのReactスクリプトにアクセスする。

最後の質問についてはこの質問で提案されているいくつかのパラメータと環境変数しかし、ご覧のとおり失敗しました。

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

> [email protected] 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"
  },

注記：なぜこれをするのかと尋ねたり、それが悪いことだと説得したりしないでください。私がこれを望む理由はたくさんあるでしょう。例えばデバッグやこの特定の使用例。

ベストアンサー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を実行するようにします。

ビルド

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 スクリプトを実行する node build)

パッケージ.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で使用されるすべての設定を含む新しいフォルダが作成されます。

しかし、前に述べたように、取り出す代わりに、rewire を使用せず、構成を上書きするだけの理由はありません。

おすすめ記事