模块化打包

模块化开发

模块化开发是当下最重要的前端开发范式。

演变过程

1. 文件划分方式
   缺点：污染全局作用域、命名空间冲突、无法管理模块依赖关系
2. 命名空间方式
   每个模块只暴露一个全局对象，所有模块成员都挂载到这个对象中。
   缺点：模块成员可以在外部被修改
3. IIFE 立即执行函数
   通过函数创建私有作用域

;(function($){
   
    //函数体
})(jQuery)

模块化规范

CommonJS in Node

• Node标准，以同步模式加载模块；
• 通过 module.exports 导出成员，通过 require 载入模块
• CommonJS只能导出一个默认成员

Require.js & AMD

• AMD标准，异步模块定义规范
• 大多数第三方库都支持
• 使用起来相对复杂
• 模块文件（js）请求频繁

//定义模块 3个参数：1.模块名称 2.依赖 3.函数体
define('module1', ['jquery'], function($){
   
    return {
   
        start: function(){
   
            $('body').animate({
   margin:'200px'})
        }
    }
})

//载入模块
require(['./module1'], function(module1){
   
    module1.start()
})

Sea.js & CMD

通用模块定义规范，类似于AMD

ES Modules in Browser

通过给script标签添加 type="module" 属性来使用ESM。

基本特性

• 自动采用严格模式
• 每个ESM模块都是单独的私有作用域
• ESM是通过CORS去请求外部JS模块的，请求地址需支持CORS
• ESM的script标签会延迟执行脚本</