如何在 React 应用程序中动态导入 moment.js（使用打字稿）

Question

我正在尝试进行一些代码拆分，moment.js 是我想在单独的块中隔离的目标包之一。我是这样做的：

const myFn = async (currentNb) => {
   const moment = (await import('moment')).default()          
   const dateUnix: number = moment(currentNb).valueOf()
   [...]
}

但我收到以下错误：this expression is not callable. Type Moment has no call signatures。所以我想我应该做类似 moment.valueOf(currentNb) 的事情，但我不太确定。有人可以对此有所了解吗？提前致谢

Answer 1

显然我的语法不正确。我终于找到了解决这个问题的方法。我需要按如下方式导入它：

const {default: moment} = await import('moment')

我在webpack文档中找到了答案：

The reason we need default is that since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of module.exports, it will instead create an artificial namespace object for the CommonJS module.

如何在 React 应用程序中动态导入 moment.js（使用打字稿）

How to dynamically import moment.js in a react app (with typescript)

javascript

reactjs

momentjs

code-splitting