尝试在 gulp 中使用 ts-loader 为 webpack 构建一个 Typescript 项目。收到以下错误：
stream.js:74 抛出错误；// 管道中未处理的流错误。^ 错误：./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) 处 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) 在 Object .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', () => {
});
}
}
});
你好.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;