(動手)dva配置env實現環境切換

前言

在上個文章中，咱們講了如何操起dva就用,可是不夠優雅，接下來，我就以本身的開發經歷，把坑都提出來，而後填上。
今天就講講怎麼切換環境吧，dev和prod，甚至uat，poc，test。
話很少說，請往下看。

乾貨

咱們的邏輯是，在package.json 執行任務時候，攜帶參數，在webpack配置中覆蓋roadhorgrc的默認配置，而後在執行js中拿到env變量，從而判斷環境走不一樣的邏輯。
上面的話不用想得太明白，看接下來的操做吧

配置env

配置package.json

咱們使用cross-env 用來 跨平臺執行設置env命令，好比在mac上和windows上的命令是不一樣的。
(注意:要提早安裝喲)
npm i -D corss-env

作完以上，咱們在進入webpack的配置時，就能夠拿到API_ENV

配置webpack

首先在根目錄下新建一個 ".webpackrc.js"的文件
內容如圖

console.log('======', process.env);

export default {
  entry: 'src/index.js',
  define: {
    "process.env": {
      NODE_ENV: process.env.NODE_ENV,
      API_ENV: process.env.API_ENV
    }
  },
  extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr'],
    },
  }
};

其餘的就很少闡述了，直接說define，咱們經過define定義一個json用來做爲env變量，而這裏的賦值就是拿到了package.json中配置的，能夠在控制檯查看，由於咱們console了。

使用env

上面2步操做完後，基本上就可使用了，使用方法爲，process.env.API_ENV,我用來判斷API服務的環境。
固然，大家也能夠在package.json 設置成 XXX_ENV，不過記得，webpack裏面也要對應更改。
更優雅的作法，就是在webpack中 經過env，加載不一樣的環境配置文件名，從而達到切換環境的目的。

小結

看了好一會的issue，才整清楚，這些東西仍是要有人寫出來，纔夠清晰。