js require/exports和import/export

知识来源：知乎:require，import区别？

---

CommonJS规范中，使用require/exports进行导出导入。ES6规范中，使用import/export导入。
浏览器中视乎各家浏览器的实现，上述规范可能并未全部实现，因此import/export并不一定能在浏览器中原生执行。

Node.js遵从CommonJS，尽可能兼容ES6，因此在Node.js一般情况下，只能使用require/exports，它并不兼容ES6的import/export。但是，Node.js可以通过安装babel、webpack等包的辅助，让ES6语法在Node.js中生效并且可以打包出来作为前端给浏览器执行(babel能把ES6语法编译成ES5)

而vue往往在Node.js中进行开发并且使用babel、webpack等辅助包。因此，在此时的Node.js环境中，无论是require/exports、还是import/export以及动态import都可以使用。而且，他们的导入也不止于js，他们支持导入vue文件、图片文件等更多格式(同样依赖于第三方包，并不是Node.js原生支持)

require/exports 的用法只有以下三种简单的写法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

最终导出的是module.exports，也就是require返回的对象等价于module.exports，你完全可以使用module.exports.fs=fs这样的代码进行导出。exports类似于语法糖，存在对象引用的常见问题，即

let exports=module.exports//node.js的隐藏行为

//...文件中你的代码

因此exports=fs实际上直接为exports赋值，并没有更改module.exports，不能导出fs。同时需要注意值传递和引用传递问题，详细见上面知乎链接。

而 import/export 的写法就多种多样：

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'
//ES未来规范还支持const a=import('fs')这样的动态导入
//webpack2或以上已支持该语法，该import返回一个Promise
//vue支持以Promise得到的组件，即你可形如component:import("MyComponent")来使用

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

同样需要注意值传递和引用传递问题，此时无论是原始数据类型还是对象类型均会影响。详细见上面知乎链接。