如何使用 Rollup 动态获取静态文件（并与 node-resolve 一起使用）？

Question

我正在制作一个基于 TSDX 的库，这是一个用于包开发的漂亮而强大的 CLI，它基于 Rollup 并允许自定义其配置。我的项目中有一堆国旗 SVG，我需要导入它们并在需要时动态显示它们。我不清楚动态导入是如何工作的，以及这是 TSDX 还是 Rollup 本身的问题，所以我在 TSDX 存储库中打开了一个关于此问题的 issue。人们帮助了我，所以现在我可以看到两种方法来实现这一目标：

1. 使用

   rollup-plugin-copy

   ，然后通过 switch 语句静态要求所有文件。
2. 使用虚拟模块导出包含目录中所有文件名的对象，如 Rollup 问题之一（#2463）中描述的here。

我觉得为所有国家的国旗手动编写一个 switch 语句并不是我一生中最好的主意，所以我认为第二条路径更好，因为它不需要我维护更多代码，因为它只会生成我需要的代码。因此，我设置了一个小 TSDX 包，用于使用单个 React 组件进行测试，如下所示：

import test from 'testmodule'

export default function () {
  return test
}

现在

testmodule

就是Rollup应该解决的问题。我现在有这个配置：

module.exports = {
  rollup (config) {
    config.plugins.unshift({
      name: 'plugin-test-module',
      resolveId (id) {
        console.log('resolveId', id);

        if (id === 'testmodule') {
          return id;
        }

        return null;
      },
      load (id) {
        if (id === 'testmodule') {
          return 'export default "Test is successful"';
        }

        return null;
      },
    });

    return config;
  },
};

所以应该发生的事情是我只需要在浏览器中看到“测试成功”即可。 不幸的是，

npm run build

失败并出现错误

Cannot find module 'testmodule'

。我已将

console.log

放入

resolveId()

中以查看发生了什么，并且看起来它从未在其

testmodule

中接收到

id

。我将

unshift

替换为直接分配给

config.plugins

（因此它删除了其他 Rollup 插件）并成功编译，尽管我知道这很糟糕，所以这不是一个解决方案。我读过 Rollup 的文档，似乎 TSDX 添加的其他一些插件（如

node-resolve

）可能正在尝试解决导入问题，而不是我的插件，但我找不到阻止这种情况的方法。所以主要问题是如何让我的插件与其他插件一起工作，比如

node-resolve

。

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

Answer 1

我已经解决了这个问题，

@rollup/plugin-replace

。

// .. another rollup plugin
const replace = require('@rollup/plugin-replace');

rollup(config, options) {
    config.plugins.push(
      replace({
        delimiters: ['', ''],
        values: {
          '../../../assets': './assets',
          '../../../../assets': './assets',
        },
      })
    );
    // ... your other config
    return config;
  },

所以这将取代这个：

function Image({ name, ...props }: ImageProps) {
  const src =
    name === 'bank-indonesia'
      ? require(`../../../assets/images/${name}.jpg`).default
      : require(`../../../assets/images/${name}.svg`).default;
  return <img alt={name} src={src} {...props} />;
}

进入此：

function Image(_ref) {
  var name = _ref.name,
      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);

  var src = name === 'bank-indonesia' ? require("./assets/images/" + name + ".jpg")["default"] : require("./assets/images/" + name + ".svg")["default"];
  return React.createElement("img", Object.assign({
    alt: name,
    src: src
  }, props));
}