为何parcel-bundler处理最简单的任务也会失败？

我之前也碰到过类似的诡异问题，大概率是旧版Parcel和你的Node环境兼容性导致的内置loader解析异常，给你几个实用的解决方案：

• 降级Parcel到稳定兼容版本
  Node 10.16.3和新版Parcel存在适配问题，建议先卸载全局的Parcel，安装一个经过验证的稳定版本：

  npm uninstall -g parcel-bundler
  npm install -g parcel-bundler@1.12.5
  

• 简化样式文件的扩展名
  你的代码是纯CSS，没必要用.scss扩展名，把文件重命名为styles.css，再修改HTML里的引入路径：

  <link rel="stylesheet" href="./styles/styles.css">
  

  这样Parcel会直接用CSS loader处理，跳过SCSS解析步骤，避免不必要的错误触发。

• 清理Parcel缓存文件
  有时候Parcel的缓存损坏会引发奇怪的解析问题，先删掉缓存和构建产物再重试：

  # Mac/Linux 环境
  rm -rf .cache dist
  # Windows 命令行环境
  rd /s /q .cache dist
  

  之后重新运行parcel index.html即可。

• 改用项目本地安装Parcel
  全局安装的包容易和项目依赖产生冲突，建议在项目内本地安装：

  1. 初始化项目（如果还没做）：

     npm init -y
     

  2. 安装Parcel到开发依赖：

     npm install parcel-bundler@1.12.5 --save-dev
     

  3. 在package.json中添加启动脚本：

     "scripts": {
       "dev": "parcel index.html"
     }
     

  4. 通过脚本启动项目：

     npm run dev
     

这个错误的本质是旧版Parcel的内置css-loader在特定场景下，错误地将CSS内容当作JSON解析，从而触发了JSON5的语法报错。上面的方案应该能帮你解决问题。

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