3

前言

上个文章中,我们讲了如何操起dva就用,但是不够优雅,接下来,我就以自己的开发经历,把坑都提出来,然后填上。
今天就讲讲怎么切换环境吧,dev和prod,甚至uat,poc,test。
话不多说,请往下看。

干货

我们的逻辑是,在package.json 执行任务时候,携带参数,在webpack配置中覆盖roadhorgrc的默认配置,然后在执行js中拿到env变量,从而判断环境走不同的逻辑。
上面的话不用想得太明白,看接下来的操作吧

配置env

配置package.json

clipboard.png

我们使用cross-env 用来 跨平台执行设置env命令,比如在mac上和windows上的命令是不同的。
(注意:要提前安装哟)
npm i -D corss-env

做完以上,我们在进入webpack的配置时,就可以拿到API_ENV

配置webpack

首先在根目录下新建一个 ".webpackrc.js"的文件
内容如图

clipboard.png

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


ThenMorning
190 声望18 粉丝

但行好事,莫问前程.