Question

尝试在gulp中使用ts-loader为webpack构建一个Typescript项目。得到以下错误：

stream.js：74 扔掉//管道中未处理的流错误。 ^ 错误：./ app / react / helloDirective.tsx 模块解析失败：C：... \ app \ react \ helloDirective.tsx意外的令牌（1:13）您可能需要适当的加载程序来处理此文件类型。 SyntaxError：意外的令牌（1:13）在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', () => {

        });
    }
}
});

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;

Answer 1

我认为ts-loader只会转换为打字稿。要转换es6和jsx语法，您需要将babel-loader添加到webpack配置中。

Answer 2

awesome-typescript-loader支持allowJs选项。 ts-loader计划在未来支持它。

模块解析失败：Webpack Typescript Loader

2 个答案: