es6模块化，js与打包

模块化好处 防止命名冲突 代码复用 高维护性，这也是前端开发的新特性
三种暴露的方法

第一种，分别暴露

export let school='分别暴露';
export function teach(){
    console.log("好好学习es6");
}

第二种，统一暴露

 let school='统一暴露';
 function teach(){
    console.log("好好学习es6");
}
export {school,teach}

默认暴露，这是最为常见的一种方式

export default{
    school:'默认暴露',
    change:function(){
        console.log("默认暴露");
    }
}

那其他html引入的方法就简单很多了
注意：给引用文件设置type="module"等于给文件设置了私有作用域，bb.js文件成了单独的模块，运行在自己的私有作用域中，而不是全局作用域中。此处引入需要打开服务器，vscode的话 ,下载live serve，右键open打开即可

<script type="module">
import {school,teach}  from "./m1.js";//分别引入即可
import * as m2 from "./m2.js";
import  m3 from "./m3.js";//只能针对默认暴露


console.log(school);
console.log(m2);
console.log(m3);
</script>

由于兼容性问题，其实有一点浏览器不支持es6
所以我们需要用一个东西，叫做babel
它可以将新的语法转换为浏览器可以识别的es5的语法
转换完后可以将这个东西打包好

我们需要的步骤有几个

1.输入 npm init -yes (安装npm)
2.安装工具 babel-cli 命令行工具 babel-preset-env 将es6转es5 browserify 打包 (但是我们项目中会用webpack)
就是输入，npm i babel-cli babel-preset-env browserify -D
3.局部安装 npx babel ES6/mukuai/mukuai01 -d dist/js --preset=babel-preset-env（ES6/mukuai/mukuai01是我文件地址，dist/js是生成后的地址，需要按照你们的来）
4.打包 npx browserify dist/js/app.js -o dist/bundle.js
若是第四步出错，有可能版本太高引起的,目录新建一个.babelrc文件，改为es2015版本可以解决

{
    "presets": ["es2015", "stage-0"]
  }