支持图片等静态资源导入吗 | Support image or others static assets?

[usercao]

例如 Webpack 的 require() 这种
Like Webpack require(), it's can load any static assets

[caoxiemeihao]

你配置下 vite.config.ts 中的 resolve.extensions 试试
You can try to configure resolve.extensions in your vite.config.ts

[usercao]

require()有两种应用场景

1. 是在js中，应该按照上图所示配置就可以支持
2. 是在jsx中，可否提供一下example

[caoxiemeihao]

一样的，插件不分 js、jsx 的；要么你提供下你的 demo 吧，有问题我拉下来跑跑改改

[usercao]

Demo地址 ice-test

暂时考虑到4种引入方式(可能还有css/json等等?)，现在在用vite-plugin-require来引入，难点与本plugin想解决的问题一样不支持别名，希望测试下build的时候会不会出问题，因为Vite很多时候dev和build结果不一致。

希望引用名称能多一种使用叫require()，这样可以与webpack统一，方便在vite与webpack之间切换而不用改任何一行代码

[caoxiemeihao]

你的想法是 vite-plugin-dynamic-require
你说的插件和我现在这个插件都不是干你这个的，搞清楚 :)

况且
ESM 定义的 import() 是异步的
CJS 定义的 require() 是同步的

[usercao]

主要是并没有找到vite-plugin-dynamic-require相关的插件，不过vite-plugin-require确实是干这个的，只是名字上可能不是很直白，👌谢谢解答。

[caoxiemeihao]

开个插件也不难，要不要请我喝杯咖啡 :)

[usercao]

可以啊没问题，你在这个项目下面开个打赏吧。

[caoxiemeihao]

兄弟你的意思是这里要用 require('@/assets/images/test/${xxx}.png') 类似这种形式嘛

[usercao]

是的，上面提到的vite-plugin-require就是不支持别名，其他的效果和webpack的require()还是相符的，上面的demo也可以拉下来做测试用。

[caoxiemeihao]

那个插件瞄了一眼，只做了 require(id) 的提升，且 id 只能用普通的字符串；
就是说 vite-plugin-dynamic-require 要在此基础上要加两个功能：

1. 要能支持 动态id(dynaimc-require)
2. 别名(alias)、node_modules 模块支持

得要花点时间的 🐌

[usercao]

👍支持，不过虽然她的文档中说id只能是普通字符串，但我实测模板字符串开发和打包后都是没问题的，你使用过webpack的require()动态导入静态资源吗？你们导入静态资源通常怎么做的？不会是在顶部import之后再在tsx中使用吧？这样例如一个活动页面图片很多岂不是导入代码爆炸？

[caoxiemeihao]

你真的以为 require(id) 是动态导入的，CJS 定义的 require() 是同步的；Webpack 碰到 require() 会穷举出所有的可能性，生成后的产物不见的多“优雅”！

你用翻译软件看看文档便知。
https://webpack.js.org/guides/dependency-management/#require-with-expression

[usercao]

看完文档发现以前的理解确实有误，想了解一下你在做导入图片的通常是怎样实现的？

[caoxiemeihao]

一样的，只能通过穷举将可能的文件提前导入；其次维护一个键值对表做下运行时匹配即可。
工作中引入图片，全部用的 import 导入；毕竟我这边很喜欢用 Vite，导入任何东西都是 ESM 方式。

[caoxiemeihao]

新插件 vite-require 目前 v0.1.0 功能还有待完善，可以试试；v0.2.0 开发中。。。

[usercao]

import viteRequire from 'vite-require';

export default {
  vitePlugins: [viteRequire],
};

没有看到相关文档，猜测使用require()报错，测试Demo ice-test

[caoxiemeihao]

viteRequire()

[usercao]

viteRequire()

也试过，一是类型错误，二是启动报错

[caoxiemeihao]

你这还是那个 Demo？

[caoxiemeihao]

vite-require@v0.1.1

[caoxiemeihao]

你确定？

[caoxiemeihao]

import viteRequire from 'vite-require';

export default {
  vitePlugins: [viteRequire],
};

没有看到相关文档，猜测使用require()报错，测试Demo ice-test

README.md 有最基本的使用，不看的吗？

[usercao]

background-image: url(${require('@/assets/images/test/test.png')});

在css in js中使用会报错

[caoxiemeihao]

vite-require@v0.1.2 has been released.

[usercao]

新的报错

[caoxiemeihao]

新的报错

你确定这个和 vite-require 有关系？

[usercao]

是的，还是上面这个Demo，变动只有更新vite-require版本