如何在ECMAScript 2015中将同一模块的多个组件归到同一名称下导入？

我明白你的需求——在浏览器端用webpack打包时，既想选择性导入模块里的特定组件，又想把它们归到一个统一的命名空间下，还希望写法尽可能简洁（最好单行）。确实，import * as Immutable from "immutable"虽然方便，但会引入整个模块，不符合按需加载的要求。下面给你两个实用的解决方案：

方案1：解构导入 + 立即聚合到对象（单行极简写法） #

直接在一行完成导入和命名空间聚合，适合只需要少量组件的场景：

import { Map, List, Set } from 'immutable'; const Immutable = { Map, List, Set };

如果有组件名冲突需要重命名，调整一下即可：

import { Map, List, Set as ImmutableSet } from 'immutable'; const Immutable = { Map, List, ImmutableSet };

之后你就能像全量导入那样使用：const myMap = Immutable.Map()

方案2：创建中间代理模块（可复用的优雅方案） #

如果需要在多个文件里重复导入这些组件，建一个中间模块会更高效：

1. 新建一个文件（比如src/helpers/immutable-pick.js），在里面选择性导出你需要的组件：

// 只导出业务中用到的部分
export { Map, List, Set } from 'immutable';

2. 在业务代码里，像全量导入一样引入这个中间模块：

import * as Immutable from './helpers/immutable-pick';

这种方式的好处是webpack会自动tree-shake掉immutable模块中未被导出的冗余代码，同时保持了命名空间的整洁，多个文件引用时也不用重复写解构语句。

为什么你之前的直观尝试没成功？ #

ES6的import语法本身没有原生支持“选择性导入并直接聚合到命名空间”的写法，比如你可能试过的import { Map, List } as Immutable from 'immutable'是不符合语法规范的，所以会报错。上面的两种方案都是利用现有语法特性实现的最优替代。

内容的提问来源于stack exchange，提问作者Florian R. Klein