模块解析失败：Webpack Typescript Loader 中出现意外的令牌

Posted 2023-03-13

【中文标题】模块解析失败：Webpack Typescript Loader 中出现意外的令牌

【英文标题】：Module Parse Failed: Unexpected token in Webpack Typescript Loader

【发布时间】：2016-11-11 05:43:45

【问题描述】：

尝试在 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', () => 

        );
    

);

你好.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;

【参考方案1】：

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

【参考方案2】：

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