react实现类似vue-cli脚手架的自动更换已被占用端口

问题背景:不是通过react脚手架搭建的项目不能实现自动更换已被占用端口号.直接npm start会导致项目启动失败，手动修改端口号又过于麻烦，更加可能出现的是某一次复制后，启动前忘记了修改端口，发现启动失败，找了一会错误，以为是node_module或者其它的问题，到最后才发现是端口被占用，白白浪费时间。（PS：react脚手架不需要该设置，它已经集成了检测端口是否被占用并提示更换端口的功能）
##正文开始--------------
在react的webpack.config.js文件里引入portfinder,这个插件能检查哪个端口未被占用和已占用，在devServer配置里通过异步请求promise返回未被占用的端口，注册到devServer的端口配置里。

const portfinder = require('portfinder');

port: new Promise((resolve, reject) => {
      portfinder.getPort({port: 8081,stopPort: 9999 }, (err, port) => {
        if (port){
          console.log('项目运行端口：' + port)
          resolve(port);
        }else{
          reject(8081)
        }
      })
    }),

portfinder若是node_module里面没有，请用install安装npm install portfinder, 一般react项目默认会关联安装的。portfinder.getPort({port: 8081,stopPort: 9999 }的意思是指定检查从8081到9999之间的端口号，若是不定义的话会从8000开始检测
最初曾尝试使用以下代码

port: function(){
      return portfinder.getPort({port: 8081,stopPort: 9999 }, (err, port) => {
        if (port){
          console.log('稍后执行')
          console.log('项目运行端口：' + port)
          return port;
        }
      })
      console.log('最先运行'+port)
    }(),

但是发现有个小问题，因为react默认端口和js解析与运行顺序的问题，会导致port会先返回undefined，再返回portfinder执行后的结果，这样就导致一个问题，项目能正常启动，但是端口不是portfinder返回的端口，而是项目在其它地方定义好的默认端口（我这里是8080，当然，如果8080已经被占用了，它会使用8081）。原因就是js的先后执行顺序问题，规则若不懂，自己去补习js基础(js运行顺序)，所以后面就有了上面的异步请求promise。这样就解决了上述的问题