如何在ES6中导入子模块并设置别名？能否实现指定常量聚合导入？

嘿，你的需求完全可以实现，但你写的import { CONSTANT01, CONSTANT02 } as selectedConstants from './constants'语法并不符合ES6的import规范哦。下面我来给你说明正确的实现方式：

为什么你的语法不生效？ #

ES6的import语法中，as关键字只有两种合法用法：

• 给整个模块设置别名：import * as allConstants from './constants'
• 给单个导出成员设置别名：import { CONSTANT01 as c1, CONSTANT02 as c2 } from './constants'

但不能直接将解构出来的多个成员用as打包成一个对象，这属于语法错误，浏览器或Node.js会直接抛出语法异常。

三种可行的实现方案 #

方案1：手动组装目标对象（推荐，只导入需要的成员） #

先单独导入你需要的常量，再用对象字面量把它们组装成你想要的格式，这种方式只会加载指定的导出成员，性能更优：

// 导入指定常量
import { CONSTANT01, CONSTANT02 } from './constants';

// 组装成目标对象（ES6 shorthand语法，等价于 { CONSTANT01: CONSTANT01, CONSTANT02: CONSTANT02 }）
const selectedConstants = { CONSTANT01, CONSTANT02 };

console.log(selectedConstants);
// 输出：{CONSTANT01: 'CONSTANT01', CONSTANT02: 'CONSTANT02'}

方案2：先导入整个模块，再提取所需成员 #

如果需要从模块中挑选多个分散的成员，也可以先导入整个模块的所有导出，再解构出需要的部分组装对象：

// 导入整个模块的所有导出
import * as allConstants from './constants';

// 解构出需要的常量并组装
const { CONSTANT01, CONSTANT02 } = allConstants;
const selectedConstants = { CONSTANT01, CONSTANT02 };

console.log(selectedConstants);
// 输出：{CONSTANT01: 'CONSTANT01', CONSTANT02: 'CONSTANT02'}

方案3：提前在导出模块中分组（更便捷） #

如果你有权修改./constants.js文件，可以直接把需要的常量打包成对象导出，这样导入时就能直接拿到目标对象：

// constants.js 文件内容
export const selectedConstants = {
  CONSTANT01: 'CONSTANT01',
  CONSTANT02: 'CONSTANT02'
};

// 其他独立导出的常量（如果有的话）
export const CONSTANT03 = 'CONSTANT03';

然后导入时直接获取这个对象：

import { selectedConstants } from './constants';

console.log(selectedConstants);
// 输出：{CONSTANT01: 'CONSTANT01', CONSTANT02: 'CONSTANT02'}

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Hemã Vidal