시스템JS와 함께 TypeScript에서 momentjs를 어떻게 사용합니까?

시스템JS와 함께 TypeScript에서 momentjs를 어떻게 사용합니까?

제 프로젝트의 설정에는 라이브러리를 위한 'jspm' 도구와 타이핑을 위한 'tsd' 도구가 포함되어 있습니다.

Moment의 TypeScript d.ts 파일(이것들)을 설치한 후, 저는 Moment 인스턴스를 로드하고 실제로 사용할 방법을 찾을 수 없습니다.

내 파일에서(시스템 사용)JS 모듈 로딩)

/// <reference path="../../../typings/tsd.d.ts" />
import * as moment from "moment";
import * as _ from "lodash";
...
...
const now = (this.timestamp === 0) ? moment() : moment(this.timestamp);

"TypeError: moment is not function"(유형 오류: 모멘트가 함수가 아닙니다)라는 메시지가 표시됩니다.

정의는 lodash와 동일하게 구성되어 있어서 작동이 잘 되는데, 무엇이 원인인지 모르겠습니다.

누가 도와줄 수 있습니까?

다음을 수행했습니다.

는 습했니다를 설치했습니다.moment 정의 파일은 다음과 같습니다.

tsd install moment --save

그런 다음 main.ts를 만들었습니다.

///<reference path="typings/moment/moment.d.ts" />

import moment = require("moment");
moment(new Date());

그리고 나는 도망쳤습니다.

$ tsc --module system --target es5 main.ts # no error 
$ tsc --module commonjs --target es5 main.ts # no error 

main.js다음과 같이 표시됩니다.

// https://github.com/ModuleLoader/es6-module-loader/blob/v0.17.0/docs/system-register.md - this is the corresponding doc
///<reference path="typings/moment/moment.d.ts" />
System.register(["moment"], function(exports_1) {
    var moment;
    return {
        setters:[
            function (moment_1) {
                // You can place `debugger;` command to debug the issue
                // "PLACE XY"
                moment = moment_1;
            }],
        execute: function() {
            moment(new Date());
        }
    }
});

내 TypeScript 버전은 1.6.2입니다.

제가 알아낸 것은 다음과 같습니다.

Momentjs는 함수(즉, 함수)를 내보냅니다._moment = utils_hooks__hooks그리고.utils_hooks__hooks함수라는 것은 아주 분명합니다.

만약 당신이 내가 말한 장소에 브레이크포인트를 설치한다면,PLACE XY위에서, 당신은 그것을 볼 수 있습니다.moment_1개체(!)이며 함수가 아닙니다.관련 라인: 1, 2

결론적으로 이 문제는 TypeScript와 관련이 없습니다.문제는 systemjs가 momentjs가 함수를 내보내는 정보를 보존하지 않는다는 것입니다.Systemjs는 내보낸 객체의 속성을 모듈에서 복사하기만 하면 됩니다(JavaScript에서도 함수는 객체입니다).그들이 버그(또는 기능)로 간주하는지 확인하려면 systemjs 저장소에 문제를 제기해야 할 것 같습니다.

버전 2.13부터 모멘트에는 유형 스크립트 유형이 포함되어 있습니다.사할필없을 사용할 .tsd(또는)typings더 이상 더 이상.

systemjs.config.js하십시오: " ", ", ", "

  var map = {
    // (...)
    moment: 'node_modules/moment',      
  };

  var packages = {
    // (...)
    moment: { main: 'moment.js', defaultExtension: 'js' },
  };

모듈에서는 다음과(와)

import moment = require('moment')

프록시 제한으로 인해 npm을 사용할 수 없었기 때문에 (따라서 라이브러리를 수동으로 설치해야 했기 때문에) 이 작업을 수행하는 데 큰 어려움을 겪었습니다.모멘트 버전과 확실하게 유형화된 파일이 프로젝트의 적절한 위치에 설치되어 있는 경우, 이 작업을 수행할 수 있습니다.

여기 moment.js 웹 사이트에 moment 스크립트를 구성하는 데 유용한 참고 사항이 있습니다.제 경우에 도움이 된 주요 측면은 my tsconfig.json 파일의 컴파일러 옵션 섹션에서 다음을 추가하는 것이었습니다.

