如何在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

javascript rollup rollupjs