记一次兼容问题处理过程

场景

ios9.3.2 app内嵌vue-cli构建的移动端网站

现象

客户反映app点一个按钮跳的页面是空白

定位问题

通过沟通确定不是网络问题之后，
让客户用浏览器直接打开我们的网站链接，发现仍然打不开，排除了app的原因。
询问客户系统版本，发现是ios9.3.2,版本较低，考虑是兼容问题
于是用xcode模拟了ios9系统，使用safari打开h5链接，复现了打不开的bug，控制台提示 SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode. 奇怪了 明明用babel转了es6的语法 怎么还出现了const,不过好在问题是锁定了，基本完成了一大步

解决问题

• 第一步 查看bable配置,并没有什么不对

{
    "presets": [
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }],
      "stage-2"
    ],
    "plugins": ["transform-vue-jsx", "transform-runtime"],
    "env": {
      "test": {
        "presets": ["env", "stage-2"],
        "plugins": ["transform-vue-jsx", "istanbul"]
      }
    }
  }

• 第二步 直接查看webpack打包后的app.js,全局搜索const（注意末尾加空格），发现一个const都没有，app.js也就是业务代码应该是正常转化过了，进一步说明babel工作正常
• 第三步 找到打包后的vendor.js,重复第二步操作，找到了const！！vendor.js是webpack打包node_modules下的文件后生成的，说明引入了未转化的包，然后在node_modules下搜索const，最终定位在了query-string这个包的源码里
• 第四步 删除了query-string，去工具库里找了个想同功能的方法代替
• 第五步 xcode模拟ios9打开网站没有问题，真机ios9测试打开网站没有问题

反思

1、有人反映bug，首先应问清楚具体环境，浏览器类型、浏览器版本、系统版本等等,然后尽可能复现bug，是定位问题的最佳方式
2、引入第三方包需谨慎，默认node_modules下的文件是不会babel处理的