模块化中的export、export default、module.exports和exports的使用与区别

JavaScript 模块化导出和导入的指南：打造清晰且可维护的代码库

在现代 JavaScript 开发中，模块化是一个至关重要的概念。它允许我们组织和重用代码，从而实现更清晰、更可维护的代码库。在 JavaScript 中，有四种主要的模块化导出和导入语法：export 、export default 、module.exports 和 exports 。

模块化导出的类型

• 命名导出： 用于从模块中导出变量、函数或类。导出的标识符可以在其他模块中使用 import 语句导入。
• 默认导出： 用于导出模块的默认值。它只能用于一次，并且通常用于导出一个主要值或类。
• export all： 用于从另一个模块中导出所有内容。

导入模块的方法

• 导入特定标识符： 使用 import { identifier1, identifier2, ... } from 'module-name';
• 导入默认导出： 使用 import defaultExport from 'module-name';
• 导入所有内容： 使用 import * as moduleName from 'module-name';

理解 export、export default、module.exports 和 exports 之间的区别

• export 和 export default： 这是 ES 模块中推荐的导出方法。export 用于导出多个命名标识符，而 export default 用于导出模块的主要值或类。
• module.exports 和 exports： 这些是 CommonJS 模块规范中使用的导出方法。它们都用于导出模块的值，但 module.exports 返回一个对象，而 exports 直接附加到模块对象上。

最佳实践

• 优先使用 export 和 export default，因为它们在 ES 模块中更简洁、更现代。
• 避免同时使用 export 和 module.exports/exports，因为它可能导致冲突。
• 在导出的标识符前加上类型注解，以提高代码的可读性和可维护性。
• 使用一致的导出约定，以保持代码库的清晰和可预测性。

代码示例

// 模块 A
export const name = 'John';
export function greet() { console.log('Hello!'); }

// 模块 B
import { name, greet } from './module-a.js';
console.log(name); // John
greet(); // Hello!

// 模块 C (CommonJS)
module.exports = { name: 'Jane', greet: () => console.log('Hi!') };

结论

模块化导出和导入语法是 JavaScript 中强大的工具，有助于我们组织和重用代码。通过理解这些语法的区别并遵循最佳实践，我们可以编写更健壮、更可扩展的代码。

常见问题解答

1. 我应该使用 ES 模块还是 CommonJS 模块？
   • 对于新的项目，建议使用 ES 模块，因为它们更现代、更简洁。
2. 我可以在模块中导出多个默认值吗？
   • 不，每个模块只能有一个默认导出。
3. 我可以在模块中导出所有内容吗？
   • 是的，可以使用 export * from 'module-name' 从另一个模块导出所有内容。
4. 我如何导入模块中的所有导出项？
   • 使用 import * as moduleName from 'module-name';
5. 何时使用 module.exports 和 exports？
   • 在 CommonJS 模块中，module.exports 用于导出模块的值，而 exports 用于直接附加值到模块对象上。