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