create-react-app変更構成マルチ環境パッケージ
2314 ワード
目次
構成の変更
マルチ環境構成
package.json demoは以下の通りです.
テスト
使用
参考資料、以下の学生に感謝します.
npm run ejectコマンドでプロファイルを露出し、中のwebpack構成 を変更できます. react-app-rewiredパッケージをインストール後、ルートディレクトリにconfig-overridesを作成する.jsカスタム構成、最後にpackageを変更します.jsonのscripts(react-scriptsをreact-app-rewiredに置き換える) dotenv-cliパッケージ をインストールは、必要に応じてルートディレクトリに作成する.Envファイル(注意:REACT_APP_で始まるのみ)は、作成する.env.development、.env.production、内容は以下の通り: packageの変更を続行します.jsonのscripts指定環境
開発環境(npm start)、パッケージング試験環境(npm run build:dev)、パッケージング生産環境(npm run build:pro)を実行する、それぞれprocessを印刷する.Envは以下の通りです.
html中:%REACT_APP_ENV% js/jsx:process.Envでのアクセス https://www.jianshu.com/p/f9535acd0462 https://www.jianshu.com/p/b24154123852 https://www.html.cn/create-react-app/docs/adding-custom-environment-variables/
構成の変更
マルチ環境構成
package.json demoは以下の通りです.
テスト
使用
参考資料、以下の学生に感謝します.
構成の変更
マルチ環境構成
// .env.development
REACT_APP_ENV=development
// .env.production
REACT_APP_ENV=productionpackage.json demoは以下の通りです。
"scripts": {
"start": "react-app-rewired start",
"build:dev": "dotenv -e .env.development react-app-rewired build",
"build:pro": "dotenv -e .env.production react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"devDependencies": {
"dotenv-cli": "^2.0.1",
"react-app-rewired": "^2.1.3"
}テスト
開発環境(npm start)、パッケージング試験環境(npm run build:dev)、パッケージング生産環境(npm run build:pro)を実行する、それぞれprocessを印刷する.Envは以下の通りです.
// 1. （npm start）
{NODE_ENV: "development", PUBLIC_URL: "", REACT_APP_ENV: "development"}
// 2. （npm run build:dev）
{NODE_ENV: "production", PUBLIC_URL: "", REACT_APP_ENV: "development"}
// 3. （npm run build:pro）
{NODE_ENV: "production", PUBLIC_URL: "", REACT_APP_ENV: "production"}