export default 和 export之间的区别

export default 和 export之间的区别

在前端开发中，export default和export是两种常用的导出方式，它们用于将模块中的功能、对象或值暴露给其他模块使用。虽然它们的目的相同，但在使用方式和适用场景上却存在显著差异。本文将深度解析这两者的区别，并探讨如何正确使用它们。

一、export default 和 export 是什么

• export default：用于导出模块中的默认成员，一个模块中只能有一个export default。它通常用于导出模块的主要功能或对象。
• export：用于导出模块中的多个成员，每个成员都可以被单独导入。一个模块中可以有多个export。

二、export default 和 export 的区别

1. 导出数量

• export default：仅允许导出一个成员。
• export：可以导出多个成员。

2. 导入方式

• export default：导入时可以使用任意名称，因为默认导出没有具体的名称。

  import myDefault from './myModule';
  

• export：导入时需要使用与导出时相同的名称，或者使用解构赋值。

  import { myFunction, myVariable } from './myModule';
  // 或者使用解构赋值
  import { myFunction as func, myVariable as var } from './myModule';
  

3. 导出内容

• export default：可以导出任何值，包括对象、函数、类等。
• export：同样可以导出任何值，但更适合导出多个具体的成员。

4. 使用场景

• export default：常用于导出模块的主要功能或对象，如一个库的主要接口或组件。
• export：常用于导出多个工具函数、常量或辅助对象。

5. 兼容性

• export default：在ES6模块和CommonJS模块中都有支持，但使用方式略有不同。
• export：是ES6模块特有的功能，不适用于CommonJS模块。

三、如何使用 export default 和 export

1. 使用 export default

// myModule.js
export default function myDefaultFunction() {console.log('This is the default function');
}// 另一个文件
import myFunc from './myModule';
myFunc(); // 输出：This is the default function

2. 使用 export

// myModule.js
export function myFunction() {console.log('This is myFunction');
}export const myVariable = 'This is myVariable';// 另一个文件
import { myFunction, myVariable } from './myModule';
myFunction(); // 输出：This is myFunction
console.log(myVariable); // 输出：This is myVariable

四、扩展与高级技巧

1. 混合使用

在一个模块中，可以同时使用export default和export，但export default只能有一个。

2. 重命名导出

使用as关键字可以在导出时重命名成员，以便在导入时使用更友好的名称。

// myModule.js
export { myFunction as func, myVariable as var };// 另一个文件
import { func, var } from './myModule';

3. 动态导入

利用动态导入（import()），可以在运行时根据需要导入模块，这对于优化性能和按需加载非常有用。

4. 结合命名空间

使用命名空间可以组织和管理导出的成员，避免命名冲突。

// myModule.js
const utilities = {myFunction,myVariable
};
export { utilities };// 另一个文件
import { utilities } from './myModule';
utilities.myFunction();

五、优点与缺点

1. export default

• 优点：简洁明了，适合导出模块的主要功能或对象。
• 缺点：只能导出一个成员，且导入时名称可以随意，可能导致混淆。

2. export

• 优点：可以导出多个成员，且导入时名称与导出时一致，避免混淆。
• 缺点：当导出成员较多时，可能导致导入语句变得冗长。

六、常见报错及解决方案

1. 报错：SyntaxError: Unexpected identifier

问题描述：
当你尝试导入一个模块，但使用了错误的语法或者路径时，可能会遇到这个错误。

解决方案：

• 确保导入语句的语法正确，例如使用import而不是require（除非你正在使用CommonJS模块）。
• 检查模块文件的路径是否正确，包括文件名和扩展名。

示例：

// 错误的导入语句
const myModule = require('./myModule'); // 这应该是ES6模块，应使用import// 正确的导入语句
import myModule from './myModule';

2. 报错：TypeError: Cannot read property 'xxx' of undefined

问题描述：
当你尝试访问一个未正确导入的模块的成员时，可能会遇到这个错误。

解决方案：

• 确保你已经正确导入了模块，并且使用了正确的成员名称。
• 如果你是使用export default导出的，确保在导入时给了它一个正确的名称。

示例：

// myModule.js
export default {myFunction() {console.log('Hello, world!');}
};// 另一个文件
// 错误的导入语句，没有给默认导出命名
import from './myModule';
myModule.myFunction(); // TypeError: Cannot read property 'myFunction' of undefined// 正确的导入语句
import myModule from './myModule';
myModule.myFunction(); // 输出：Hello, world!

3. 报错：SyntaxError: Missing curly braces around imported specifier

问题描述：
当你尝试使用解构赋值导入多个成员，但忘记了花括号时，可能会遇到这个错误。

解决方案：

• 确保在使用解构赋值导入多个成员时，使用了花括号。

示例：

// myModule.js
export const foo = 'foo';
export const bar = 'bar';// 另一个文件
// 错误的导入语句，缺少了花括号
import foo, bar from './myModule'; // SyntaxError// 正确的导入语句
import { foo, bar } from './myModule';
console.log(foo); // 输出：foo
console.log(bar); // 输出：bar

4. 配置问题：Babel或其他编译器配置不正确

问题描述：
如果你在使用Babel或其他JavaScript编译器，并且遇到了与模块导入/导出相关的错误，可能是因为配置不正确。

解决方案：

• 检查你的编译器配置文件（如.babelrc、babel.config.js或webpack.config.js），确保你已经正确配置了模块解析和转换。
• 对于Babel，确保你安装了适当的插件和预设（如@babel/preset-env），并且它们在配置文件中被正确引用。

示例（Babel配置）：

{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-modules-commonjs"]
}

这个配置示例告诉Babel使用@babel/preset-env预设来转换ES6+语法到CommonJS模块，同时还使用了@babel/plugin-transform-modules-commonjs插件来处理模块的导入/导出。

七、总结与展望

本文详细解析了export default和export之间的区别，包括导出数量、导入方式、导出内容、使用场景以及优缺点等方面。通过理解这些差异，我们可以更合理地选择和使用这两种导出方式，从而编写出更加清晰、可维护的模块化代码。

八、完整使用示例

// myModule.js
export default function defaultFunction() {console.log('This is the default function');
}export function anotherFunction() {console.log('This is another function');
}export const myVariable = 'This is myVariable';// 另一个文件
import defaultFunc, { anotherFunction, myVariable } from './myModule';
defaultFunc(); // 输出：This is the default function
anotherFunction(); // 输出：This is another function
console.log(myVariable); // 输出：This is myVariable

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！