webpack 和 rullup都是打包工具：
webpack倾向于应用程序的打包
rollup更适合在文件打包方面，例如 jq库， vue代码库等
模块化是模块编程思想的体现，在开发环境中，通过本地启用server方式的开发；例如 nodejs
在浏览器环境中是不能直接支持的 或者 存在兼容问题，这需要一个打包工具使打包后的代码可以在浏览器环境中良好运行。（打包成静态代码）
模块化的核心：
1. 独立的作用域
2.导出模块内的数据 （模块数据的输出）
3.引入模块内的数据
2和3合起来是模块数据的导出和利用
commonJS 规范
核心：
独立作用域： 一个文件是一个模块 （通过直接读取硬盘文件实现，如Nodejs通过文件系统实现）
导出模块内的数据： module.exports 或 exports 导出数据 ---> 每个文件都有一个 module 对象，导出的数据挂载在上面
引入模块内的数据： let a = require("./a.js"); ---> 引入的是导出的数据
对比：
数据：
后端同步加载，文件系统；
web ajax 异步加载
nodeJS 文件系统、I/O操作及net操作等在浏览器中无法实现
（此规范无法在浏览器中实现，只有另外制定了一套规范）；
WEB模块化规范：
AMD UMD ESM
CMD 叫做通用模块定义规范（Common Module Definiton），它是类似于 CommonJs 模块化规范，但是运行于浏览器之上的
淘宝玉伯的 SeaJS 库
CMD 规范拥有简单、异步加载脚本、友好的调试并且兼容 Nodejs
define(function(require, exports, module) {
var a = requrie("./a");
module.exports = {
a: 1,
b: a
};
});
AMD 异步模块定义
requireJS库 （开发需要有服务端环境才能运行） define定义模块 require引入模块
引入代码库： <script data-main="./main.js" src="./vendors/require.js"></script> ---> 是独立与浏览器之外的，server
data-main: 项目的入口文件名字路径， 当 requirejs 库加载完后会自动加载入口文件；（head中会自动通过 script 标签 引入入口文件）
模块的定义：
define()方法定义模块，
define({a:1, b:2, c:3}) ---> 可以是直接一个对象，导出的是一个对象
define(function(){ return obj }) ---> 通过回调函数 必须有 return
数据的导出：
同模块的定义
数据的引入：
静态引入：define(["./a","./b"],function(a,b){ console.log(a, b)}) 依赖前置
动态引入： define(function(requrie){ let a = require("./a"); console.log(a) }); 需要时require 模块的配置：require.config 方法
require.config({ paths: { jquery: 'jquery.min' } });
UMD ： 通用模块定义规范（Universal Module Definition）
同一个 JavaScript 包运行在浏览器端、服务区端等（符合多端规范）
（它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身）
((root, factory) => {
if (typeof define === 'function' && define.amd) {
//AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
//CommonJS
var $ = requie('jquery');
module.exports = factory($);
} else {
root.testModule = factory(root.jQuery);
}
})(this, ($) => {
//todo
});ESM
es6 module ： 静态加载，export 和 export 不能出现在判断等动态语句
获取的是模块接口的引用（模块内数据发生改变，接口引用数据也会改变）
es6 module内部自动采用严格模式
=====================没有从语言层面上根本解决模块化问题（独立作用域、默认严格模式）=================================================