(动手)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，才整清楚，这些东西仍是要有人写出来，才够清晰。