如何在Next.js中对多目录导出的桶文件配置modularizeImports

可行性确认 #

这个需求完全可行，但你当前的transform写法无法实现预期效果——因为Handlebars模板语法不支持通过正则分组自动匹配成员对应的目录，得用自定义转换函数来实现。

正确配置方式 #

Next.js的modularizeImports支持customTransform选项（而非仅用字符串transform），可以根据导出成员的名称，映射到对应的子目录路径。示例配置如下：

// next.config.js
module.exports = {
  modularizeImports: {
    '@some/library': {
      customTransform: (member) => {
        // 根据成员名称判断所属目录
        if (member.startsWith('Some') || member.endsWith('Component')) {
          return '@some/library/dist/components/' + member;
        } else if (member.startsWith('someHook')) {
          return '@some/library/dist/hooks/' + member;
        } else if (member.startsWith('someFun')) {
          return '@some/library/dist/utils/' + member;
        }
        // 兜底：如果匹配不到，返回默认桶导入（或根据需求调整）
        return '@some/library';
      },
    },
  },
};

补充优化 #

如果你的库成员命名有统一规律（比如组件都带Component后缀、Hook都带Hook后缀），可以用正则表达式简化判断逻辑：

customTransform: (member) => {
  let dir;
  if (/Component$/.test(member)) dir = 'components';
  else if (/Hook$/.test(member)) dir = 'hooks';
  else if (/Fun$/.test(member)) dir = 'utils';
  else return '@some/library';
  
  return `@some/library/dist/${dir}/${member}`;
}

注意：确保你的库dist目录下存在对应的子目录和目标文件（比如dist/components/SomeComponent.js），否则会导致导入报错。

内容的提问来源于stack exchange，提问作者Dimitris Karagiannis