如何将所有已有的模块导入同一个TS文件后进行统一导出？

你的需求完全可以实现，这种集中管理导出入口的文件在TS/JS项目中非常常见，核心作用就是简化后续导入路径、避免大量重复写长路径导入。

当前写法的问题 #

你现在使用export default导出一个包含所有类的对象，实际使用时会有两个问题：

• 不支持按需导入，只能全量引入整个对象再取对应类，无法单独导入单个类
• 打包工具无法做tree shaking（摇树优化），即使你项目里只用到其中一个类，所有类都会被打包进去，增加最终产物体积

推荐写法 #

建议直接使用命名导出的方式统一导出，甚至可以省略单独的导入步骤，边导入边导出：

// 假设你各个类文件都是用默认导出的写法，和你原来的import逻辑对应
export { default as Login } from "./Login/login_page";
export { default as MyAccount } from "./AccountSettings/myAccount_page";
export { default as Settings } from "./AccountSettings/settings_page";
export { default as DataProvider } from "../utils/data-provider/data-provider";

如果你的类文件本身是用命名导出实现的（比如文件内是export class Login {}而非export default Login），可以直接简化写法：

export { Login } from "./Login/login_page";
export { MyAccount } from "./AccountSettings/myAccount_page";
export { Settings } from "./AccountSettings/settings_page";
export { DataProvider } from "../utils/data-provider/data-provider";

使用方式 #

后续导入时可以按需导入需要的类，写法更简洁：

// 按需导入单个/多个类
import { Login, DataProvider } from './你这个统一导出文件的路径';

// 也可以全量导入所有导出内容
import * as Entry from './你这个统一导出文件的路径';
const myAccountPage = new Entry.MyAccount();

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