营业代码怎样推断临盆/开辟环境

开辟环境和临盆环境星散的缘由

在开辟时,会发生 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运用引见

    原文作者:ShiRouMi
    原文地址: https://segmentfault.com/a/1190000016194069
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