** 聊聊CommonJS（服务器端）与ES6 Module（浏览器端）的使用与区别
第一种： ES6 Module
在ES6模块化出现之前，前端已经尝试了AMD,CMD等规范，这些规范不能同时应用于浏览器和服务器端。
ES6，是浏览器和服务器端通用的规范化开发规范，模块导入是值的引用，是静态的。
每个js文件都是一个独立的模块
导入模块成员，使用import关键字。导入需要用一对 {} 大括号来接收大于一个的我们需要导入的方法或函数，而且必须与导出时的名称一模一样
暴露模块成员使用 export关键字。
// B.js
function show() {
console.log(‘show方法被执行‘)
}
export default show
// A.js
import show from ‘./B.js‘
show() // show方法被执行
需要用babel配置，在.babel文件中
const presets = [
["@babel/env", {
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}]
];
module.exports = { presets };
第二种： CommonJS
用于服务器端，nodejs中用，导入的是值的拷贝，同步加载。
模块分为 单文件模块 与 包
模块成员导出: module.exports 和 exports
模块成员导入: require(‘模块标志符‘）
// B.js
function show() {
console.log(‘show方法被执行‘)
}
module.exports = {
show
}
// A.js
const bModule = require(‘./B.js‘)
bModule.show() // show方法被执行
** 模块化
有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
原文：https://www.cnblogs.com/halo-vv/p/14835750.html