在日常的项目开发中,我们需要和不同的后端同学进行接口的本地联调,此时就需要频繁的去切换不同的 IP
地址,这样不仅浪费时间还效率低下
然而我们更希望和哪位后端同学进行联调,就执行 package.json
中 scripts
对应的指令启动服务就好,这样既省去了频繁的注释切换,又提升了开发效率
配置环境变量(package.json)
-
Windows 系统
{ "scripts": { "dev": "set NODE_ENV=dev && node index.js" } } 复制代码
-
Mac 系统
{ "scripts": { "dev": "export NODE_ENV=dev && node index.js" } } 复制代码
-
使用 cross-env 跨平台配置
npm install --save-dev cross-env
{ "scripts": { "dev": "cross-env NODE_ENV=dev && node index.js" } } 复制代码
-
总结
不同的操作系统配置环境变量的方式不同,这样我们的代码就会非常的冗余,且不利于维护
所以我们使用
cross-env
跨平台设置和使用环境变量,在不同平台使用唯一指令,让环境变量的设置和使用变得简单
优化前后端本地联调
-
配置后端同学及其本地
IP
的映射const hash = new Map([ ['Mike', 'http://192.168.2.105:8082'], ['Angela', 'http://192.168.2.235:8082'], ['OldMaster', 'http://192.168.2.208:8082'] ]) 复制代码
-
配置
scripts
指令{ "scripts": { "start:Mike": "cross-env NODE_ENV=Mike webpack-dev-server --config build/webpack.dev.config.js", "start:Angela": "cross-env NODE_ENV=Angela webpack-dev-server --config build/webpack.dev.config.js", "start:OldMaster": "cross-env NODE_ENV=OldMaster webpack-dev-server --config build/webpack.dev.config.js" } } 复制代码
-
配置
Webpack
启动环境const NODE_ENV = process.env.NODE_ENV module.exports = { dev: { host: '0.0.0.0', port: 3000, proxyTable: { '/api': { target: hash.get(NODE_ENV), changeOrigin: true, pathRewrite: { '^/api': '' } } }, assetsSubDirectory: 'static', assetsPublicPath: '/', } } 复制代码
优化总结
如果是动态 IP
的话,地址是频繁变化的,每次变化后都需要手动更新原有地址。但相比最初的频繁切换,在开发效率上已经有了质的提升
一起学习,加群交流看 沸点