如何解决Parcel导致HTML链接被识别为JS文件的语法报错问题？

这种Unexpected token '<'的报错我之前在Parcel多页面项目里也踩过坑，本质就是浏览器请求JS资源时，服务器返回的却是HTML内容——JS解析器一碰到<html>这种标签直接懵了，自然抛出语法错误。结合你的项目（用JavaScript+Node.js+Google Charts，多HTML文件），咱们一步步排查解决：

1. 先确认Parcel的入口配置和资源引用路径 #

• 先看package.json里的source字段，是不是正确指向了src/covid19下的所有HTML文件？或者启动Parcel的命令有没有指定对入口？比如正确的启动命令应该是：parcel src/covid19/*.html，确保Parcel能识别所有HTML作为入口。
• 检查每个HTML里的JS引用路径，别用绝对路径（比如/js/chart.js），开发服务器下很可能找不到对应的资源，导致返回HTML（比如404页面）。换成相对路径（比如./chart.js），让Parcel自动帮你处理路径映射。

2. 排查Parcel开发服务器的路由问题 #

• Parcel默认会处理多页面的路由，但如果你的项目有自定义路由逻辑，或者刷新子页面时，服务器可能返回首页HTML而不是对应的JS chunk，这就会触发报错。
• 试试给Parcel加--public-url参数指定公共路径，比如：parcel src/covid19/*.html --public-url ./，这样资源路径都会以相对路径加载，避免路由匹配错误。

3. 检查Google Charts的加载方式有没有冲突 #

• Google Charts一般是通过HTML里的<script>标签加载外部API，别把这个加载逻辑写到本地JS里让Parcel打包，很容易导致路径解析混乱。
• 正确的姿势应该是在HTML里直接引入：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="./your-chart-code.js"></script>
  

  让Google Charts的脚本单独加载，本地JS只负责初始化图表逻辑。

4. 清理Parcel缓存再重新打包 #

• Parcel的缓存有时候会抽风，导致资源映射错乱。先删掉缓存和打包产物，再重新启动：

  rm -rf .parcel-cache dist
  parcel src/covid19/*.html
  

5. 用浏览器开发者工具验证资源响应 #

• 按F12打开开发者工具，切到网络标签，刷新页面找到报错的那个JS文件（比如xxxxx.js），看它的响应内容。如果返回的是HTML代码，那实锤是路径问题导致服务器返回了HTML而非JS。
• 根据返回的HTML是404页面还是首页，再进一步定位是路径写错了，还是服务器路由配置出问题。

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