1.ES6-模块化-概述

模块化是指将一个大的程序文件，拆分成许多小的文件(即模块)，然后将小文件组合起来；

2.模块化的好处：

模块化的优势有以下几点：
1. 防止命名冲突，两个文件内命名互不干扰；
2. 代码复用，封装函数；
3. 高维护性，对文件好修改；

3.模块化规范产品：

ES6 之前的模块化规范有：
1. CommonJS => NodeJS、Browserify；
2. AMD => requireJS；
3. CMD => seaJS；

4.ES6模块化语法：

模块功能主要由两个命令构成：export 和 import；

4.1.export 命令

用于规定模块的对外接口（导出模块）；

//分别暴露m1.js
export let school = '尚硅谷';
export function teach() {
    console.log("我们可以教给你开发技能");
}

//统一暴露m2.js
let school = '尚硅谷';
function findJob(){
    console.log("我们可以帮助你找工作!!");
}
//对象的简化写法
export {school, findJob};

//默认暴露，default是一个对象 m3.js
export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}

4.2.import 命令

用于输入其他模块提供的功能（导入模块）；

<script type="module">
     //1. 通用的导入方式
     //引入 m1.js 模块内容
     import * as m1 from "./src/js/m1.js";
     //引入 m2.js 模块内容
     import * as m2 from "./src/js/m2.js";
     //引入 m3.js
     import * as m3 from "./src/js/m3.js";

    //2. 解构赋值形式
     import {school, teach} from "./src/js/m1.js";
     import {school as guigu, findJob} from "./src/js/m2.js";
     import {default as m3} from "./src/js/m3.js";

    //3. 简便形式  只针对默认暴露
     import m3 from "./src/js/m3.js";
     console.log(m3);
</script>

5.20、Babel对ES6模块化代码转换

  1. Babel 是一个 JavaScript 编译器；
  2. Babel 能够将新的ES规范语法转换成ES5的语法；
    因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；
    步骤：使用Babel转换JS代码——打包成一个文件，使用时引入即可。
赏