深入理解模块化编程（export、export default、exports、module.exports、require、import）

一、export、export default、exports、module.exports区别及使用场景

1.export（导入用import）

• export命令用于规定模块的对外接口。一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量
• 写法：

export var firstName = 'Michael';

var firstName = 'Michael'; export {firstName};

export function multiply(x, y) { return x * y; };

• 与export default命令的区别：

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同

• 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js';

2.export default（导入用import）

• export default命令，为模块指定默认输出

// export-default.js 
export default function () { console.log('foo'); }

• 与export命令的区别：其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

import customName from './export-default'; 
customName(); // 'foo'

• 正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句

3.exports和module.exports区别（导入用require）

• 根据使用方法来说：

通常exports方式使用方法是：exports.[function name] = [function name]

moudle.exports方式使用方法是：moudle.exports= [function name]

• 这样使用两者根本区别是：

**exports **返回的是模块函数

**module.exports **返回的是模块对象本身，返回的是一个类

• 使用上的区别是

exports的方法可以直接调用

module.exports需要new对象之后才可以调用

exports是module.exports的一个引用，exports指向的是module.exports；也就是说exports的方法module.exports也是一定能完成的

二、require、import（ES6）区别及使用场景

1.require导入exports和module.exports导出的模块

2.import导入export、export default导出的模块

3.一般能相互转换，语法有差异，一定条件下可以把require转成import

三、注意

1.无法在独立的js文件中使用import导入export（或export default）导出的模块；原因是node早先只支持CommonJS的模块化方案，所以ES6的模块化特性用不了。但是在Node V13.2.0之后开始实验性的支持ESM模块化，不过需要创建package.json文件指明type类型为module。

• 执行一下下面的命令，默认所有配置为‘y’，从而快速生成package.json，然后修改文件中的type即可
• npm init -y

2.无法在html文件的script导入 中使用import导入export（或export default）导出的模块；

• 这里报错的原因是用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type="text/javascript"，需要改为type="module"，（建议使用这种方法进行测试）
• 而且需要在live server中打开（解决跨域的问题）

3.一般在webpack项目中可以使用import导入export（或export default）导出的模块，会把es6语法自动转换成es5，而且自动创建了package.json文件，如vue项目

4.require: node 和 es6 都支持的引入

export / import : 只有es6 支持的导出引入

module.exports / exports: 只有 node 支持的导出（Node里面的模块系统遵循的是CommonJS规范）

 参考：

终于讲清楚了nodejs中exports和module.exports的区别_嘿嘿-CSDN博客

export 和 export default 的区别 - 枫鸟~ - 博客园