前端必懂 -- cross-env

3,323 阅读1分钟

开源

个人开源的leno-admin后台管理项目,前端技术栈:reactHooksant-design;后端技术栈:koamysqlredis,整个项目包含web端electron客户端mob移动端template基础模板,能够满足你快速开发一整套后台管理项目;如果你觉得不错,就为作者点个✨star✨吧,你的支持就是对我最大的鼓励;

演示地址

文档地址

源码github地址

作用

cross-env 是管理项目中的环境变量,能够更好的符合动态配置的开发,比如开发环境、测试环境、生产环境各自的对应的域名及打包。

cross-env 能够解决不同环境系统间设置环境变量的时候,命令行不一样的问题;

  • windows 使用:"SET NODE_ENV=development"
  • 在其他unix 系统使用:"EXPORT NODE_ENV=development"

所以遇到此种境地就可以使用cross-env 兼容windowsunix ,一行命令即可在不同端执行;

  • "cross-env NODE_ENV=development"

安装

npm i --save-dev cross-env

使用

多种开发环境命令行配置

  • npm run dev 开发环境
  • npm run build:test 测试环境
  • npm run build:prod 生产环境
// package.json 中 scripts 配置脚本命令行
"dev": "cross-env NODE_ENV=development BASE_ENV=development webpack-dev-server -c build/webpack.dev.js",
"build:test": "cross-env NODE_ENV=production BASE_ENV=test webpack -c build/webpack.prod.js",
"build:prod": "cross-env NODE_ENV=production BASE_ENV=production webpack -c build/webpack.prod.js",
  • NODE_ENV 设置全局变量,控制webpack的配置项
  • BASE_ENV 设置全局变量,控制axios内的baseUrl基础路径
  • webpack-dev-server 开发环境下开启本地服务器,帮助我们自动打开浏览器
  • build/webpack.dev.js 执行webpack配置项,一般为dev开发环境配置项,prod生产环境配置项