Question

使用包含JSX的独立TSX文件时，一切都很完美。我的webpack配置：

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

并且tsconfig.json jsx选项设置为“preserve”，以便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);
    ...
}

Vue JSX打字稿不起作用

0 个答案: