1.模块化的好处

• 防止命名冲突
• 代码复用
• 高维护性

2.ES6之前的模块化

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

3.ES6模块化语法

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

• export命令用于规定模块的对外接口
• import命令用于输入其他模块提供的功能

4.模块化的第一种方式(htmlscript标签对import)

   //模块化的第一种方式
        //1.通用的导入方式 
         import * as m1 from '../js/m1.js';
         console.log(m1);
         import * as m2 from '../js/m2.js';
         console.log(m2);
         import * as m3 from '../js/m3.js';
         console.log(m3);
         m3.default.change('平院');
        //2.解构赋值形式导入
         import { name, grd } from './js/m1.js';
         console.log(name);
         console.log(grd);
         import {school,teach} from './js/m2.js'
         console.log(school,teach);
         import {default as dx} from './js/m3.js'
         console.log(dx);
        //3.简便形式，针对默认暴漏
        import m3 from './js/m3.js'
        console.log(m3);

5,模块化的第一种方式(单独的js文件)

   <script src="./app.js" type="module"></script>

//入口文件

// 模块引入
import * as m1 from './js/m1.js'
import * as m2 from './js/m2.js'
import * as m3 from './js/m3.js'
console.log(m1);
console.log(m2);
console.log(m3);

6,babel模块化

由于某些浏览器不支持ES6语法，利用babel可以转化为ES5 //1.安装工具 babel-cli babel-preset-env browserify(webpack)

npm i babel-cli  babel-preset-env browserify -D

//2.npx局部执行

 npx babel   src/js -d dist/js --presets=babel-preset-env

// 3.打包

npx browserify dist/js/app.js -o dist/bundle.js