"allowSyntheticDefaultImports": true

이것은 Angular 2와 함께 작동하지만 특정하지 않아야 합니다.moment.min.js.

인system.config.js:

// map tells the System loader where to look for things
var map = {
  'app':                        'app', // 'dist',

  '@angular':                   'node_modules/@angular',
  'rxjs':                       'node_modules/rxjs',

  // tell system where to look for moment
  'moment':                     'node_modules/moment/min'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
  'app':                        { main: 'main.js',  defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },

  // tell system which file represents the script when you import
  'moment':                     { main: 'moment.min.js', defaultExtension: 'js'}
};

모듈에서:

import moment from 'moment';

OR(2016년 10월 13일 편집):

import * as moment from 'moment';

몇몇 댓글들은 다음과 같은 글을 올렸습니다.import *위의 구문과 몇 가지 업그레이드 후에도 구문으로 전환해야 했습니다(이유는 확실하지 않습니다).

내 유형 스크립트 파일에서 사용할 때

import moment from 'moment';

모듈 '모듈'을 찾을 수 없다고 표시됩니다.제가 moment를 npm 패키지로 설치했는데 제대로 참조가 되었는데, 그 이유로 moment.d.ts가 아래와 같이 네임스페이스가 아닌 모듈로 내보내기 때문에 참조할 수 없습니다.

export = moment; 

그래서 만약 제가 그것을 바꾼다면.

declare module 'moment' {
    export default moment;
}

가져오기가 완벽하게 작동합니다.내가 여기서 뭘 잘못하고 있는 거지?

클라이언트 측 개발 또는 서버 측(예: node.js)에 모멘트를 사용하려고 하는지는 다소 분명하지 않습니다.하지만 고객님의 사례가 프런트엔드의 경우, 저는 순간을 매우 쉽게 사용할 수 있었습니다.

프로젝트에 파일을 추가했습니다.

간단한 테스트 코드 작성:

window.onload = () =>
{
    var timestamp: number = 111111111111111;
    var momentResult: moment.Moment = moment(timestamp);
    alert(momentResult.toISOString());
};

그리고 제 프로젝트는 잘 구축되었고 브라우저에서 테스트 경고를 보았습니다.

방금 내 프로젝트에서 그것을 했습니다.그것은 각진 것이지만, 저는 그것이 중요하지 않다고 생각하고 당신을 올바른 길로 이끌지도 모른다고 생각합니다.다음과 같이 쉽습니다.

import MomentStatic = moment.MomentStatic;

class HelpdeskTicketController {
  constructor(private moment: MomentStatic) { // angulars dependency injection, you will have some global probably
    let d = this.moment(new Date()); // works
    console.log(d.add(2, 'hours').format()); // works
  }

  ...

다음을 사용하여 모멘트가 설치되었다고 가정합니다.

jspm install moment

config.js의 map 섹션에 항목이 추가됩니다.

...
"moment": "npm:moment@2.10.6",
...

이러한 방식으로 JS 파일의 모멘트에 액세스할 수 있습니다.

import moment from 'moment';

console.log(moment().format('dddd, MMMM Do YYYY, h:mm:ss a'));

가져올 때* as moment모듈 네임스페이스를 가져옵니다.따라서 모멘트는 속성이 모듈 내보내기인 객체가 될 것입니다.이렇게 하면 기본 내보내기가 moment.default가 아닌 moment.default로 가져옵니다.그래서 뭐 그런 거.

moment.default().format('dddd, MMMM Do YYYY, h:mm:ss a')

사용자 코드에서 실제로 작동할 수는 있지만 사용하려는 방식은 아닙니다.

저는 VS 2015(업데이트 3)와 함께 웹팩을 사용합니다.그래서 패키지 코드를 추가한 후에.json 및 webpack.config.dll.js 파일, 나는 내 구성 요소(TypeScript, Angular 2)의 맨 위에 있는 import moment = require('')를 호출하기만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/33938561/how-to-use-momentjs-in-typescript-with-systemjs