create-react-app変更構成マルチ環境パッケージ

2314 ワード
react
目次
構成の変更
マルチ環境構成
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、内容は以下の通り:
    // .env.development
REACT_APP_ENV=development

// .env.production
REACT_APP_ENV=production
  • packageの変更を続行します.jsonのscripts指定環境

    • package.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"}

    使用

  • 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/
    • 一歩一歩reactアプリケーション-nodeを構築mocha+supertest+shouldを使用してユニットテストを書く
    Springbootでは、国際化ファイル(messages.properties)を構成して列挙クラス(enum)に値を割り当てます.