ES6中如何在命名空间下导入指定命名导出？

我明白你的需求——既要享受按需导入带来的tree-shaking优势（让Webpack这类打包器只打包你实际用到的代码），又不想直接使用导出的成员名，而是把它们归到一个自定义命名空间下。你之前尝试的import { foo } as bar from 'bar'确实是无效语法，因为ES6模块的as关键字只能用来重命名单个导出成员，没法直接将一组导入成员绑定到一个命名空间对象上。

不过我们有完美的替代方案，既符合最佳实践，又能实现你的需求：

方法1：手动构建自定义命名空间 #

先按需导入你需要的成员，再把它们组合成一个自定义的命名空间对象：

// 按需导入特定成员（可以选择重命名避免命名冲突）
import { foo as barFoo, baz as barBaz } from 'bar';

// 构建你的自定义命名空间
const bar = {
  foo: barFoo,
  baz: barBaz
};

// 使用方式
bar.foo();
bar.baz();

如果导入的成员名和命名空间里的键名一致，还可以用对象字面量的简写语法更简洁：

import { foo, baz } from 'bar';
const bar = { foo, baz };

// 同样可以通过命名空间访问
bar.foo();

方法2：重命名单个成员（轻量替代方案） #

如果你只是想给导入的成员加个“前缀”式的命名空间感，也可以直接在导入时重命名：

import { foo as barFoo, baz as barBaz } from 'bar';

// 使用时直接调用重命名后的成员
barFoo();
barBaz();

为什么不推荐import * as bar from 'bar'？ #

你提到的这个语法会导入模块的所有导出成员，哪怕你只用到了其中一两个。这样会让打包器无法进行有效的tree-shaking，最终打包出来的体积会更大，确实不符合前端性能优化的最佳实践——而我们上面的方法只导入你需要的部分，完美解决了这个问题。

内容的提问来源于stack exchange，提问作者Matt O'Tousa