标签：npm run process 环境 React build env

使用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"

标签：npm,run,process,环境,React,build,env
来源： https://www.cnblogs.com/it-people/p/14772166.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。