gulp内のwebpack用のts-loaderを使用してTypescriptプロジェクトを構築しようとしています。次のエラーを取得する：モジュールの解析に失敗しました：Webpack Typescript Loaderの予期しないトークン
ストリーム.js：74 throw er;パイプ内の未処理のストリームエラー。 ^ エラー：./app/react/helloDirective.tsx モジュールの解析に失敗しました：C：... \ app \ react \ helloDirective.tsx予期しないトークン（1:13） このファイルを処理するには適切なローダーが必要な場合がありますタイプ。 SyntaxError：Parser.pp.raise（C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：923：13）の予期しないトークン（1:13） at Parser.pp.unexpected ... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acornにあるC：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1490：8） です。 Parser.pp.parseImport（C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2254：10）の at Parser.pp.parseStatement（C：.. \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1762：60） at 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） atオブジェクト。 Parser.parse（C：... \ node_modules \ webpack \ lib \ Parser.js：902：0）にある のパース（C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：885：44） 15） at DependenciesBlock。 （C：... \ node_modules \ WebPACKの\ \ NormalModule.js LIB：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;