2016-10-15 33 views
7

Próbowałem stworzyć demo dla innego pytania SO, najpierw z kątowym-cli, potem z punkerem.Dziwne zachowanie importu skryptu/skryptu numerycznego

Napotkałem na dziwną różnicę w zachowaniu między wersjami import.

Problem jest w drugim import następującego kodu:

moment.service.ts

import { Injectable } from '@angular/core'; 

// Following work in plunker setup 
import m from 'moment'; 
// Following work in angular-cli setup 
//import * as m from 'moment'; 

@Injectable() 
export class MomentService { 
    moment = m; 
} 

W kodzie kątowe-cli, muszę użyć:

import * as m from 'moment'; 

Jeśli korzystam z konfiguracji punker, nieważne w punker lub z lokalnym serwerem, muszę wykonać polecenie lub nie będzie ono działać w przeglądarce:

import m from 'moment'; 

Ktoś może wyjaśnić różnicę w zachowaniu?

Plunker: Link

Github: plunker code local version (obejmują server.js służyć lokalnie)

Github: angular-cli version

Odpowiedz

8

TL: DR Każdy demo używa innego formatu modułu. W plunkerze cały moduł traktowany jest jako domyślny eksport. W projekcie cli nie ma domyślnego eksportu.

Każda wersja demonstracyjna używa innego formatu modułu. Sam plunker nie określa formatu, nie jestem pewien, jaki format domyślnie używa systemsm, ale nie sądzę, że jest to ES6. Projekt CLI korzysta z formatu modułu ES6.

Jeśli spojrzysz na numer here, zobaczysz, kiedy format modułu to AMD, commonjs lub globalny, wyeksportuje cały moduł jako domyślny eksport. Nie stanie się to w przypadku modułów ES6, musisz jednoznacznie zdefiniować domyślny eksport, który nie jest dostępny w wyszukiwarce.

Tak więc, w demo plunkera, import m from 'moment' działa, ponieważ twoja konfiguracja mówi systemjs i maszynopisie, aby traktować cały moduł jako eksport domyślny, jeśli go nie ma. Ze względu na konfigurację w projekcie CLI moduł nie jest traktowany jako domyślny eksport, dlatego należy użyć wartości import * as m from 'moment', która oznacza importowanie wszystkich nazwanych eksportów z momentu w obszarze nazw "m".

Here is a discussion on TypeScript's repo regarding this