export、export default和module.exports、exports

在node和react/vue(ES6)的使用中导出导入十分相似，拎出来区分下

区分export、export default和module.exports、exports

• 相同点：文件、变量、函数等导出
• 不同点：module.exports、exports是Common.Js规范；而export、export default是es6规范。

React/Vue

• React遵循es6规范。
• 一个js文件可以有很多个export，但只能拥有一个export default。
• 在React.js中，输出可以使用export或者export default，建议使用export，性能会略微好一些。

export、export default、import是什么

• ES6模块主要有两个功能：export和import
• export用于规定 对外输出本模块（一个文件可以理解为一个模块）变量的接口
• 而export default则是用于规定模块的默认对外接口，很显然默认对外接口只能有一个，所以 export default 在同一个模块中只能出现一次
• import用于在一个模块中加载引用另一个含有export接口的模块。
• 也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

---

export 和 export default 区别

• export导出多个对象，export default只能导出一个对象。
• export导出对象**需要用{ }，export default不需要{ }**，如：

  // export导出方式1
  const A = () => {...}
  const B = () => {...}
  export {A,B,C};
  
  // export导出方式2
  export const A = () => {...}
  export const B = () => {...}
  
  // export default导出方式
  const A = {...}
  export default A;

• 仅允许表达式、函数或类作为**export default导出**,你想使用{ }导出对象时只能使用default。
• 在其他文件引用export default导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为 默认导出对象，如：
  • 假设文件A、B在同级目录，实现文件B引入文件A的导出对象deObject。
  • 文件A导出：export default deObject;
  • 文件B引用：import deObject from './A'或者import newDeObject from './A'
• 性能上export会略微好一些，建议使用export.

---

node

module.exports 与 exports

• node.js遵循Common.Js规范。
• **推荐使用modules.exports = xxx**的方式来输出模块变量，它可以应对任何情况。
  具体原因可以参考廖雪峰的博客。使用exports可能会有意料之外的错误。

---