部署Forkify项目到Netlify时出现Fraction未定义引用错误如何解决

• Parcel 2.x 生产构建对ES模块作用域的隔离比开发环境更严格，本地开发时模块间的变量泄露问题在生产构建时被修复，导致未显式导入依赖的模块无法访问其他模块导入的变量
• 你的View.js模块第96行调用了Fraction类，但仅在子类recipeView.js中导入了fractional包的Fraction，ES模块的导入为模块级作用域，子类导入的依赖无法被父类直接访问
• 部分旧版本Parcel 2存在构建时依赖提取bug，若父类方法中使用的依赖仅在子类导入，生产构建会遗漏该依赖的打包
• Netlify构建缓存可能导致旧的异常构建产物未被覆盖

按优先级排序：

1. 直接在View.js顶部显式导入Fraction，添加代码：

import { Fraction } from 'fractional';

这是最稳妥的修复方式，遵循ES模块作用域规范，哪里使用依赖就在哪里导入。
2. 若确认之前的代码是将Fraction挂载到全局window对象使用，需要确保挂载逻辑执行时机早于View.js的执行时机，可将Fraction的导入和挂载逻辑放到项目入口文件（如index.js）最顶部。
3. 清理Netlify构建缓存后重新部署：登录Netlify控制台，进入当前项目的「Deploys」页面，点击「Trigger deploy」下拉选择「Clear cache and deploy site」，排除缓存导致的构建异常。
4. 若上述方案无效，可将Parcel版本降级到教程使用的1.x版本，避免版本差异导致的构建行为不一致：
先卸载当前Parcel依赖：

npm uninstall parcel @parcel/transformer-sass

再安装Parcel 1.x版本：

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

同时修改package.json的构建脚本为Parcel 1的写法：

"scripts": {
  "start": "parcel index.html --open",
  "build": "parcel build index.html --out-dir ./dist"
}

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