如何在没有babel的vue-cli3中使tsx工作

Question

我正在建立一个由vue-cli 3.8.0创建的新项目

我只选择了打字稿（没有babel编译器）

现在，当我编写如下的foo.tsx文件时：

export default {
    render() {
        return (<div>777</div>);
    },
};

但是我有一个错误：

error in ./src/scripts/foo.tsx

Module parse failed: Unexpected token (3:16)
You may need an appropriate loader to handle this file type.
| export default {
|     render: function () {
>         return (<div>777</div>);
|     },
| };

首先，我认为我的webpack配置一定有问题。

所以我按vue inspect > out.js到终端以获取最终配置。

我将向您展示相关部分：

{
    resolve: {
        // ...
        extensions: [
            ".mjs",
            ".js",
            ".jsx",
            ".vue",
            ".json",
            ".wasm",
            ".ts",
            ".tsx",
        ],
    },
    module: {
        noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\vue-loader",
                            cacheIdentifier: "abfeee2e",
                        },
                    },
                    {
                        loader: "vue-loader",
                        options: {
                            compilerOptions: {
                                preserveWhitespace: false,
                            },
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\vue-loader",
                            cacheIdentifier: "abfeee2e",
                        },
                    },
                ],
            },
            // ...
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\ts-loader",
                            cacheIdentifier: "f2bb628a",
                        },
                    },
                    {
                        loader: "ts-loader",
                        options: {
                            transpileOnly: true,
                            appendTsSuffixTo: ["\\.vue$"],
                            happyPackMode: false,
                        },
                    },
                ],
            },
            {
                test: /\.tsx$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory:
                                "E:\\workspace\\project-name\\node_modules\\.cache\\ts-loader",
                            cacheIdentifier: "f2bb628a",
                        },
                    },
                    {
                        loader: "ts-loader",
                        options: {
                            transpileOnly: true,
                            happyPackMode: false,
                            appendTsxSuffixTo: ["\\.vue$"],
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        // ...
        /* config.plugin('fork-ts-checker') */
        new ForkTsCheckerWebpackPlugin({
            vue: true,
            tslint: true,
            formatter: "codeframe",
            checkSyntacticErrors: false,
        }),
    ],
}

读完它后，我为所发生的事情感到困惑，因为我认为这是正确的。

所以，我需要你的帮助。

PS

vue：2.6.10

@ vue / cli-plugin-typescript：3.8.1

@ vue / cli-service：3.8.0

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}