gulp 내의 webpack에 대해 ts-loader를 사용하여 Typescript 프로젝트를 빌드하려고 시도했습니다. 다음 오류 받기 :모듈 구문 분석 실패 : Webpack Typescript 로더에서 예기치 않은 토큰
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) at Parser.pp.unexpected C : ... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn ... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js : 1490 : 8) 에서 Parser.pp.expectContextual (C : ... 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) at Parser.parse (C : ... \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js : 1632 : 17) at Object. 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 \ 웹팩 \ \ 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