生成导出所有（数千个）组件的 index.js 文件答案

【问题标题】：Generating index.js files exporting all (thousands) components生成导出所有（数千个）组件的 index.js 文件
【发布时间】：2023-03-25 14:05:02
【问题描述】：

在查看诸如 material-ui 之类的库时，很明显有某种脚本负责从 index.js 文件中同时导出数千个组件。

如果我们看例如here，我只能假设这个文件不是由人生成的（8k+ 导出）。

在我重新发明轮子之前，是否有一些标准库可以用来创建这些导出文件？还是 rollup 或其他一些捆绑器即时创建它们？

【问题讨论】：

标签： reactjs npm material-ui

【解决方案1】：

他们使用名为builder.js 的自定义脚本导出所有图标组件。此脚本在您执行此命令时运行：npm run src:icons。这是相关部分。

async function generateIndex(options) {
  const files = await globAsync(path.join(options.outputDir, '*.js'));
  const index = files
    .map((file) => {
      const typename = path.basename(file).replace('.js', '');
      return `export { default as ${typename} } from './${typename}';\n`;
    })
    .join('');

  await fse.writeFile(path.join(options.outputDir, 'index.js'), index);
}

options.outputDir是包含所有组件文件的目录，在本例中为packages/material-ui-icons/src

【讨论】：

【解决方案2】：

这个shell应该可以完成工作

for f in *.js; do
  echo "export { default as $f } from './$f'"
done

将输出重定向到一个文件，就是这样

【讨论】：