优化实战 第 28 期 - 前后端本地联调引发的优化思考

在日常的项目开发中,我们需要和不同的后端同学进行接口的本地联调,此时就需要频繁的去切换不同的 IP 地址,这样不仅浪费时间还效率低下

proxy.jpg

然而我们更希望和哪位后端同学进行联调,就执行 package.json 中 scripts 对应的指令启动服务就好,这样既省去了频繁的注释切换,又提升了开发效率

配置环境变量(package.json)

  • Windows 系统

    {
      "scripts": {
        "dev": "set NODE_ENV=dev && node index.js"
      }
    }
    复制代码
  • Mac 系统

    {
      "scripts": {
        "dev": "export NODE_ENV=dev && node index.js"
      }
    }
    复制代码
  • 使用 cross-env 跨平台配置

    npm install --save-dev cross-env

    {
      "scripts": {
        "dev": "cross-env NODE_ENV=dev && node index.js"
      }
    }
    复制代码
  • 总结

    不同的操作系统配置环境变量的方式不同,这样我们的代码就会非常的冗余,且不利于维护

    所以我们使用 cross-env 跨平台设置和使用环境变量,在不同平台使用唯一指令,让环境变量的设置和使用变得简单

优化前后端本地联调

  • 配置后端同学及其本地 IP 的映射

    const hash = new Map([
      ['Mike', 'http://192.168.2.105:8082'],
      ['Angela', 'http://192.168.2.235:8082'],
      ['OldMaster', 'http://192.168.2.208:8082']
    ])
    复制代码
  • 配置 scripts 指令

    {
      "scripts": {
        "start:Mike": "cross-env NODE_ENV=Mike webpack-dev-server --config build/webpack.dev.config.js",
        "start:Angela": "cross-env NODE_ENV=Angela webpack-dev-server --config build/webpack.dev.config.js",
        "start:OldMaster": "cross-env NODE_ENV=OldMaster webpack-dev-server --config build/webpack.dev.config.js"
      }
    }
    复制代码
  • 配置 Webpack 启动环境

    const NODE_ENV = process.env.NODE_ENV
    module.exports = {
      dev: {
        host: '0.0.0.0',
        port: 3000,
        proxyTable: {
          '/api': {
            target: hash.get(NODE_ENV),
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
      }
    }
    复制代码

优化总结

如果是动态 IP 的话,地址是频繁变化的,每次变化后都需要手动更新原有地址。但相比最初的频繁切换,在开发效率上已经有了质的提升

一起学习,加群交流看 沸点

分类:
前端