2

使用包含 JSX 的独立 TSX 文件时，一切正常。我的 webpack 配置： 

{ 
      test: /\.tsx$/, 
      loader: 'babel-loader!ts-loader'
}

并且 tsconfig.json jsx 选项设置为“保留”，以便 Typescript 将忽略由 babel 处理的 JSX 编译。完全有道理。

但是当我对 Vue-loader 使用相同的配方时，它不起作用： 

{
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          "tsx": "babel-loader!ts-loader"
        }
      }
    }

和示例组件： 

<script lang="tsx">
import { VNode, CreateElement } from "vue";

export default {
    functional: true,
    render (h: CreateElement): VNode {
       return (
           <div>
              <span>Working?</span>
          </div>
      );
   }
}
</script>

错误日志：

You may need an appropriate loader to handle this file type.
|     functional: true,
|     render: function (h) {
|         return (Working ? /span>
|             < /div>

似乎 ts-loader 不尊重 JSX 保留在这里。查看错误日志/输出时，似乎 ts-loader 尝试解析 JSX 或尝试编译正则表达式。

我无法指出确切的问题，但是在调试 dist/index.js: 152 时，我可以清楚地看到输出格式错误，编译器会尝试编译 JSX 而不是忽略。 

function getEmit(rawFilePath, filePath, instance, loader) {
    var output = instance.languageService.getEmitOutput(filePath);
    console.log("Ouput JSX malformed?", output);
    loader.clearDependencies();
    loader.addDependency(rawFilePath);
    ...
}
4

0 回答 0