從Typescript到ES5編譯/運行不起作用

我正在使用Webpack並嘗試使用angular2。從Typescript到ES5編譯/運行不起作用

這就是爲什麼我編輯我所有的東西，以便能夠編譯打字稿。我的計劃是像here這樣做，因此將打字稿編譯爲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" 
    ] 
}

這就是在配置的WebPack裝載機配置：

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

我也試着玩compilerOptions，設置目標爲es5，模塊爲es2015，等...但它不工作。我總是得到相同的錯誤：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';，未編譯/根本沒有被轉譯。

有沒有人有想法，問題可能是什麼？

來源

2016-09-30 user6903483

當然作者不再感興趣，但無論如何可能有一些幫助。

對TS + Webpack + React有同樣的問題。

添加一個簡單的.babelrc文件，像

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

解決了這個問題。

來源

2017-01-03 11:33:09 Yaroslav

從Typescript到ES5編譯/運行不起作用

回答

相關問題