js[esmodule与NodeJS(commonJs)导入导出的理解与区别]

前提

JS中模块管理的导入导出内容是当前比较容易混淆的内容之一，但是其实也并不复杂，这个内容可以分为两个部分来理解。

第一个部分（commonJs规范----运行时加载）：

代表：nodeJS
内容：
1.导入方式： require函数 （运行时加载）是导入语句，通常用来获取module.exports导出的内容
如：let a = require(‘…/a.js’); 导入文件
let path = require（‘path’); 导入依赖
其实质是文件或者依赖中有模块带出即module.exports

2.导出方式1：module.exports模块（module）中的导出语句
如： module.exports = {
名称：函数/变量/常量等 ------- 名称类似于命名，也可以简写
}
3.导出方式2：exports 是module.exports的一个引用,真正暴露的还是module.exports 所以还是直接使用module.exports 更好。
如：exports.fn = …

第二个部分（es—编译时加载）：

1.导入方式：import … from “…” 或者 import { test } from “…”
如：两者的区别在于一个导入整体，一个导入部分，按需导入
可以大概理解为前者导入export default导出的内容，后台导入export导出的内容
2.导出方式：export default 通常是以一个对象的形式导出内容，且一个.js文件中只能有一个
如：export default{ // 可以参考.vue的文件里面的export default
名称：函数/变量/常量等 ------- 名称类似于命名，也可以简写
}
3.export 是es6+中的一个导出语句、常常用于导出常量、函数、文件、模块等
如：export const a = ‘’;
export function a(){};
export let a = {};
export {
a
}

module.exports和exports区别

1、exports 是指向的 module.exports 的引用（重点）
2、module.exports 初始值为一个空对象 {}
3、require() 引用的是module.exports返回的值而不是exports

解释：https://cnodejs.org/topic/5231a630101e574521e45ef8
在Node引入了模块（Module）概念，一个模块可以通过module.exports 或 exports 将函数、变量等导出，以使其它 JavaScript 脚本通过require() 函数引入并使用。module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。只要使用了exports或者module.exports的,js文件都会默认暴露出module.exports这个对外接口（exports暴露出的内容会在使用的时候默认加入到module.exports里面）
示例：
https://cnodejs.org/topic/52308842101e574521c16e06

import和require的区别

1.import是编译时加载,也就是说需要用babel等工具编译,编译时会导入其他文件的代码
2.require是运行时加载,运行代码时加载另一份js文件
3.import是ES6标准(编译时加载) 导入 export导出
require是社区CMD/AMD(运行时加载) 导入 module.exports导出

export和export default的区别

1.export与export default均可用于导出函数、文件、模块等（export default常用于导出模块、文件，export常用于导出函数、常量）
2.在一个文件或模块中，export、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，如：import {test} from’test.vue’
而export default则不需要如：import test from ‘test.vue’

参考：https://www.cnblogs.com/xiaotanke/p/7448383.html

总结：

按理说目前使用js开发某些内容的时候，往往都是会安装NodeJs环境的，因此使用node相关的导入导出是不会有问题的，但是在开发过程中我们最好还是使用es6的导入导出模块.
以vue开发为例子，webpack配置相关的内容大部分都是用require来进行导入导出的，而.vue相关的文件中，以及一些常规的.js文件中都是使用es6来导入导出。
开发使用es6，脚手架配置则用nodejs导入导出