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

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

然而我们更希望和哪位后端同学进行联调，就执行 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 的话，地址是频繁变化的，每次变化后都需要手动更新原有地址。但相比最初的频繁切换，在开发效率上已经有了质的提升

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