React項目配置npm run build命令分環境打包

使用create-react-app腳手架創建的項目默認隱藏了webpack等配置文件信息，使用npm run eject命令暴露這些隱藏的配置文件信息

 

項目默認有兩個環境：開發環境(npm start)、生產環境(npm run build)

日常項目開發中分為開發環境、測試環境、正式環境三個環境

可以通過修改配置靈活區分三個環境以實現不同環境使用不同請求地址或不同資源文件信息

 

方法一：復制scripts/build.js(正式環境)，創建scripts/buildtest.js(測試環境)

修改process.env對象

 

 

想要實現不同環境分文件夾存儲打包文件，修改config/paths.js

 

 

正式環境：build文件夾，測試環境：buildtest文件夾

修改package.json->scripts

 

 

開發環境：npm start / npm run start / npm run dev / npm run serve

對應process.env.NODE_ENV = 'development'

測試環境：npm run build:test

對應process.env.NODE_ENV = 'test';生成buildtest文件夾

正式環境：npm run build:prod

對應process.ev.NODE_ENV = 'production';生成build文件夾

修改package.json->browserslist

 

 

項目中就能使用process.env.NODE_ENV來區分三個環境。

 

方法二：

> 自帶webpack配置中默認配置使用dotenv來處理
> npm install dotenv-cli --save-dev
> 根目錄下添加文件.env.development、.env.test、.env.production
> 文件內容根據webpack配置以REACT_APP_作為前綴讀取,eg:REACT_APP_BASEURL = '';
> 使用process.env對象來獲取對應信息
> 修改package.json->scripts
> "build:prod": "dotenv -e .env.production node --max_old_space_size=4096 scripts/build.js"
> "build:test": "dotenv -e .env.test node --max_old_space_size=4096 scripts/build.js"