从Typescript到ES5的编译/传输不起作用

时间:2016-09-30 08:02:49

标签: typescript webpack ecmascript-6 babeljs es6-modules

我正在使用Webpack并尝试使用angular2。

这就是我编辑所有东西以便能够编写打字稿的原因。我计划的是像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部分似乎正确编译/转换,然后看起来像这样:

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';,它根本没有被编译/编译。

有人有想法,问题可能是什么?

1 个答案:

答案 0 :(得分:0)

绝对不会让作者感兴趣,但无论如何都可能会有所帮助。

对于TS + Webpack + React有同样的问题。

添加简单的 .babelrc 文件,例如

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

解决了这个问题。