为什么vite中不能使用reflect-metadata

import "reflect-metadata"

function validate(target: any) {
  let paramtypes = Reflect.getMetadata("design:paramtypes", target);
  console.log(paramtypes);  // undefined
}

@validate
class Log {
  constructor(public readonly xx: string) {}
}

打我启动服务器，打开网页发现paramtypes未定义

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["./src"]
}

Vite使用ESBuild，不支持"emitDecoratorMetadata"在 tsconfig 中，因为 ESBuild 没有实现自己的类型系统。参考这个vitejs/vite#788 https://github.com/vitejs/vite/issues/788有关此主题的更多详细信息。

不过，这个问题有一些解决方法。我采取的一种方法是明确禁用 ESBuild 并使用 SWC。您可以在以下位置找到更多相关详细信息：这个演示 https://github.com/SIGUSR97/decorator-demo/。这是它的 vite 配置文件：

import typescript from "@rollup/plugin-typescript";
import swc from "rollup-plugin-swc";

// import typescript from "rollup-plugin-typescript2";

export default defineConfig({
    plugins: [
        swc({
            jsc: {
                parser: {
                    syntax: "typescript",
                    // tsx: true, // If you use react
                    dynamicImport: true,
                    decorators: true,
                },
                target: "es2021",
                transform: {
                    decoratorMetadata: true,
                },
            },
        }),
    ],
    esbuild: false,
});

SWC 是 ESBuild 的快速替代品，它实现了自己的类型系统，可以毫无问题地发出装饰器元数据。