普通模块化：

模块1 aa.js：
(function (w) {
    var msg = '我是aa.js中的  msg';

    function getMsg() {
        console.log(msg);
    }

    w.aa = {getMsg};
})(window);
模块2 bb.js
(function (w, a) {
    var msg = '我是bb.js中的 msg';

    function getMsg() {
        console.log(msg);
        a.getMsg();
    }

    w.bb = {getMsg: getMsg};
})(window, aa);
主文件 app.js
(function (b) {
    b.getMsg();
})(bb);
index.html文件中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="aa.js"></script>
<script src="bb.js"></script>
<script src="app.js"></script>
</body>
</html>

缺点：全局变量污染、html中引入需要顺序

CommonJs规范

1、基于node的服务端：

模块1 module1.js
exports.foo = function () {
    console.log('这是module1模块的 foo函数')
};
exports.bar = function () {
    console.log('这是module1模块的 bar函数')
};
模块2 module2.js
module.exports = {
    username: '张三',
    say() {
        console.log('我是module2模块的say方法')
    }
};
主文件  app.js
var m1 = require('./modules/module1');
var m2 = require('./modules/module2');

m1.foo();
m1.bar();

console.log(m2.username);
m2.say();

运行  node app.js

2、浏览器端：浏览器不能识别CommonJs中的语法，所以需要Browserify 用来编译打包

  创建 src目录（开发源代码文件夹）  和  dist目录（打包后的生产文件夹）

  下载 全局安装 npm install browserify -g

          本地安装：npm install browserify --D

   运行  browserify  js/src/app.js  -o  js/dist/bundle.js

    然后在index.html中引入 dist/bundle.js文件即可

AMD规范：

依赖于 requirejs 
下载 requirejs并放在libs文件夹下
专门用于浏览器端的规范，加载模块是异步
定义模块 用define()    
引入使用模块用 requirejs()

模块1 aa.js
define(function () {
    var msg = 'aa中的msg';
    function shown() {
        return msg;
    }
    return {shown};
});
模块2  bb.js
define(['aa'], function (a) {
    var s = 'hello';

    function showMsg() {
        console.log(s, a.shown());
    }

    return {showMsg};
});
主文件  main.js
requirejs.config(
    {
        baseUrl: 'js/',//以下路径都是基于本路径
        paths: {//每个模块的定义
            aa: './modules/aa',
            bb: './modules/bb',
            jquery: './libs/jquery-3.4.1.min'//jquery模块支持amd规范，但只可以小写
        }
    }
);
requirejs(['bb', 'jquery'], function (b, $) {
    b.showMsg();
    $('body').css('backgroundColor', 'red');
});

index.html中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script data-main="./js/main.js" src="./js/libs/require.js"></script> //引入文件
</body>
</html>

CMD:

http://caibaojian.com/cmd-cn.html](http://caibaojian.com/cmd-cn.html

ES6规范：

因现在很多浏览器依然不能识别es6语法，所以需要编译成浏览器都可识别的es5的语法，用 babel 编译器

babel：是JavaScript编译器，主要是用于将es2015( es6 )以上版本的语法，转换成es5的语法，来兼容浏览器

babel安装：1、babel-cli( cli ：command line interface，若想要使用 babel的命令，则必须安装 babel-cli )

                         npm install babel-cli -g ( 需要全局安装 ) 

                         babel -v 可以返回版本就证明babel安装成功了

                    2、babel-preset-es2015 ( preset-预设，代表将babel中用于转换es6到es5的所有工具打包下载下来 )  

                         npm install babel-preset-es2015 -D 

         配置 ：根目录下创建  .babelrc 文件 ( rc 代表 run control，表示这是运行时控制文件,既运行时需要读的文件 )，

         .babelrc文件中配置    { " presets " : [ " es2015 " ] }

导出：

     常规导出方式：export function fn(){ -----   }   export var as = ' ' ; 

     默认导出方式：export default function(){ ----- }

导入：

   常规导出的接收方式：import { a, b } from ' ./modules/modules1 '

  默认导出的接收方式：import module3 from ' ./modules/modules2 '

运行代码去转换成 babel ./js/src -d ./js/build ( 将src文件夹下所有文件转换成es5语法 )

此时仍不可直接引用，会报错找不到 require，这是因为浏览器不能识别Commonjs语法，此时需要 browserify

  npm install browserify -g  
  npm install browserify -D

     browserify  ./js/build/main.js  -o  ./js/dist/bundle.js
     ( 将转换后的main.js文件编译成浏览器可识别的bundle.js文件)
    此时 方可在index.html中引用 dist/bubdle.js 文件了  
    <script src=" ./js/dist/bundle.js ''></script>

Web前端模块化