Create React App で "react-scripts eject" コマンドを使うべき？
React.js の "react-scripts eject" コマンドについて
"react-scripts eject" コマンドは、Create React App (CRA) で作成されたプロジェクトから、CRA のデフォルト設定とビルドスクリプトを取り除き、手動で設定を管理できるようにするコマンドです。
CRA は、React.js プロジェクトの開発を迅速かつ簡単に開始するための公式ツールです。CRA は、Webpack と Babel などのツールを抽象化し、デフォルトのビルド設定とスクリプトを提供することで、開発者の負担を軽減します。
eject コマンドを使うメリット
- CRA のデフォルト設定では不十分な場合、詳細な設定をカスタマイズできる
- Webpack や Babel などのツールをより深く理解し、使いこなせる
- プロジェクトのビルドプロセスを完全に制御できる
- CRA のデフォルト設定の利便性を失い、設定を全て手動で管理する必要がある
- 設定を誤ると、プロジェクトが正常に動作しなくなる可能性がある
- CRA の今後のアップデートに対応できなくなる
eject コマンドを実行する前に、以下の点を考慮する必要があります。
- 本当に詳細な設定が必要かどうか
- 設定を手動で管理するスキルと時間があるかどうか
eject コマンドを実行するには、プロジェクトのルートディレクトリで以下のコマンドを実行します。
npm run eject
- プロジェクトディレクトリに
configディレクトリが作成され、Webpack の設定ファイル (webpack.config.js) や Babel の設定ファイル (babel.config.js) が含まれる package.jsonファイルに、Webpack や Babel などのツールの依存関係が追加されるstartやbuildなどのコマンドは、手動で設定されたスクリプトを実行するようになる
- CRA の今後のアップデートには対応できないため、手動で更新する必要がある
補足
- eject コマンドは、上級者向けの機能です。初心者の方は、eject コマンドを使用せずに、CRA のデフォルト設定で開発することを推奨します。
- eject コマンドを実行した後に、プロジェクトが正常に動作しない場合は、設定を確認するか、コミュニティに助けを求めることを推奨します。
├── node_modules
├── package.json
└── src
├── App.js
├── index.css
├── index.js
eject コマンドを実行後のプロジェクトディレクトリ構成
├── config
│ ├── babel.config.js
│ └── webpack.config.js
├── node_modules
├── package.json
└── src
├── App.js
├── index.css
├── index.js
eject コマンドを実行後の package.json ファイル
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"babel-core": "^7.18.2",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
},
"scripts": {
"start": "webpack serve --config config/webpack.config.js",
"build": "webpack --config config/webpack.config.js --progress --color",
"eject": "react-scripts eject"
}
}
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react']
};
上記はあくまでサンプルコードであり、プロジェクトの状況に合わせて設定を変更する必要があります。
"react-scripts eject" コマンドの代替方法
eject コマンドの代替方法として、以下の方法が考えられます。
CRA のデフォルト設定を拡張する
CRA は、環境変数や .env ファイルを使用して、デフォルト設定を拡張することができます。
例:
- 開発サーバーのポート番号を変更する
PORT=3000 npm start
- ソースマップを生成しない
GENERATE_SOURCEMAP=false npm build
Webpack や Babel の設定ファイルを直接編集する
CRA は、Webpack と Babel を使用してプロジェクトをビルドします。これらのツールの設定ファイルを直接編集することで、詳細な設定をカスタマイズすることができます。
警告:
設定ファイルを誤ると、プロジェクトが正常に動作しなくなる可能性があります。設定ファイルを編集する前に、必ずバックアップを取るようにしてください。
CRA 互換のツールを使用することで、CRA のデフォルト設定を拡張したり、Webpack や Babel の設定ファイルを編集せずに設定をカスタマイズしたりすることができます。
CRA を使用せずにプロジェクトを構築する
CRA は、React.js プロジェクトを開発するための便利なツールですが、必須ではありません。Webpack や Babel などのツールを直接使用して、プロジェクトを構築することもできます。
CRA を使用せずにプロジェクトを構築するには、Webpack や Babel に関する深い知識が必要です。
reactjs webpack create-react-app
