1

私は Webpack を使用しており、angular2 を使用しようとしています。

そのため、typescript をコンパイルできるようにすべてのものを編集しました。私が計画したのは、ここのようにすることだったので、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"
  ]
}

そして、それが webpack 構成のローダー構成です。

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

また、ターゲットを es5 に、モジュールを es2015 に設定するなど、compilerOptions を試してみましたが、うまくいきません。私はいつも同じエラーを受け取ります: Unexpected token importangular2Component-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';ください。まったくコンパイル/トランスパイルされていない同じ行がまだあります。

問題が何であるか、誰かが考えを持っていますか?

4

1 に答える 1

0

間違いなく、著者はもう興味を持っていませんが、とにかく役立つ可能性があります.

TS + Webpack + Reactでも同じ問題がありました。

次のような単純な.babelrcファイルを追加する

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

問題を解決しました。

于 2017-01-03T11:33:09.447 に答える