Javascript 如何使用Rollup动态获取静态文件(并与节点解析一起工作)?

Javascript 如何使用Rollup动态获取静态文件(并与节点解析一起工作)?,javascript,reactjs,typescript,rollup,rollupjs,Javascript,Reactjs,Typescript,Rollup,Rollupjs,我正在为软件包开发制作一个基于漂亮、功能强大的CLI的库,它基于汇总并允许自定义其配置。我的项目中有一堆国旗SVG,我需要导入它们并在需要时动态显示它们。我不清楚动态导入在那里是如何工作的,它是TSDX还是Rollup本身的问题,所以我在TSDX的存储库中打开了一个关于这一点的文件。人们帮助了我,所以现在我可以通过两种方式来实现这一目标: 使用rollup plugin copy,然后通过switch语句静态地要求所有文件 使用虚拟模块导出包含目录中所有文件名的对象,如汇总问题之一(#2463)

我正在为软件包开发制作一个基于漂亮、功能强大的CLI的库,它基于汇总并允许自定义其配置。我的项目中有一堆国旗SVG,我需要导入它们并在需要时动态显示它们。我不清楚动态导入在那里是如何工作的,它是TSDX还是Rollup本身的问题,所以我在TSDX的存储库中打开了一个关于这一点的文件。人们帮助了我,所以现在我可以通过两种方式来实现这一目标:

  • 使用
    rollup plugin copy
    ,然后通过switch语句静态地要求所有文件
  • 使用虚拟模块导出包含目录中所有文件名的对象,如汇总问题之一(#2463)中所述
  • 我觉得为所有的国旗手动编写一个switch语句不是我一生中最好的主意,所以我认为第二条路径更好,因为它不需要我维护更多的代码,因为它只会生成我需要的代码。因此,我设置了一个小TSDX包,用于使用单个React组件进行测试,如下所示:

    从“testmodule”导入测试
    导出默认函数(){
    回归试验
    }
    
    现在,
    testmodule
    是应该通过汇总解决的问题。我现在有这个配置:

    module.exports={
    汇总(配置){
    config.plugins.unshift({
    名称:“插件测试模块”,
    解析id(id){
    console.log('resolveId',id);
    如果(id=='testmodule'){
    返回id;
    }
    返回null;
    },
    负载(id){
    如果(id=='testmodule'){
    返回“导出默认值”测试成功“;
    }
    返回null;
    },
    });
    返回配置;
    },
    };
    
    所以我只需要在浏览器中看到“测试成功”。 不幸的是,
    npm运行构建
    失败,出现错误
    找不到模块“testmodule”
    。我将
    console.log
    放入
    resolveId()
    中查看发生了什么,看起来它从未在其
    id
    中接收到
    testmodule
    。我将
    unshift
    替换为直接分配给
    config.plugins
    (因此它删除了其他汇总插件),并成功地编译了它,尽管我知道这很糟糕,所以它不是一个解决方案。我已经阅读了Rollup的文档,似乎TSDX添加的其他插件(如
    node resolve
    )可能正在尝试解析导入而不是我的插件,但我找不到方法停止。因此,主要的问题是如何让我的插件与其他插件(如
    node resolve
    )一起工作

    如果您对TSDX使用的其他插件感兴趣,可以找到它们。似乎Rollup没有在他们的问题页面上提供技术支持,所以我希望这里有人足够熟悉它,可以帮助我解决这些问题