ES6 模块导出导入方式梳理
场景：导入的一个方法执行不了，发现是没有加{}导致的，真的很难找这个问题。就此机会整理一下import和{}的使用，其实也就是 ES6 模块导出导入方式梳理。
两种默认导出方式：默认导出(export default)和命名导出(named export)
| 命名导出 | 默认导出 | |
|---|---|---|
| 语法 | export const/let/function | export default |
| 导入时的花括号 | 需要花括号 import { funcA } | 不需要花括号 import config |
| 数量限制 | 可以有多个命名导出 | 每个模块只能有一个 |
| 重命名 | 必须使用原名称或显式重命名 | 在导入时可以任意命名 |
最佳实践建议：
1、若模块主要导出一个东西（类/工具对象），推荐 默认导出
2、若模块导出多个独立的工具函数/常量，推荐 命名导出
3、保持导出方式的一致性，要么全部命名导出，要么主要使用默认导出
一、命名导出
导入模块：
// 导入特定的命名导出
import { funcA, funcB } from "./config.js";
// 导入时重命名
import { funcA as myFuncA, funcB as myFuncB } from "./config.js";
// 导入所有命名导出作为一个对象
import * as config from './config';
// 使用: config.funcA(), config.funcB()
导出：
// 方式1: 统一导出
function funcA(x, y) {return x + y}
function funcB(x, y) {return x - y}
export { funcA, funcB }
// 方式2: 分别导出
export function funcA(x, y) {return x + y}
export function funcB(x, y) {return x - y}
// 方式3: 导出时重命名
export { funcA as functionA, funcB as functionB }
二、默认导出
导入：
// 导入默认导出
import config from './config';
// 使用: config.funcA(), config.funcB()
// 可以重命名默认导入
import myConfig from './config';
导出：
// 方式1: 直接默认导出
export default {
funcA: () => {},
funcB: () => {}
};
// 方式2: 先定义后默认导出
const myFunctions = {
funcA: () => {},
funcB: () => {}
};
export default myFunctions;
// 方式3: 默认导出一个函数/类
export default function() {}
三、混合导出
导入：
// 方式1: 分开导入
import config, { funcA, funcB } from './config';
// 方式2: 全部作为命名空间导入
import * as config from './config';
// 默认导出在 config.default 中
// 命名导出直接作为 config 的属性
导出：
export const funcA = () => {};
export const funcB = () => {};
export default {
funcC: () => {},
funcD: () => {}
};