Comments (28)
你配置下 vite.config.ts
中的 resolve.extensions
试试
You can try to configure resolve.extensions
in your vite.config.ts
from vite-plugin-dynamic-import.
require()
有两种应用场景
- 是在js中,应该按照上图所示配置就可以支持
- 是在jsx中,可否提供一下example
from vite-plugin-dynamic-import.
一样的,插件不分 js、jsx 的;要么你提供下你的 demo 吧,有问题我拉下来跑跑改改
from vite-plugin-dynamic-import.
Demo地址 ice-test
暂时考虑到4种引入方式(可能还有css/json等等?),现在在用vite-plugin-require
来引入,难点与本plugin想解决的问题一样不支持别名,希望测试下build
的时候会不会出问题,因为Vite很多时候dev
和build
结果不一致。
希望引用名称能多一种使用叫require()
,这样可以与webpack
统一,方便在vite
与webpack
之间切换而不用改任何一行代码
from vite-plugin-dynamic-import.
你的想法是 vite-plugin-dynamic-require
你说的插件和我现在这个插件都不是干你这个的,搞清楚 :)
况且
ESM 定义的 import()
是异步的
CJS 定义的 require()
是同步的
from vite-plugin-dynamic-import.
主要是并没有找到vite-plugin-dynamic-require
相关的插件,不过vite-plugin-require
确实是干这个的,只是名字上可能不是很直白,👌谢谢解答。
from vite-plugin-dynamic-import.
开个插件也不难,要不要请我喝杯咖啡 :)
from vite-plugin-dynamic-import.
可以啊没问题,你在这个项目下面开个打赏吧。
from vite-plugin-dynamic-import.
兄弟你的意思是这里要用 require('@/assets/images/test/${xxx}.png')
类似这种形式嘛
from vite-plugin-dynamic-import.
是的,上面提到的vite-plugin-require
就是不支持别名,其他的效果和webpack
的require()
还是相符的,上面的demo也可以拉下来做测试用。
from vite-plugin-dynamic-import.
那个插件瞄了一眼,只做了 require(id)
的提升,且 id
只能用普通的字符串;
就是说 vite-plugin-dynamic-require
要在此基础上要加两个功能:
- 要能支持 动态id(dynaimc-require)
- 别名(alias)、
node_modules
模块支持
得要花点时间的 🐌
from vite-plugin-dynamic-import.
👍支持,不过虽然她的文档中说id
只能是普通字符串,但我实测模板字符串开发和打包后都是没问题的,你使用过webpack
的require()
动态导入静态资源吗?你们导入静态资源通常怎么做的?不会是在顶部import
之后再在tsx
中使用吧?这样例如一个活动页面图片很多岂不是导入代码爆炸?
from vite-plugin-dynamic-import.
你真的以为 require(id)
是动态导入的,CJS 定义的 require()
是同步的;Webpack 碰到 require()
会穷举出所有的可能性,生成后的产物不见的多“优雅”!
你用翻译软件看看文档便知。
https://webpack.js.org/guides/dependency-management/#require-with-expression
from vite-plugin-dynamic-import.
看完文档发现以前的理解确实有误,想了解一下你在做导入图片的通常是怎样实现的?
from vite-plugin-dynamic-import.
一样的,只能通过穷举将可能的文件提前导入;其次维护一个键值对表做下运行时匹配即可。
工作中引入图片,全部用的 import 导入;毕竟我这边很喜欢用 Vite,导入任何东西都是 ESM 方式。
from vite-plugin-dynamic-import.
新插件 vite-require 目前 v0.1.0
功能还有待完善,可以试试;v0.2.0
开发中。。。
from vite-plugin-dynamic-import.
import viteRequire from 'vite-require';
export default {
vitePlugins: [viteRequire],
};
没有看到相关文档,猜测使用require()
报错,测试Demo ice-test
from vite-plugin-dynamic-import.
viteRequire()
from vite-plugin-dynamic-import.
viteRequire()
也试过,一是类型错误,二是启动报错
from vite-plugin-dynamic-import.
你这还是那个 Demo?
from vite-plugin-dynamic-import.
from vite-plugin-dynamic-import.
你确定?
from vite-plugin-dynamic-import.
import viteRequire from 'vite-require'; export default { vitePlugins: [viteRequire], };没有看到相关文档,猜测使用
require()
报错,测试Demo ice-test
from vite-plugin-dynamic-import.
background-image: url(${require('@/assets/images/test/test.png')});
在css in js中使用会报错
from vite-plugin-dynamic-import.
[email protected]
has been released.
from vite-plugin-dynamic-import.
新的报错
from vite-plugin-dynamic-import.
新的报错
你确定这个和 vite-require
有关系?
from vite-plugin-dynamic-import.
是的,还是上面这个Demo,变动只有更新vite-require
版本
from vite-plugin-dynamic-import.
Related Issues (20)
- Bare imports do not work in monorepos HOT 8
- Cannot find module 'vite-plugin-utils' or its corresponding type declarations. HOT 2
- Build error when using the plugin in Vite.config HOT 1
- How can I import from some package?
- when this method in node_modules HOT 8
- Internal server error: Cannot use 'import.meta' outside a module HOT 3
- when i use node_modules error will occur when starting HOT 3
- Source Maps and Line Numbers are not correct HOT 1
- Please add a LICENSE if you are okay with people using this plugin HOT 1
- Not working in Vue project HOT 1
- `// [vite-plugin-dynamic-import] runtime -S-` header missing in compiled source HOT 3
- Massive import size HOT 2
- [vite-plugin-dynamic-import] Generated runtime code has redundant judgment rules in some cases HOT 1
- The above dynamic import cannot be analyzed by Vite. HOT 5
- Dynamic import not working Windows HOT 1
- Failed to parse vite-plugin-federation HOT 1
- Imports don't work within defineAsyncComponent() in Vue 2/3 HOT 2
- [Feature Request] Import map support HOT 5
- dynamic import not include subfolder HOT 1
- re Disable dynamic import detection for one line or for whole project HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-dynamic-import.