2016-09-30 6 views
0

Webpack을 사용하고 angular2를 사용하려고합니다.Typescript에서 ES5 로의 컴파일/변환이 작동하지 않습니다.

그래서 내가 타이프 스크립트를 컴파일 할 수 있도록 모든 것을 편집했습니다. 내가 계획 한 내용은 here과 같았습니다. 따라서 typescript를 ES6으로 컴파일 한 다음 Babel로 ES5로 옮깁니다.

이 내 작은 응용 프로그램 모양을,이다 :

import {Component} from 'angular2/core'; 


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

export class angular2Component { 
} 

을 그리고 이것이다,처럼 내 tsconfig.json 모양을 : 그게 웹팩 설정에서 로더 구성의

{ 
    "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" 
    ] 
} 

그리고 :

{ 
    test: /\.ts(x?)$/, 
    loader: 'babel-loader!ts-loader' 
} 

나는 또한 compilerOptions를 사용하여 목표를 es5로, 모듈을 es2015로, etc ...하지만 작동하지 않습니다. 나는 항상 같은 오류를 얻고있다 : Unexpected token import, angular2Component-App의 첫 번째 줄을 가리킨다. 그래서 그것은 수입을 모릅니다. 또한, 브라우저에서, 당신은 단지 @Component 부분은 다음과 같이보고, 제대로 transpiled/컴파일 것으로 보인다 것을 볼 수 있습니다

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

그러나 그 위에 쓰기, 여전히 컴파일되지 같은 줄 import {Component} from 'angular2/core';, 거기에/전혀 말랐다.

아무도 아이디어가 없습니까? 문제는 무엇입니까?

답변

0

분명히 저자는 더 이상 관심이 없지만 어쨌든 도움이 될 수 있습니다.

TS + Webpack + React에 대해 동일한 문제가있었습니다.

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

같은 간단한 .babelrc 파일을 추가

이 문제를 해결했다.

관련 문제