一、为什么出现module
JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。
- 直接引入文件（就是执行一次js文件的内容）
import "./common/index.js" //写法1
import "./common" //写法2 默认是index.js
//import './common/index.css' 引入css
- export 单个抛出（注意写法）
//正确写法
export let a = 10;
export function fn(){
console.log("我是一个抛出函数")
}
//错误写法
const let event = ()=>{
console.log("event")
}
export event;
单个按需引入
import {a,fn} from './common';
console.log(a)
fn()
/*名字必须要求和抛出的名字一一对应，如果不一样则报错，这样的话，
当其他人修改函数名字或者变量名字时，我也需要相应的改名，
比较麻烦改，这时候可以利用给整体别名的方式来解决*/
引入所有并且整体起别名
import * as obj from './common';
console.log(obj.a)
obj.fn()
- export default 抛出
当一次性抛出所有：
//一次性抛出所有
let a = 10;
function fn(){
console.log("我是一个抛出函数")
}
export default {
a,
fn
}
引入
//在其他文件引入
import obj from './common';
console.log(obj.a)
obj.fn()
当抛出一个：
function fn(){
console.log("我是一个抛出函数")
}
export default fn;
引入（在其他文件引入的时候名字不必保持一致）
//在其他文件引入
import fn_e from './common';
fn_e()
总结：
当我直接import "xxx.js"，相当于引入js文件执行一次js文件内容；
当我使用export 抛出的时候，可以逐个抛出文件（注意写法，看⬆️），在引入的时候import {x,fn} from "xxx.js"按需引入，使用的时候 console.log(x); fn()；
但是这时候引入文件和抛出文件的名字必须保持一样，这样其他人修改了名字的时候我也必须修改，如果是多个文件就比较麻烦，这时候可以给整体起别名，看当我使用export 抛出的时候，在引入的时候可以整体起别名import * as from "xxx.js"，使用的时候obj.x、obj.fn()；
当我使用export default {a:a,fn:fn}抛出整体的时候，在引入的时候
import obj from "xxx.js"；使用的时候obj.a、obj.fn()；当我使用export default fn抛出一个时候，在引入的时候import fn_e from "xxx.js"；这时候引入的时候和抛出的时候名字可以不一样。
注意：只要用export抛出的时候才有按需引入