在vite+typescript中使用属性装饰器decorator一定要单独修改配置,否则就会遇到vite的这个issus,与这个esbuild规则有关

652 阅读1分钟

问题发现

我最近在使用ts的装饰器decorator语法开发功能,发现在vite中装饰器得到的数据与tc39最新实现不一致

tc39最新装饰器规范

github.com/microsoft/T…

image.png

装饰器函数的入参为两个,第一个是当前对象, 第二个是上下文,

问题查找过程

我却发现vite(5.4.5)中获取的装饰器参数并不是这两个,于是开启了我漫长的问题解决之路(两天)
  1. 我用tsc编译代码,发现结果正常,而vite不正常,于是我就给vite提了bug,github.com/vitejs/vite…
  2. vite是使用esbuild编译的ts代码,我又去试了esbuild,发现esbuild编译出来也与不对,我又给esbuild提了bug,github.com/evanw/esbui…
  3. 然后被告知esbuild和tsc的默认target不一致,然后我修改esbuild的目标改为es2022, 则结果正确
  4. 在vite中,我也配置esbuild,target为es2022,还是不对
  5. 调试发现,vite的配置比我的配置多了个loder=ts,查看相关规则发现,当loder=ts时会触发以下规则,esbuild.github.io/content-typ…

image.png

正确配置

于是我在vite的vite.config.ts中添加以下配置则一切正确了

image.png

esbuild: {
    target: 'es2022',
    tsconfigRaw: {
        compilerOptions: {
            useDefineForClassFields: true,
        }
    }
},

如果文章存在错误与遗漏,欢迎您指出

彩蛋

我还发现意外esbuild作者,竟然是figma联合创始人前cto

image.png

image.png

image.png