[英]How to get Dynamic Imports working on Rollup.js
I am trying to rollup
a icon library using vue
我正在尝试使用
vue
rollup
图标库
I have a folder full of .svg
我有一个装满
.svg
的文件夹
I run a command to scan the folders with all the .svgs
and convert them to我运行一个命令来扫描包含所有
.svgs
的文件夹并将它们转换为
export default `svg`;
and change the file to iconName.js
并将文件更改为
iconName.js
In the .vue
document i require the correct file using :在
.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
})
)
In development, the .vue
icon component works.在开发中,
.vue
图标组件有效。 In production as an npm package i get:在作为 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
is the first file in the icon pack and not the one being required by the vue
component. ->
500px.js
是图标包中的第一个文件,而不是vue
组件所需的文件。 -> No clue why package.json is being appended (the files are contained within the dist
folder - hoping relative paths would work but no luck -> 不知道为什么要附加 package.json(文件包含在
dist
文件夹中 - 希望相对路径可以工作,但没有运气
The above statement seems to be rendered from rollup
via:上面的语句似乎是通过
rollup
呈现的:
require("\u0000commonjs-dynamic-register:B:/icons/dist/icons/brands/500px.js")
B:/icons/dist -> the computer's path to the repo -> i believe i have to shorten it to: B:/icons/dist -> 计算机到 repo 的路径 -> 我相信我必须将其缩短为:
require("\u0000commonjs-dynamic-register:/icons/brands/500px.js")
Which gives me the same error这给了我同样的错误
I'm lost and have spent days looking into this thanks我迷路了,花了几天时间研究这个谢谢
https://github.com/mjmnagy/rollup-error-Sept-01-2020 https://github.com/mjmnagy/rollup-error-Sept-01-2020
This is the issue:这是问题:
**import(`./icons/${this.iconSet}/${this.icn}`)**
Rollup doesnt handle "dynamic"/lazy loading like this as it doesnt know what or what not to include(no tree-shaking) Rollup 不会像这样处理“动态”/延迟加载,因为它不知道要包含什么或不包含什么(没有摇树)
If you change the import to include the relevant documents ie:如果您更改导入以包含相关文件,即:
import * as icons from './icons'
There isnt an issue with rollup
However there is now an issue that you have included every .svg
which is a lot to load. rollup
没有问题 但是现在有一个问题,您已经包含了每个需要加载的.svg
。
if you refer to font-awesome
their package actually forces u to specifically name icon packages or specific icons.如果您提到
font-awesome
他们的包实际上会强制您专门命名图标包或特定图标。
My solution as i want them all to be available on demand, was to kill this and move into .svg sprites
我希望它们都按需提供,我的解决方案是杀死它并进入
.svg sprites
HTH HTH
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.