Javascript 庫在 Webpack 捆綁后拋出錯誤

Question

我正在使用 Dinero.js 和DefinitelyTyped 庫@types/dinero.js 來提供類型。

我像這樣使用圖書館：

import Dinero = require("dinero.js");

export class Money implements Dinero.DineroObject {
    static fromAmount(amount: number): Money {
        console.log("fromAmount")
        console.log(Dinero)

        let money = new Money()
        money.amount = amount
        money.currency = Money.currency
        money.precision = Money.precision

        console.log(Dinero(money).getAmount())

        return money
    }
}

Money.fromAmount(10)

使用 ts-node 運行腳本時，它工作正常：

fromAmount
{ [Function: Dinero]
  defaultAmount: 0,
  defaultCurrency: 'ZAR',
  defaultPrecision: 2,
  globalLocale: 'en-ZA',
  globalFormat: '$0,0.00',
  globalRoundingMode: 'HALF_EVEN',
  globalFormatRoundingMode: 'HALF_AWAY_FROM_ZERO',
  globalExchangeRatesApi:
   { endpoint: undefined,
     headers: undefined,
     propertyPath: undefined },
  normalizePrecision: [Function: normalizePrecision],
  minimum: [Function: minimum],
  maximum: [Function: maximum] }
10

但是，用 Webpack 打包后，我得到：

fromAmount
Object [Module] {
  default:
   { [Function: Dinero]
     defaultAmount: 0,
     defaultCurrency: 'USD',
     defaultPrecision: 2,
     globalLocale: 'en-US',
     globalFormat: '$0,0.00',
     globalRoundingMode: 'HALF_EVEN',
     globalFormatRoundingMode: 'HALF_AWAY_FROM_ZERO',
     globalExchangeRatesApi:
      { endpoint: undefined,
        headers: undefined,
        propertyPath: undefined },
     normalizePrecision: [Function: normalizePrecision],
     minimum: [Function: minimum],
     maximum: [Function: maximum] },
  defaultCurrency: 'ZAR',
  defaultPrecision: 2,
  globalLocale: 'en-ZA' }
webpack:///./src/models/*.ts?:131
        console.log(Dinero(money).getAmount());
                    ^

TypeError: Dinero is not a function
    at Function.fromAmount (webpack:///./src/models/userscan.ts?:131:21)
    at eval (webpack:///./src/models/transaction.ts?:24:58)
    at Object../src/models/transaction.ts (/home/**/.serverless/**/*.js:18580:1)
    at __webpack_require__ (/home/**/.serverless/**/src/*.js:20:30)
    at eval (webpack:///./src/models/*.ts?:25:23)
    at Object../src/models/payout.ts (/home/**/.serverless/**/*.js:18544:1)
    at __webpack_require__ (/home/**/.serverless/**/*.js:20:30)
    at eval (webpack:///./src/models/scan.ts?:29:18)
    at Object../src/models/scan.ts (/home/**/.serverless/**/*.js:18556:1)

請解釋為什么 webpack 更改了 Dinero 的定義以及如何修復它。

Answer 1

這個導入對我來說似乎很奇怪，它介於 es6 導入和 commonJS 之間。 您可能想選擇其中一個，但不要混淆它們。

import Dinero = require("dinero.js")

我猜 webpack 對此有點瘋狂。 嘗試使用規范的 commonjs 方法來要求它，然后如果它使用 es6 導入工作 go。 最后不要使用.js ，見下文。

const Dinero = require("dinero")

如果上述修復不起作用，您可能必須共享您的 webpack 配置。 webpack 加載程序配置（例如 Babel）可能有問題。