如何通过打包简化多JS文件中重复的ES6模块导入操作？

你完全可以通过创建一个「入口整合文件」来统一管理这些重复的导入，具体操作分两种场景说明：

场景1：导入的模块是副作用型（比如全局样式、Polyfill、初始化类库） #

如果这些模块不需要导出任何内容，只是执行初始化逻辑或注入全局变量，直接创建整合文件批量导入即可：

// all_the_things.js
import 'node_module_a';
import 'node_module_b';
import 'node_module_c';

之后在其他需要这些模块的文件里，只需要导入这个整合文件：

// other_file.js
import './all_the_things.js';
// 接下来就能正常使用模块a/b/c提供的全局能力了

场景2：导入的模块需要导出内容（比如工具函数、组件、常量） #

如果业务代码需要用到这些模块的导出内容，整合文件需要把这些导出重新暴露出来，方便其他文件按需导入：

// all_the_things.js
// 方式1：逐个导出指定内容
export { UtilsA, ConstA } from 'node_module_a';
export { default as ComponentB } from 'node_module_b'; // 处理默认导出
export * from 'node_module_c'; // 导出模块c的所有内容

// 方式2：合并成对象导出（按需选择）
import * as ModuleA from 'node_module_a';
import ModuleB from 'node_module_b';
import * as ModuleC from 'node_module_c';

export { ModuleA, ModuleB, ModuleC };

然后在其他文件里，就可以从整合文件导入需要的内容：

// other_file.js
import { UtilsA, ComponentB } from './all_the_things.js';
// 或者用合并对象的方式
import { ModuleA } from './all_the_things.js';
ModuleA.UtilsA();

额外注意事项 #

• 这种方式不管用不用打包工具（Webpack、Vite、Rollup等）都能正常工作，打包工具会自动处理依赖树，不会导致重复打包（只要配置正确）。
• 如果模块有副作用，确保整合文件里的导入顺序和你之前单独导入的顺序一致，避免因执行顺序问题引发bug。

这样就能彻底消除重复的导入代码，让你的文件结构更整洁！

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