Webpack配置环境切换

2019年12月04日 阅读数:27
这篇文章主要向大家介绍Webpack配置环境切换,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

目的

在项目开发的时候,每每都会有不少套环境,就是俗称的开发环境(供开发人员使用),测试环境(用户测试),正式环境(最终用户正式使用)。每一个环境所使用的应用服务器,数据库服务器、域名、端口等等都有多是不同的,因此在要求咱们可以一套代码可以运行在全部环境的前提下,须要确保咱们每次发版的时候,应用链接的都是正确的后台地址,注意,这里说的是先后端分离项目中的前端项目。javascript

有的项目在发版前,切换环境的方式是这样的,经过注释不一样的代码,或者引入不一样的文件来达到链接不一样环境的目的,可是这样作是有必定风险的,在某次打包前端的时候,若是忘了执行上述的切换环境的步骤,是有可能会出现链接了错误环境的状况出现的,好比用户在正式环境的前端下了订单,可是数据请求的是开发环境的数据库,这样就有可能致使很是严重的问题。前端

需求

说一下本文的使用场景,也就是需求:java

  1. 每次打包的时候,都强制要求开发人员输入正确的环境的标志,以确保所发布的前端代码链接的是正确的后台服务器;
  2. 有的开发人员是全栈开发,兼顾前端以及后台,因此要求在调试前端的时候,能够手动切换,是调试本地服务器,仍是调试远程服务器;
  3. 在打包的时候,强制使用远程的ip地址(这种是针对移动端项目的,移动端安装安装完以后,移动设备本地不可能存在服务器这么一说,只能链接远程ip或者域名,而前端若是是跟后台服务放在同一台应用服务器上的话,能够继续使用本地ip链接,可是端口仍是要一致的)。

步骤

  1. 安装一个依赖node

    npm install cross-env --save-env
  2. 在package.json的script中,编写对应环境的调试以及打包脚本:web

      "scripts": {
        "dev": "cross-env env=dev release=false node build/dev-server.js",
        "uat": "cross-env env=uat release=false node build/dev-server.js",
        "start": "node build/dev-server.js",
        "dev-release": "cross-env env=dev release=true node build/build.js",
        "uat-release": "cross-env env=uat release=true node build/build.js"
      },

    如脚本所示,在项目根目录下,执行数据库

    npm run dev

    启动开发环境的调试服务,其中指定了env=dev(开发环境标志),release=false(不打包)npm

    npm run uat

    启动测试环境的调试服务,其中指定了env=uat(测试环境标志),release=false(不打包)json

    npm run dev-release

    打包开发环境,其中指定了env=dev(开发环境标志),release=false(打包)小程序

  3. 在根目录下的config/prod.env.js文件中给对象增长两个属性:后端

    module.exports = {
      NODE_ENV: '"production"',
      env: '"' + process.env.env + '"',
      release: process.env.release
    }
  4. process.env.* 就是刚才在启动脚本的时候使用cross-env指定的键值对,这里在prod.env.js写完了以后,不须要再dev.env.js中编写,由于在dev.env.js中,这段代码代表了,dev.env.js是继承了prod.env.js的属性参数(须要注意的是,在config目录下的dev和prod指的是本地调试仍是打包,而不是上面说的开发、测试以及正式环境):

    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"'
    })
  5. 准备环境配置文件,在src目录下新建env文件夹,里面放一些文件:
    这里写图片描述
    env.dev.js和env.uat.js存放的是环境的配置信息,好比移动端有远程的ip地址,app的下载地址等等。
    随便列一下里面的内容:

    ```
    export default {
      tag: 'dev',
      envName: '开发环境',
      mobile_ip: 'https://vaidnoho.qcloud.la',
    }
    ```
    
  6. env.public.js中存放的是一些公共的配置信息,每一个环境都须要用到的配置信息,好比有的项目用了阿里巴巴的iconfont,指定了特殊的前缀,这时就能够在这里面将前缀信息记录下来,这里列一下该文件的内容:

    export default {
      remote: false,                                  //是否链接远程ip地址
      local_mobile_ip: 'http://localhost:5757',       //本地服务IP地址
      scan_url: 'www.dp-xcx.com',                     //小程序扫描下载地址
      success_code: 0
    }
    

    经过更改remote的的true/false值,能够在调试的时候切换远程ip仍是本地ip,有的项目在请求后端服务的时候可能都会有一个状态码,通常都是0 ,有的多是200,标志本次请求成功,还有一些其余请求标志,也能够在这个文件配置。

  7. 最后一个关键文件:src/env/index.js,先看代码:

    import publicEnv from 'src/env/env.public'
    import devEnv from './env.dev'
    import uatEnv from './env.uat'
    
    let targetEnv;
    switch (process.env.env) {
      case "dev":
        targetEnv = devEnv
        break;
      case 'uat':
        targetEnv = uatEnv
        break;
      default:
        throw new Error(`找不到当前环境-->>${process.env.env}`)
    }
    
    let finalEnv = Object.assign({}, publicEnv, targetEnv);
    
    if (process.env.release == null)
      throw new Error("process.env.release不存在,请检查!")
    else
      finalEnv.remote = !!process.env.release ? true : finalEnv.remote
    
    finalEnv.mobile_ip = finalEnv.remote ? finalEnv.mobile_ip : finalEnv.local_mobile_ip
    finalEnv.isRelease = process.env.release;
    
    delete finalEnv.remote
    delete finalEnv.local_mobile_ip
    
    export default finalEnv
    
    export function logEnv() {
      // console.log(`env-->>`, finalEnv);
      console.log('-----------------------------------------------------------')
      if (finalEnv.isRelease) {
        console.log(`打包压缩模式,强制使用远程ip,当前环境为:${finalEnv.envName}`)
        console.log(`远程IP地址-->>${finalEnv.mobile_ip}`)
      } else {
        console.log(`本地调试模式,当前环境为:${finalEnv.envName}`)
        console.log(`请求的IP地址-->>${finalEnv.mobile_ip}`)
      }
      console.log('-----------------------------------------------------------')
    }
    

    刚才第4步的时候,就提到过,代码运行以后,也能够访问process.env.env和process.env.release,这个index文件会根据这env和release自动判断,是调试仍是打包,而后自动地去判断是否强制使用远程ip。

  8. 最后在使用的时候,还须要import env from ‘src/env’,而后console.log(env),这时能够验证一下是否是所想要的结果。