1

gulp 内で webpack の ts-loader を使用して Typescript プロジェクトをビルドしようとしています。次のエラーが発生します。

stream.js:74 throw er; // パイプで未処理のストリーム エラー。^ エラー: ./app/react/helloDirective.tsx モジュールの解析に失敗しました: C:...\app\react\helloDirective.tsx 予期しないトークン (1:13) このファイル タイプを処理するには、適切なローダーが必要な場合があります。SyntaxError: Unexpected token (1:13) at Parser.pp.raise (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13) at Parser.pp.unexpected (C:. ..\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8) で Parser.pp.expectContextual (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1449: 39) Parser.pp.parseImport (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2254:10) で Parser.pp.parseStatement (C:...\node_modules\webpack\) でnode_modules\acorn\dist\acorn.js:1762:60) で Parser.pp.parseTopLevel (C:... \node_modules\webpack\node_modules\acorn\dist\acorn.js:1666:21) の Parser.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1632:17) のオブジェクト.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:885:44) で Parser.parse (C:...\node_modules\webpack\lib\Parser.js:902: 15) DependenciesBlock で。(C:...\node_modules\webpack\lib\NormalModule.js:104:16)

tsconfig.json

{
"compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": false,
        "jsx": "react",
        "target": "ES5",
        "moduleResolution": "classic",
        "experimentalDecorators": true,
        "allowJs": true
},
"exclude": ["node_modules", "typedefinitions"]
}

gulpfile.js

gulp.task('compileReactApp', function(){
return gulp.src(["app/react/helloDirective.tsx"])
.pipe(webpack({
    debug: true,  
      output: {
        filename: "reactapp.js"
      },
      resolve: {
        extensions: ['', '.tsx', '.ts', '.js']
      },
      module: {
        loaders: [
          { test: /\.(tsx|ts|js)$/, loaders: ['ts-loader'], include:["app"], exclude: ["node_modules"]}
        ]
      }})
).pipe(gulp.dest("./generated/"));
});

helloDirective.tsx

import React = require('react');
import ReactDOM = require('react-dom');
import Hello = require("./hello.react");

App.Common.commonModule.directive("ReactHello", () => {
return {
    link(scope: any, element: any): void {
        ReactDOM.render(<Hello/>, element);
        element.on('$destroy', () => {

        });
    }
}
});

hello.react.tsx

"use strict";
import React = require("react");

class Hello extends React.Component<any, any> {
render() {
    return <div>
        <span>Hello World!</span>
    </div>; 
}
}

export = Hello;
4

2 に答える 2

1

ts-loader は typescript のみを変換すると思います。es6 および jsx 構文を変換するには、babel-loaderを webpack 構成に追加する必要があります。

于 2016-07-10T20:30:14.180 に答える