ParcelJS构建不支持小数模块

Question

我正在HTML, CSS和JS中构建一个模拟应用程序。然而，在运行'npm run build'压缩，构建和捆绑dist文件夹中的文件并上传到netlify服务器以测试构建版本后，它会抛出未捕获的ReferenceError:赋值给未声明的变量fraction

我已经通过'npm I fractional'安装了分数模块，应用程序的开发版本运行良好。用于捆绑应用的package版本是2.0.0-rc.0

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

分数模块使用的是在一个。JS文件中用于计算要在特定配方中使用的成分的数量，该模块导入到JS文件的方式是通过import命令，即。import {Fraction} from ' Fraction '.

来自recipeView.js的代码片段，其中使用了Fractional模块。

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)). join ()}'

`

下面是package。json文件'

"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"
}

任何帮助/建议/意见都是非常感谢的。

Answer 1

在您的package.json文件(dependencies字段):

• 将fractional替换为fracty(使用合适的版本，例如1.0.9)

在您的recipeView.js文件:

• 从fracty导入fracty
• 用fracty代替new Fraction