试图在gulp中使用ts-loader为webpack构建一个Typescript项目 . 出现以下错误：
stream.js：74 throw er; //管道中未处理的流错误 . ^错误：./ app / react / helloDirective.tsx模块解析失败：C：... \ app \ react \ helloDirective.tsx意外的令牌（1:13）您可能需要一个合适的加载器来处理此文件类型 . SyntaxError：Parser.pp.une（C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：923：13）中的意外标记（1: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.parse的Parser.pp.parseTopLevel（C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1666：21） 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）在DependenciesBlock的Parser.parse（C：... \ node_modules \ webpack \ lib \ Parser.js：902：15） . （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;
2 回答
我认为ts-loader只会转换为打字稿 . 要转换es6和jsx语法，您需要将babel-loader添加到您的webpack配置中 .
awesome-typescript-loader支持allowJs选项 . ts-loader计划在未来支持它 .