Closed alamhubb closed 2 months ago
When I used the decorator function of ts, I also encountered a problem
When I used the decorator in the dev environment of vite, an exception occurred, but it was normal in the build environment
So I checked the differences between the dev and build environments
I found that in the build environment, the target of esbuild can be replaced by esbuild:{target}, esbuildTransformOptions in vite.config.ts, while in the dev environment, it is hard-coded, target:esnext, and esbuildTransformOptions does not replace target:esnext
Logic executed when vite:esbuild builds
https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/esbuild.ts (238)
vite-plugin-vue Logic executed in dev environment
https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/src/main.ts (253)
This leads to inconsistency between dev environment and build environment, which I find strange
vite is the basic component of vite-plugin-vue.
In the vite project, when vite-plugin-vue calls the transformWithEsbuild function provided by vite:esbuild, the parameters passed in should be consistent with the parameters of transformWithEsbuild called by vite:esbuild itself when building.
That is, esbuildTransformOptions should be used to replace and merge target:esnext
And this code will only be triggered in the development environment, so options.devServer?.config.esbuild can be used
This way, the results of dev environment and build environment can be consistent
So I submitted a PR https://github.com/vitejs/vite-plugin-vue/pull/444
https://github.com/vitejs/vite-plugin-vue/pull/222 This should be another solution, but it has not been accepted for a long time. Why is it?
This fix allows overwrite esbuild config, so it fixes #278 , and #31 is repeated with 278. Can #31 be closed?
fix(plugin-vue): Support decorators in .vue file.
issues: https://github.com/vitejs/vite-plugin-vue/issues/430
More thoughts:
in vite-plugin-vue,There is no merge from esbuildTransformOptions, so submit the modification and merge esbuildTransformOptions, that is, options.devServer?.config.esbuild in the development environment
in vite vite:esbuild,Merged from esbuildTransformOptions
Just for fault tolerance and compatibility considerations
vite is the basic component of vite-plugin-vue. When vite-plugin-vue calls the transformWithEsbuild function provided by vite:esbuild in the vite project, should it be consistent with the parameters of vite:esbuild calling transformWithEsbuild, that is, esbuildTransformOptions, that is, options.devServer?.config.esbuild in the development environment
Because the running results of vite in the development environment and the production environment should be consistent, it is also necessary to keep it consistent with the parameters passed in when vite:esbuild calls the transformWithEsbuild function
This code will only be triggered in the development environment, so it is correct to use options.devServer?.config.esbuild