我正在使用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';
,它根本没有被编译/编译。
有人有想法,问题可能是什么?
答案 0 :(得分:0)
绝对不会让作者感兴趣,但无论如何都可能会有所帮助。
对于TS + Webpack + React有同样的问题。
添加简单的 .babelrc 文件,例如
{
"presets": [
["latest", { "es2015": { "loose": true } }]
],
"env": {},
"comments": true
}
解决了这个问题。