ParcelJS 构建不支持小数模块答案

【问题标题】：ParcelJS build is not honoring fractional moduleParcelJS 构建不支持小数模块
【发布时间】：2021-08-29 19:27:28
【问题描述】：

我正在用 HTML、CSS 和 JS 构建一个模拟应用程序。但是，在运行“npm run build”以压缩、构建和捆绑 dist 文件夹中的文件并上传到 netlify 服务器以测试构建版本之后，它正在抛出 "Uncaught ReferenceError: assignment to undeclared variable Fraction"

我已经通过“npm i fractional”安装了分数模块，并且该应用程序的开发版本运行良好。用于捆绑应用的 Parcel 版本为 2.0.0-rc.0

我尝试创建一个名为 index.d.ts 的额外文件，其中我按照 JS 的建议声明模块即声明模块“分数”并尝试使用此构建版本在 netlify 上运行应用程序，但没有运气。

分数模块用于 .js 文件之一，用于计算特定配方中要使用的成分的数量，模块导入 JS 文件的方式是通过导入命令，即从“分数”导入 { Fraction }。

使用 Fractional 模块的 recipeView.js 中的代码 sn-p。


    import { Fraction } from 'fractional';
    
    export class RecipeView extends View {
      // Method to generate ingredients list
      _ingredientsList(ing) {
        return `
            <li class="recipe__ingredient">
                <svg class="recipe__icon">
                <use href="${icon}#icon-check"></use>
                </svg>
                <div class="recipe__quantity">${
                  ing.quantity ? new Fraction(ing.quantity).toString() : ''
                }</div>
                <div class="recipe__description">
                <span class="recipe__unit">${ing.unit}</span>
                ${ing.description}
                </div>
            </li>
        `;
      }
    }

上述受保护的方法在同一个类中用于生成标记。 _generateMarkup() { return 配方成分 ${this._data.ingredients .map(ing => this._ingredientsList(ing)) 。加入（''）} `

下面是 package.json 文件中的代码 sn-p `

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist"
  },
  "author": "ABC",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-image": "^2.0.0-rc.0",
    "@parcel/transformer-sass": "^2.0.0-rc.0",
    "@types/regenerator-runtime": "^0.13.1",
    "parcel": "^2.0.0-rc.0"
  },
  "dependencies": {
    "fractional": "^1.0.0"
  }

任何帮助/建议/建议都在这里表示赞赏。

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。
当然。下面是 package.json 文件中的代码

标签： javascript parceljs

【解决方案1】：

在您的package.json 文件（dependencies 字段）中：

将fractional 替换为fracty（使用适当的版本，例如1.0.9）

在您的recipeView.js 文件中：

从fracty导入fracty
将new Fraction 替换为fracty

【讨论】：