ParcelJS 2.0.0-rc.0构建后fractional模块报Fraction未定义如何解决

该问题由Parcel 2.0.0-rc.0 生产构建逻辑和fractional@1.0.0包不规范的ESM导出适配冲突导致，添加的.d.ts类型声明文件只能解决TS类型校验报错，对JS运行时的变量未定义问题完全无效，因此之前的尝试无法生效。
开发环境正常运行是因为Parcel开发模式不会做激进的tree shaking和模块合并，而生产构建时会把fractional包中不符合ESM规范的命名导出绑定误判为未引用的废弃代码删除，最终导致运行时找不到Fraction变量。

按优先级从高到低尝试：

• 修改导入方式
  直接替换recipeView.js中的导入语句为默认导入，适配fractional包的实际导出格式：

  // 替换原来的 import { Fraction } from 'fractional'
  import Fraction from 'fractional'
  

  修改后原有new Fraction()的调用代码不需要做任何改动，重新构建部署即可。

• 升级Parcel到稳定版本
  当前使用的Parcel 2.0.0-rc.0是未正式发布的候选版本，存在大量已知的模块解析bug，直接升级到最新的2.x稳定版即可解决构建兼容问题：

  1. 先卸载旧版本相关依赖：

     npm uninstall parcel @parcel/transformer-image @parcel/transformer-sass
     

  2. 安装最新稳定版依赖：

     npm install --save-dev parcel @parcel/transformer-sass
     

  3. 删除本地node_modules文件夹、package-lock.json文件后重新执行npm install安装依赖，再构建部署即可。

• 替换更规范的第三方依赖
  fractional包已经多年未更新，导出格式适配性很差，可以直接替换为维护更活跃、导出更规范的fraction.js包：

  1. 卸载原有包：npm uninstall fractional
  2. 安装新包：npm install fraction.js
  3. 修改导入语句为：import Fraction from 'fraction.js'
     原有new Fraction()的调用逻辑完全兼容，不需要额外修改。

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