2016-09-30 4 views
0

Ich verwende Webpack und versuche, angular2 zu verwenden.Kompilieren/Transpilieren von Typescript zu ES5 funktioniert nicht

Deshalb habe ich alle meine Sachen bearbeitet, um Typoskript kompilieren zu können. Was ich geplant habe, war es, es wie here zu tun, also das Typoskript zu ES6 zu kompilieren und es dann mit Babel auf ES5 zu transponieren.

Dies ist, wie meine kleine App aussieht:

import {Component} from 'angular2/core'; 


@Component({ 
    selector: 'angular-2-component', 
    template: '<h1>Hello World!</h1>' 
}) 

export class angular2Component { 
} 

Dann ist, wie mein tsconfig.json wie folgt aussieht:

{ 
    "compilerOptions": { 
    "target": "es6", 
    "module": "es6", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "typeRoots": [ 
     "../node_modules/@types" 
    ], 
    "types" : [] 
    }, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

Und dass die Loader-Konfiguration in der webpack Config:

Ich habe auch versucht, mit den CompilerOptionen zu spielen etc ... Aber es funktioniert nicht. Ich bekomme immer den gleichen Fehler: Unexpected token import, zeigt auf die erste Zeile der angular2Component-App. Also weiß es nicht Import. Auch in Browser können Sie sehen, dass nur der @Component Teil erstellt werden, scheint/transpiled korrekt, dann wie folgt aussehen:

export let angular2Component = class angular2Component {}; 
    angular2Component = __decorate([Component({ 
     selector: 'angular-2-component', 
     template: '<h1>Hello World!</h1>' 
    }), __metadata('design:paramtypes', [])], angular2Component); 

Aber schreiben darüber, gibt es immer noch die gleiche Linie import {Component} from 'angular2/core';, die nicht kompiliert/überhaupt transpiliert.

Hat jemand eine Idee, was das Problem sein könnte?

Antwort

0

Definitiv ist der Autor nicht mehr interessiert, könnte aber trotzdem helfen.

Hatte das gleiche Problem für TS + Webpack + React.

eine einfache .babelrc Datei hinzufügen, wie

{ 
    "presets": [ 
     ["latest", { "es2015": { "loose": true } }] 
    ], 
    "env": {}, 
    "comments": true 
    } 

das Problem gelöst.

Verwandte Themen