Ionic 2：如何修复 moment.js 错误的使用

Posted 2023-03-13

【中文标题】Ionic 2：如何修复 moment.js 错误的使用

【英文标题】：Ionic 2: How to fix usage of moment.js errors

【发布时间】：2017-02-12 15:33:11

【问题描述】：

自从更新到 RC.0 后，我收到以下与 moment.js（我通过 npm 安装）有关的构建错误：

[13:44:16]  Error: Cannot call a namespace ('moment')

我尝试过以两种方式引用时刻：

import * as moment from 'moment'; import moment from 'moment'

错误是一样的。

问）我做错了什么？这在 RC.0 之前有效

【问题讨论】：

我遇到了同样的问题，看起来这是一个已知问题 - github.com/driftyco/ionic-app-scripts/issues/68

【参考方案1】：

使用import * as Moment from 'moment'; 我收到错误：无法调用命名空间（'Moment'）。

将其更改为 import Moment from 'moment'; 解决了该问题。

【讨论】：

import Moment from 'moment' 不被 typescript 编译器接受（至少 2.1.6）

【参考方案2】：

您是否已经两次检查了您所做更改的所有项目文件，因为听起来您可能只是错过了一个？

尝试从

更改 moment-node.d.ts

出口=时刻； 到 导出默认时刻；

这将暴露所有丢失的文件。 （然后改回来。）

【参考方案3】：

您需要在 tsconfig 中的类型中添加 moment

  "compilerOptions": 
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "moment" <====== THIS
    ]
  ,
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": 
    "rewriteTsconfig": false
  

另外，需要在@ionic的rollup.config.js中添加commonjs中对moment的引用

var ngTemplate = require('../dist/plugins/ng-template').ngTemplate;
var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');

// https://github.com/rollup/rollup/wiki/javascript-API

var rollupConfig = 

  useStrict: false,

  /**
   * entry: The bundle's starting point. This file will
   * be included, along with the minimum necessary code
   * from its dependencies
   */
  entry: './.tmp/app/main.dev.js',

  /**
   * sourceMap: If true, a separate sourcemap file will
   * be created.
   */
  sourceMap: true,

  /**
   * format: The format of the generated bundle
   */
  format: 'iife',

  /**
   * dest: the output filename for the bundle in the buildDir
   */
  dest: 'main.js',

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    ngTemplate(),
    commonjs(
        include: [
        'node_modules/moment/**'
        ]
    ),
    nodeResolve(
      module: true,
      jsnext: true,
      main: true,
      browser: true,
      extensions: ['.js']
    )
  ]

;  

if (process.env.IONIC_ENV == 'prod') 
  // production mode
  rollupConfig.entry = '.tmp/app/main.prod.js';
  rollupConfig.sourceMap = false;


module.exports = rollupConfig;

【讨论】：

这也适用于 firebase 和 lodash，我想还有其他 3rd 方框架。

它不起作用：我仍然有消息：无法调用命名空间（'moment'）

【参考方案4】：

这是我为使用 typescript（2.1.6 版本）和 rollup（0.41.4）制作工作时刻所做的。

导入时刻，保持标准方式：

import * as moment from 'moment';

import moment from 'moment'; 对于没有默认导出的包来说是非标准的，它会在运行时导致错误：moment_1.default is not a function

在 typescript 中通过将 moment 转换为 any 来使用 moment，并调用 default 函数：

var momentFunc = (moment as any).default ? (moment as any).default : moment;
var newFormat = momentFunc(value).format( format );

moment(value).format(format) 将在汇总树摇动时导致错误：Cannot call a namespace ('moment')