如何从工具函数库中仅导入部分模块并保留命名空间？

核心结论 #

完全可以给普通对象动态添加属性，不需要依赖globalThis，以下几种方案能同时满足仅导入所需模块和保留命名空间调用的需求，且适配不同场景：

方案一：手动构建命名空间对象（最通用、Tree-shaking友好） #

这是成本最低且最可控的方案，本质是优化你提到的“中间接口文件”思路——通过明确的按需导入，把需要的函数挂载到自定义命名空间对象上，打包工具（Webpack/Vite/Rollup等）能完美识别并做Tree-shaking。

代码示例 #

// 项目根目录下的 utils.js/ts
// 仅导入需要的工具函数
import { foo } from 'your-tool-lib/foo';
import { bar } from 'your-tool-lib/bar';

// 导出命名空间对象
export const utils = {
  foo,
  bar
};

项目中使用 #

import { utils } from './utils';

utils.foo(); // 符合命名空间调用要求
utils.bar();

优势 #

• 完全可控，只引入需要的代码，无冗余体积；
• TypeScript环境下能自动继承原函数的类型提示，无需额外维护类型；
• 实现简单，几乎没有学习成本。

方案二：动态导入+动态挂载（适合懒加载场景） #

如果需要在运行时按需加载某些工具函数（比如仅在特定页面/交互中使用），可以用ES模块的import()语法动态导入，再挂载到命名空间对象上。

代码示例 #

// utils.js
export const utils = {};

// 批量加载并挂载工具函数
export async function loadTargetUtils(...funcNames) {
  // 并行动态导入指定模块
  const moduleList = await Promise.all(
    funcNames.map(name => import(`your-tool-lib/${name}`))
  );
  
  // 挂载到命名空间对象
  moduleList.forEach((module, index) => {
    const funcName = funcNames[index];
    utils[funcName] = module[funcName];
  });
}

项目中使用 #

import { utils, loadTargetUtils } from './utils';

// 初始化需要的工具函数
await loadTargetUtils('foo', 'bar');

utils.foo();
utils.bar();

优势 #

• 进一步减少初始打包体积，适合大型项目或首屏性能敏感场景；
• 可根据业务逻辑动态调整加载的工具函数。

方案三：从工具库层面优化（给用户提供更友好的接口） #

如果是你自己维护工具函数库，可以给每个工具单独导出的同时，提供一个命名空间生成工具，让用户能快速构建自定义命名空间：

工具库代码结构 #

your-tool-lib/
├── foo.js       // 导出 foo 函数
├── bar.js       // 导出 bar 函数
└── create-namespace.js

create-namespace.js 实现 #

export function createNamespace(...funcs) {
  const namespace = {};
  funcs.forEach(({ name, func }) => {
    namespace[name] = func;
  });
  return namespace;
}

用户项目中使用 #

import { createNamespace } from 'your-tool-lib/create-namespace';
import { foo } from 'your-tool-lib/foo';
import { bar } from 'your-tool-lib/bar';

const utils = createNamespace(
  { name: 'foo', func: foo },
  { name: 'bar', func: bar }
);

utils.foo();

优势 #

• 给库的使用者提供更灵活的选择；
• 保持库本身的模块粒度，不强制导出全量代码。

TypeScript 类型适配（可选） #

如果用TypeScript开发，只需给命名空间对象添加类型声明，就能获得完整的类型提示：

// utils.ts
import { foo } from 'your-tool-lib/foo';
import { bar } from 'your-tool-lib/bar';

// 定义命名空间类型
type UtilsNamespace = {
  foo: typeof foo;
  bar: typeof bar;
};

export const utils: UtilsNamespace = {
  foo,
  bar
};

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