vitejs / vite-plugin-vue

Vite Vue Plugins
MIT License
501 stars 154 forks source link

fix(plugin-vue): allow overwrite esbuild config #444

Closed alamhubb closed 2 months ago

alamhubb commented 2 months ago

fix(plugin-vue): Support decorators in .vue file.

issues: https://github.com/vitejs/vite-plugin-vue/issues/430

More thoughts:

      {
        target: 'esnext',
        // #430 Support decorators in .vue file. https://github.com/vitejs/vite-plugin-vue/issues/430
        // target can be overridden by esbuild config target
        ...options.devServer?.config.esbuild,
        loader: 'ts',
        sourcemap: options.sourceMap,
      },

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

image

in vite vite:esbuild,Merged from esbuildTransformOptions

image

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

alamhubb commented 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)

image

vite-plugin-vue Logic executed in dev environment

https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/src/main.ts (253)

image

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

alamhubb commented 2 months ago

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?

alamhubb commented 2 months ago

This fix allows overwrite esbuild config, so it fixes #278 , and #31 is repeated with 278. Can #31 be closed?

278 , in dev mode, whether the configuration when calling esbuild build can be read synchronously from vite.config.js or support parameter passing duplication,