如何解决如何在Rollup.js上使用动态导入
我正在尝试使用rollup
来vue
图标库
我有一个充满.svg
的文件夹
我运行命令以扫描所有.svgs
的文件夹并将其转换为
export default `svg`;
并将文件更改为iconName.js
在.vue
文档中,我需要使用正确的文件:
Promise.resolve(
import(`./icons/${this.iconSet}/${this.icn}`)
.then(v => {
console.log('required',v)
this.svg = v.default
})
.catch(e => {
console.log('err',e)
this.error = true
})
)
在开发中,.vue
图标组件起作用。
在生产中作为npm软件包,我得到:
TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received 'B:\\icons\\node_modules\\\u0000commonjs-dynamic-register:\\icons\\brands\\500px.js\\package.json'
-> 500px.js
是图标包中的第一个文件,而不是vue
组件所需的文件。
->不知道为什么要添加package.json(文件包含在dist
文件夹中-希望相对路径可以工作但没有运气
上面的语句似乎是通过以下方式从rollup
呈现的:
require("\u0000commonjs-dynamic-register:B:/icons/dist/icons/brands/500px.js")
B:/ icons / dist->计算机到存储库的路径->我相信我必须将其缩短为:
require("\u0000commonjs-dynamic-register:/icons/brands/500px.js")
哪个给了我同样的错误
我迷路了,花了好几天研究这个 谢谢
https://github.com/mjmnagy/rollup-error-Sept-01-2020
解决方法
这是问题:
**import(`./icons/${this.iconSet}/${this.icn}`)**
Rollup 不会像这样处理“动态”/延迟加载,因为它不知道要包含什么或不包含什么(没有摇树)
如果您更改导入以包含相关文档,即:
import * as icons from './icons'
rollup
没有问题,但是现在有一个问题,您已经包含了每个需要加载的 .svg
。
如果你提到 font-awesome
他们的包实际上迫使你专门命名图标包或特定图标。
我希望它们都按需提供,因此我的解决方案是取消它并进入 .svg sprites
HTH
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。