嘗試使用ts-loader爲gpack中的webpack構建一個Typescript項目。獲取以下錯誤：模塊解析失敗：Webpack Typescript Loader中的意外令牌
stream.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） 012rsat Parser.pp.unexpected C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1490：8） at Parser.pp.expectContextual（C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn。 js：1449：39） at 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 \橡子\ DIST \ acorn.js：1632：17） 在對象。解析（C：... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：885：44） at 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;