1.使用上的区别
commonjs
// 文件名：foo.js
// 两种导出方式
// 第一种
export.name = ""
// 第二种
module.export = {
name:""
}
// 导入
const a = require('foo.js')
console.log(a.name)
注意事项：exports和module.exports本来指向的是同一个引 用地址，但是真正导入的是module.exports,所以当我们手动更改 exports = {},这样就会报错，我们只能改属性。
esmodule
// 文件名：foo.js
// 三种导出
export const name=''
// 第二种
const age=''
export {age} // 固定语法，不是对象的简写，不能写为{age:age}
// 第三种
const s=""
export {s as sex}
// 三种导入方式
// 第一种
import {
name,
age,
sex
} from 'foo.js'
// 第二种
import { name as Fname, age as FAage } from './foo.js'
// 第三种
import * as foo from './foo.js'
注意事项： 因为import在静态解析阶段执行，它是一个模块之中最早执行的，所以import只能作为模块顶层的语句出现。
编译时的区别
- commonjs 模块是运行时加载，ES6 模块是编译时输出接口。 运行时加载：commonjs模块就是对象；即在输入时先加载整个模块，生成一个对象，然后再从这个对象上读取属性和方法。也这样理解：commonjs加载的是一个对象（module.exports属性），该对象只有在脚本运行时才能生成。
- commonjs是导出值的拷贝，es6 module是导出值的引用
要点
1、commonjs加载是同步的，所以必须等到相应的模块加载完毕，
在会执行后续代码，在node环境中使用，没有什么问题，因为node
的js文件都是本地的。
2、如果要是在浏览器中执行，因为浏览器中都是从远程服务器上请
求到的，同步势必会引起一些卡顿。
3、但是在webpack中可以使用commonjs是因为webpack可以对其
进行打包处理。
