JS模块化

定义方式很简单：记住导出语法 export {},如果需要导出多个变量名字，用逗号隔开即可 

let obj = {
    name: "obj",
    age: 20,
    introduce() {
        console.log("my name is " + this.name + ",age" + this.age )
    }
}
 
export { obj };

进入正题：

现有a.js

 
let myname = "zhangsan";
let fruit = "苹果"
export {myname, fruit};

那么我们如何在b.js里引入呢？编写的时候没有顺序，只要把名字写对即可

import {fruit, myname} from "./a";

其实ES6模块化语法很简单，就是用export导出，用import引入，但是有个问题不知道你们发现没有，就是要清楚的知道js里面是什么变量名字，比如这里的fruit，myname，那么显然这样不是很友好的，有没有更好的方式呢？别急，它来了，它来了，它真的来了！！

import * as ma from './a.js';

通过这样的语法，我把a模块所有的语法一次性导入进来，并且通过as的方式给起了别名，叫做ma，这里的ma里面有我们写在a.js里面的2个变量，是不是快很多了？不过，这依然不是完美的方案，下面讲讲default

先看代码，定义了一个c1.js

 
function fn1() {
    console.log(fn1)
}
function fn2() {
    console.log(fn2)
}
function fn3() {
    console.log(fn3)
}
 
export default { fn1, fn2, fn3 }

那么我们在其他js里面引用的时候，就可以随便写名字了

import suibian from './c1.js'

那么，我们来测试下，记住用谷歌浏览器哦~~~~~~，首先要把text/javascript改成module

那有什么办法，让大多数浏览器都能识别模块化代码呢？那就需要webpack来帮忙

1.webpack作用：

2.会从第一个文件找，如果里面再引入其他文件，一直找，最后打包成main.js

3.这个过程就叫做编译，编译的过程中，webpack会把所有的模块化代码去除，转换成es5的代码，让浏览器认识。

最后要记得，webpack处理不同的文件，就需要不同的loader来处理