从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编译/运行不起作用

回答

相关问题