技术文献

方式一：分别导出

export const user = { name: 'Alice', age: 25 };
export const config = { theme: 'dark', lang: 'zh' };
export const tools = { debug: true };

接收方式1：

import { user, config, tools } from './data.js';
//输出：
console.log(user);
console.log(config);
console.log(tools);

接收方式2：

import * as mydata from './data.js';
//输出：
console.log(mydata);
console.log(mydata.user);
console.log(mydata.config);
console.log(mydata.tools);

✕import mydata from './data.js';//这种不可以，必须* as mydata，默认导出可以自定义变量名
console.log(mydata.user); //报错

方式二：统一批量导出

const user = { name: 'Alice' };
const config = { theme: 'dark' };
export { user, config }; // 这里不是对象字面量，是导出引用列表

接收方式1：

import { user, config } from './data.js';
//输出：
console.log(user);
console.log(user.name);
console.log(config);
console.log(config.theme);

接收方式2：

import * as mydata from './data.js';
输出
console.log(mydata);
console.log(mydata.user);
console.log(mydata.config);

方式三：默认导出
导入： 不使用花括号，且可以随意命名。

const calculator = {
  add: (a, b) => a + b
};
export default calculator; // 导出整个对象作为默认项

接收方式1：

// 即使导出时叫 calculator，导入时我可以叫它 math

import math from './tools.js'; 
console.log(math.add(1, 2)); // 3

接收方式2：注意：mydata.default中default不能少

import * as mydata from './data.js';
console.log(mydata.default.add(1, 2)); // 3

只有当你使用 通配符导入 (import * as) 或者 动态导入 (import()) 时，JS 才会把整个模块包装成一个大对象，此时 default 才会作为该对象的一个属性出现。

✍批量导出扩展：

ES6 模块 export default 本身只能导出一个值，不能直接默认导出多个对象。但你可以把多个对象包成一个对象 / 集合，再默认导出，然后按不同方式接收。

一、导出端写法（把多个对象打包）

// a.js
const obj1 = { name: 'obj1' }
const obj2 = { name: 'obj2' }
const obj3 = { name: 'obj3' }

// 打包后默认导出
export default {
  obj1,
  obj2,
  obj3
}

二、接收方法（3 种常用）

1. 整体接收，再解构，变量名可以自己任意定义

import all from './a.js'

console.log(all.obj1)
console.log(all.obj2)

2. 导入时直接解构（最常用）

import { obj1, obj2 } from './a.js'

3. 整体导入 + 重命名：必须在default对象里面解构

import * as mods from './a.js'

console.log(mods.default.obj1)