模块化主假如用来抽离大众代码，断绝作用域，防止变量争执等。将一个庞杂的体系分解为多个模块以轻易编码。

会报告以下内容

1. CommonJS
2. AMD 及 中心道理完成
3. CMD 及 中心道理完成
4. UMD 及 源码剖析
5. ES6 Module
6. webpack打包战略

CommonJS

同步加载

CommonJS API是以在浏览器环境以外构建 JS 生态体系为目的而发生的项目

假如没有写后缀名Node会尝试为文件名增加.js、.json、.node后再搜刮。

.js件会以文本花样的JavaScript剧本文件剖析，.json文件会以JSON花样的文本文件剖析，.node文件会以编译后的二进制文件剖析。

AMD

异步加载（对象）

“Asynchronous Module Definition”（异步模块定义），是由RequireJS提出的

AMD中心完成

  function require (url, callback) {
    // url能够换成List，然后遍历；
    var $script = document.createElement('script');
    $script.src = url;

    // 应用onload回调，完成依靠加载
    $script.onload = function (e) {
      // 省略callback 检测
      callback();
    }
    document.body.appendChild($script);
  }

CMD

按需加载

由玉伯提出的（seajs），按需剖析加载模块（价值挺大的），须要运用把模块变成字符串剖析一遍才晓得依靠了那些模块

CMD中心完成

  // ajax，怕忘了原生ajax怎样写。顺手写一个

  function myAjax (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.send();

    xhr.onreadystatechange = function () {
      if (request.readyState === 4) {
          if (request.status === 200) {
              return callback(request.responseText);
          } else {
              // 省略...
          }
      } else {
        // 省略...
      }
    }
  }

  // 完成
  function require(url) {
    myAjax(url, function(res) {
      // 此时 res 的对应JS的 String情势
      // 剖析 省略
      // 实行
      eval(res);
    });
  }

UMD

兼容AMD，CommonJS 模块化语法。

UMD源码剖析

  (function (root, factory) {

    // 推断是不是支撑AMD（define是不是存在）
    if (typeof define === 'function' && define.amd) {
        define(['b'], factory);

    // 推断是不是支撑NodeJS模块花样（exports是不是存在）
    } else if (typeof module === 'object' && module.exports) {
        module.exports = factory(require('b'));

    // 前两个都不存在，则将模块公开到全局（window或global）
    } else {
        root.returnExports = factory(root.b);
    }
  } (this, function (b) {
      // ...
  }));

import

加载援用

• 编译时加载（静态实行）。
• 加载的是援用

• 不能处于代码块中

  • 为了完成编译时加载

    • 提案示意能够用 import()运用时加载

• 不能运用表达式和变量 等运转时加载的语法

  • 同上

webpack打包战略

import会被编译成 require/exports （CommonJS范例）

1. 直接引入

import xxx.js或许import xxx.css会像增加<script>和<link>标签一样注入到全局中去

2. commonjs同步语法

webpack会将require('abc.js')打包进援用它的文件中。以对象的情势猎取。

3. commonjs异步加载

webpack(require.ensure)：webpack 2.x 版本中的代码支解。

在commonjs中有一个Modules/Async/A范例，内里定义了require.ensure语法。webpack完成了它，作用是能够在打包的时刻举行代码分片，并异步加载分片后的代码。

此时list.js会被打包成一个零丁的chunk文件。像如许：1.d6f343b727f5923508bf.js

比方：vue路由懒加载const Foo = () => import('./Foo.vue')

manifest

manifest文件是最早加载的，manifest是在vendor的基础上，再抽掏出要常常更改的部份，经由过程manifest.js文件来治理bundle文件的运转和加载。(比方关于异步加载js模块部份的内容)

webpack v4.6.0+ 增加了预取和预加载的支撑

  import(/* webpackPrefetch: true */ 'LoginModal');
  
  会天生 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部

整顿不容易，喜好请 star，https://github.com/zhongmeizhi