遗留Web应用编译正常但浏览器报SyntaxError: Unexpected token {排查咨询

我来给你梳理几个最常见的排查方向，都是处理这类遗留项目时踩过的坑，一步步来应该能定位到问题：

• 先定位报错的具体代码位置
  打开浏览器控制台的「Sources」面板，找到报错提示里的文件名和行号，直接跳转到对应位置看代码。大概率是这一行（或附近）的{使用不符合当前浏览器能解析的语法：

  • 比如用了ES6的解构赋值（const {a, b} = obj）、箭头函数（() => {}）但没经过Babel转译，旧浏览器不识别这些语法；
  • 也可能是代码本身的语法错误，比如对象字面量少了逗号、函数定义的括号和{不匹配之类的低级错误。

• 检查构建工具的转译配置
  既然编译时没报错，不代表转译完全到位：

  • 确认Babel的preset-env是不是配置了正确的目标浏览器范围，比如有没有漏掉旧浏览器的适配；
  • 检查Webpack/Rollup等工具是不是把所有需要转译的文件都包含了，比如第三方依赖里如果有用ES6语法的，有没有配置exclude/include规则把它们也加入转译。

• 排查文件加载顺序与依赖问题
  遗留项目对脚本加载顺序往往很敏感：

  • 看看HTML里的<script>标签顺序，是不是把依赖库（比如jQuery、Underscore）放在了业务代码后面？导致业务代码执行时依赖还没加载，解析语法时出错；
  • 如果用了async或defer属性，有没有考虑到异步加载带来的顺序变化？有些遗留代码是依赖同步加载顺序的。

• 检查文件的MIME类型与完整性
  这个容易被忽略，但也很常见：

  • 打开控制台的「Network」面板，找到报错的JS文件，查看它的「Content-Type」响应头，是不是application/javascript？如果返回的是text/html或者其他类型，浏览器会把文件内容当成HTML解析，自然会出现语法错误；
  • 同时查看文件的响应内容，是不是完整的？有没有在构建或传输过程中被截断，导致代码不完整出现语法错误。

• 验证浏览器兼容性
  如果你的应用需要兼容旧浏览器（比如IE11），可以先换现代浏览器（Chrome、Firefox）测试：

  • 如果现代浏览器能正常加载，那基本就是旧浏览器不支持ES6+语法的问题，需要补充Babel转译或者添加polyfill；
  • 如果现代浏览器也报错，那大概率是代码本身的语法错误或加载问题。

内容的提问来源于stack exchange，提问作者Vnuuk