脚本宝典收集整理的这篇文章主要介绍了

业务代码如何判断生产/开发环境

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

开发环境和生产环境分离的原因

在开发时,会产生 debug 或者是测试的代码,这些代码不应该出现在生产环境中。当项目部署时,往往会将代码进行一系列的压缩来优化它,如此会彻底破坏代码的可读性。本地开发往往使用的是本地 mock 的数据,而正是上线后用的是真实数据。以上几点,开发环境和生产环境必须得分离。

比如我想让项目根据不同的环境登录不同的地址。本地开发登录的是localhost,测试环境登录的是test地址,上线环境登录的是online地址。那么业务代码里如何判断生产开发测试环境呢?

方案一 将环境变量配置到 package.json

// package.json
{
// npm install cross-env
// 因为mac和windows设置命令环境变量的命令不一致, 所以用cross-env来做兼容
  "script": {
    "dev": "cross-env NODE_ENV=dev webpack --progress --colors",
    "production": "cross-env NODE_ENV=production webpack --progress --colors"
  }
}
// npm run dev // 开发
// npm run production // 生产

那么 package.jsonscript中的参数, webpack文件中如何读取呢?
在 webpack 中, 可通过 process.env.NODE_ENV获取到变量

// webpack 下
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    }
  })
]

为什么需要加上JSON.stringify, 因为webpack 打包的时候对变量做替换会将 process.env.NODE_ENV 替换成 production, 而我们期望的是 'production'

有个问题,new webpack.DefinePlugin 定义的全局变量是 在编译时可以配置的全局常量。,那么,如何在 webpack config 文件中使用 process.env.NODE_ENV 呢?
就是上面的回答,在脚本中设置变量 并且用上cross-env。 因此经常两者结合使用。

方案二:

使用process.env.npm_lifecycle_event 这个参数来辨别开发环境。
npm 提供一个 npm_lifecycle_event 变量,返回当前正在运行的脚本名称
这个方法极为简单。

npm scripts 使用指南

webpack.DefinePlugin使用介绍

总结

以上是脚本宝典为你收集整理的

业务代码如何判断生产/开发环境

全部内容,希望文章能够帮你解决

业务代码如何判断生产/开发环境

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过