Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged

Conversation

alamhubb
Copy link

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

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

issues: vitejs#430

More thoughts:

So should we not hard-code loader:'ts' and target:'es2020;

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

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

transformWithEsbuild(
    resolvedCode,
    filename,
    options.devServer?.config.esbuild || {},
    resolvedMap,
)

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
Copy link
Author

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 #444

@alamhubb alamhubb mentioned this pull request Sep 15, 2024
6 tasks
@alamhubb
Copy link
Author

#222 This should be another solution, but it has not been accepted for a long time. Why is it?

@sxzz sxzz merged commit 1344294 into vitejs:main Sep 16, 2024
5 of 6 checks passed
@sxzz sxzz changed the title fix(plugin-vue): Support decorators in .vue file. #430 fix(plugin-vue): allow overwrite esbuild config Sep 16, 2024
@alamhubb
Copy link
Author

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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants