Angular模块化开发中结合index.ts使用import * as的技术问询

这是个非常实用的代码优化技巧！通过index.ts（也就是Angular里常说的Barrel文件）结合import * as，能把分散的多行导入整合成一行，让代码整洁度提升不少，具体操作分两步走：

步骤1：创建目标目录的index.ts文件 #

找到你导入的所有文件所在的共同目录：../shared/ang-graph/shapes/，在这个目录下新建（或编辑已有的）index.ts，把需要对外暴露的组件、模型统一在这里导出：

// ../shared/ang-graph/shapes/index.ts
export { BusinessLogicComponent } from './business-logic.component';
export { BusinessLogicModel } from './business-logic.model';
export { PageReferenceComponent } from './page-reference.component';
// 后续新增的同目录成员，直接在这里追加导出即可

步骤2：用import * as替换多行导入 #

回到你原来写导入语句的业务文件，把原来分散的多行import替换成一行import * as语句，给这个导入的命名空间起一个语义清晰的名字（比如Shapes），之后使用这些成员时通过命名空间访问：

// 优化后的导入语句，一行搞定
import * as Shapes from '../shared/ang-graph/shapes';

// 使用示例
const logicInstance = new Shapes.BusinessLogicModel();
<Shapes.BusinessLogicComponent></Shapes.BusinessLogicComponent>

额外小贴士 #

• 后续如果在shapes目录下新增组件/模型，只需要在index.ts里追加导出，不用修改业务文件的导入语句，维护成本更低。
• 命名空间的名字可以根据业务场景调整，比如BusinessShapes、GraphShapes，只要保证语义清晰就行。
• Angular的构建工具（如Webpack）会正确处理这种Barrel文件，不会导致冗余打包，放心使用。

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