feat(vite): emitAssetsWithModule in library mode

[yoyo930021]

Description

Fixed https://github.com/vitejs/vite/issues/4454 Fixed https://github.com/vitejs/vite/issues/3295

We replace asset to base64 for lib mode by default, It can handle most of the contexts.
But it will add a lot of size in JS/CSS and disallow for CSP.

In this PR, we add a emitAssetsWithModule option.
When enable this option, vite will try to emit assets and generate original import code in JS or CSS.

For example:

// Code
import image from '@/assets/image/banner.jpg'
// Generate
import img from './assets/banner.87342es.jpg'
// Use bundler to resolve it. Ex: Vite, Webpack (url-loader)

/* Code */
body {
  background-image: url('../assets/image/banner.jpg');
}
/* Generate */
body {
  background-image: url('./assets/banner.87342es.jpg');
}
/* Use bundler to resolve it. Ex: Vite, Webpack (css-loader) */

The emitAssetsWithModule will try to generate module with assets. When enable this option, please use bundler in user project.

Additional context

No.

---

What is the purpose of this pull request?

• [ ] Bug fix
• [x] New Feature
• [x] Documentation update
• [ ] Other

Before submitting the PR, please make sure you do the following

• [x] Read the Contributing Guidelines.
• [x] Read the Pull Request Guidelines and follow the Commit Convention.
• [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• [x] Ideally, include relevant tests that fail without this PR but pass with it.

[jschill]

@yoyo930021 Wouldn't it make more sense for lib mode to respect the assetsDir and assetsInlineLimit options instead of introducing a new lib specific emitAssetsWithModule?

[yoyo930021]

@yoyo930021 Wouldn't it make more sense for lib mode to respect the assetsDir and assetsInlineLimit options instead of introducing a new lib specific emitAssetsWithModule?

I don't think it's a good idea. This option is not applicable in all situations. We need option for disable or enable it.

When enable this option, it also respect assetsDir and assetsInlineLimit options.

[zjjjjjjjjjjd]

I need this PR~

[ivan-palatov]

This PR is a must have for a library, please merge?

[mr-moto]

hows the progress on this?

[cgodo]

Unless I am missing a workaround, I can't use Vite for a new Vue3 component library because of this. I would adventure to go back to native Rollup, however rollup-plugin-vue has been archived for almost a year with this message:

This is no longer maintained. Use Vite and @vitejs/plugin-vue instead.

Would be nice if this is finally reviewed and merged.

[ivan-palatov]

For those looking for a quick and dirty solution here is what you could do if you use pnpm (there are similar methods for other package managers):

1. run pnpm patch vite@version_of_vite_you_are_using_currently
2. open the path shown in your terminal
3. open "files changed" section of this pr and using the search feature apply the relevant changes to the files in the project you opened. (Obviously, you do not need the changes in playground files or tests).
4. once you done with your changes run pnpm patch-commit path_to_the_folder_with_changes
5. now you could set emitAssetsWithModule: true in the lib section of your vite config. If you are using typescript, you might also need to add // @ts-expect-error declaration before that.

Although, I've found one issue with this: my assets are in src/assets/img and src/assets/svg folders and after building the import/export paths for those become /assets/*, which is wrong and isn't automatically resolvable, so I have to add a path alias in the project, that consumes that library for that to work. I do not know if it is something that I messed up or if it is an issue with this pr though and I do not have time to find out.

[yoyo930021]

For those looking for a quick and dirty solution here is what you could do if you use pnpm (there are similar methods for other package managers):

1. run `pnpm patch vite@version_of_vite_you_are_using_currently`

2. open the path shown in your terminal

3. open "files changed" section of this pr and using the search feature apply the relevant changes to the files in the project you opened. (Obviously, you do not need the changes in playground files or tests).

4. once you done with your changes run `pnpm patch-commit path_to_the_folder_with_changes`

5. now you could set `emitAssetsWithModule: true` in the lib section of your vite config. If you are using typescript, you might also need to add `// @ts-expect-error` declaration before that.

Although, I've found one issue with this: my assets are in src/assets/img and src/assets/svg folders and after building the import/export paths for those become /assets/*, which is wrong and isn't automatically resolvable, so I have to add a path alias in the project, that consumes that library for that to work. I do not know if it is something that I messed up or if it is an issue with this pr though and I do not have time to find out.

The PR is based on old vite main branch. It may not apply to the latest version.

[ivan-palatov]

@yoyo930021 I was using vite 3.1.8, so that could be the case, yeah.

[tjx666]

We need this, without this, we may choose to introduce rollup to replace vite lib mode

[wststone]

Is this going to be merged any time soon?

[yoyo930021]

In esbuild, the name is copy loader. Maybe we can rename option. https://esbuild.github.io/content-types/#copy

[yoyo930021]

I rebase this PR from main branch.

[NathanVss]

We need this feature too, Vite is a great tool but this feature was a hole in the racket 🙏 Great work !

[fatton139]

Any updates? We would love this feature!