create-react-app 打包环境以及打包输出文件夹名设置
- create-react-app 不同环境打包及打包到对应的文件夹内
- 设置不同环境打包不同文件夹
设置不同环境的打包,这里区分为三种环境,线上的测试,演示,正式环境
1。安装 cross-env
。兼容跨平台(window, mac)设置的环境变量的有效性。
npm install npm install --save-dev cross-env
2.在package.json
中配置打包命令,create-react-app
文档规定自定义环境变量必须以REACT_APP_
开头,并且可以在全局使用(包括业务逻辑)。
打包命令分别为npm run dev
, npm run demo
, npm run prod
;
"scripts": {
"start": "cross-env REACT_APP_SECRET_ENV='development' node scripts/start.js", // 生成的项目文件本地运行的命令,这里加上测试打包环境
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"dev": "cross-env REACT_APP_SECRET_ENV='development' node scripts/build.js", // development 测试环境
"demo": "cross-env REACT_APP_SECRET_ENV='demoing' node scripts/build.js", // demoing 演示环境
"prod": "cross-env REACT_APP_SECRET_ENV='production' node scripts/build.js" // production 正式环境
},
3.打开config
文件夹下的 env.js
,大概在74,75行吧,加上设置的环境变量
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
+ REACT_APP_SECRET_ENV: process.env.REACT_APP_SECRET_ENV, // 新加的环境变量------------------为了看起来明显点^_^
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
// We support configuring the sockjs pathname during development.
// These settings let a developer run multiple simultaneous projects.
// They are used as the connection `hostname`, `pathname` and `port`
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
// and `sockPort` options in webpack-dev-server.
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
}
);
4.在src
文件夹下新建 utils
文件夹。里面新建 initEnv.js
文件。写上不同环境下的需要的域名:
// init
var api_url = 'http://192.168.1.0' //替换成你的域名,初始化,一般写测试的就行
// 获取设置的环境变量 process.env.REACT_APP_SECRET_ENV
var env = process.env.REACT_APP_SECRET_ENV;
switch(env) {
case 'development':
api_url = 'http://192.168.1.0';
break;
case 'demoing':
api_url = '演示服域名';
break;
case 'production':
api_url = '正式服域名'
break;
default:
api_url = 'http://192.168.1.0'
}
export default {
apiUrl: api_url,
}
5.index.js
引入配置好的接口文件 initEnv.js
,现在各个环境需要的接口都配置好了。执行相对应的命令就可以打包出对应环境的文件。然后就可以随心所使用欲啦~
import API from './utils/initEnv';
console.log(API.apiUrl);
设置不同环境打包不同文件夹
1.打开config
文件夹下的path.js
文件。在文件最后:
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'), // 就是这个了,把 `build` 替换成你设置的文件名,根据`process.env.REACT_APP_SECRET_ENV`设置。
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrlOrPath,
};
module.exports.moduleFileExtensions = moduleFileExtensions;
设置完成,可以打包看看。
华丽丽的分割线~~~
tip: 想看打印出来的对应的域名是不是对的。可以安装本地服务。分别打包对应的命令并启动服务在控制台查看
1.先打包文件,这里我们打包正式环境npm run prod
,打包完成之后项目根目录会有一个build
的文件夹。
2.安装serve
:
npm install -g serve
安装完成后,启动serve
serve -s build-pro
打开控制台,就可以看到打印值:正式服域名
;