在拉钩学习的笔记（二十四）前端模块化开发

1、模块化开发
    当下最重要的前端开发规范。
    模块化演变过程；模块化规范；常用的模块化打包工具；基于模块化工具构建现代 Web 应用；打包工具的优化技巧
2、模块化的演进过程
    1.文件划分方式：污染全局作用域；命名冲突；无法管理模块依赖关系
    -早期模块化完全依靠约定
    2.命名空间方式：依旧能访问到私有变量
    3.IIFE(利用立即执行函数)：外部访问不到私有变量
    早期在没有工具和规范的情况下对模块化的落地方式
3、模块化规范的出现
    模块化标准 + 模块加载器
    note.js 提出的 CommonJS 规范：
        一个文件就是一个模块
        每个模块都有单独的作用域
        通过 module.exports 导出成员
        通过 require 函数载入模块
    CommonJS 是以同步模式加载模块
    浏览器的规范：AMD（Asynchronous Module Definition 异步模块定义规范）
    Require.js 库实现了 AMD ，也是一个强大的模块加载器
    定义模块↓
    define('模块的名字', [声明模块的依赖], 函数，函数的参数与模块的依赖一一对应，每一项是模块导出的成员，为当前的模块提供私有的空间，通过return导出成员) 
    载入模块↓
    require(['./module1'], function(module1){module1.start()})
    目前绝大多数第三方库都支持 AMD 规范
    AMD 使用起来相对复杂；模块 JS　文件请求频繁
    淘宝推出：Sea.js 执行 CMD 标准
4、模块化标准规范：模块化的最佳实践
    浏览器遵守 ES Modules 规范，是现下最流行的模块化标准
    Node.js 遵守 CommonJS 规范
5、ES Modules 特性
    通过给 script 添加 type = module 的属性，就可以在 ES Module 的标准执行其中的 JS　代码了
    特性： 1.ESM 自动采用严格模式，忽略 ‘use strict’，屏蔽全局this
        2.每个 ES Module 都是运行在单独的私有作用域中
        3. ESM 是通过 CORS 的方式请求外部 JS 模块的
        4. ESM 的 script 标签会延迟执行脚本
6、 ES Modules 的导入和导出
    导出 export : exports var name = "foo module";
    导入 import : import  { name } from './module.js';
    开启 broswer-sync . --files **/*.js 监视所有的 js 文件
    注意事项：export {} 是固定用法，并不是导出对象； 如果想导出对象， export default { name }
        import {} 是固定用法，不是解构  import { default as title} 获取默认成员，需要重命名
        export 是导出成员的引用，并不是复制一份
        import 导入的成员是只读，不能修改
7、 ES Modules import 导入的用法
    import { name } from './module.js'
    后缀 .js 不能省略，后期用打包工具可以省略
    相对路径种的 ./ 不能省略
    可以使用绝对路径或者url
    如果只是引用模块，而不需要使用它的成员的话，可以保持 {} 为空，这样只会执行模块，不会提取成员，也可以简写为 import './module.js'
    如果模块中导出的成员特别多，且都要用的时候，可以写为 import * as mod from './module' 将所有导入的成员放进 mod 中
    import 只能出现在文件的最顶层，不能 写在条件中 或者 变量；
    如若动态的加载模块 import('./module.js').then(function (module) {console.log(module)})，当模块加载完成后会自动执行 then 中的回调函数
    同时获取默认成员可以简写为 import title, { name , age } from './module' 逗号, 左变 title 是默认成员（名字可以随便取）， 右边是 具名成员
8、 ES Modules 直接导出 导入成员
    将导入的成员作为结果直接导出
    可以 直接将 import 改为 export ，一般用来写组件的 index 文件
9、ES Modules in Browser 的Polyfill 兼容方案
    Browser ES Module Loader 模块，可以让绝大多数浏览器兼容 ESM
    获取：https://unpkg.com/browse/browser-es-module-loader@0.4.1/dist/
    分别引入 Browser ES Module Loader 的两个文件的地址，
    如果是IE的话依旧不兼容，但可以引入一个 Promise Polyfill 路径：https://unpkg.com/promise-polyfill@8.2.0/dist/polyfill.min.js
    如果原本支持 ES Module Loader 的话，引入 Polyfill 结果会被执行两次，可以给每个引入 script 的标签添加一个 nomodule 的属性，但不推荐生产环境使用
10、ES Modules 在 Node.js 的支持情况
    在 node.js 中使用 ESM： 实验特性
    1.确认 node.js 的版本是大于 8.5  node --version
    2.将 js 文件后缀 改为 .mjs；
    3.启动 Node.js    node --experimental-modules index.mjs
    可以使用 ESM 载入原生模块； 可以载入第三方模块； 不可以用提取第三方模块的成员，因为第三方模块都是导出默认成员； 但可以提取系统模块中的成员
11、在 ESM 中载入 CommonJS 模块
    可以在 ESM 中导入 CommonJS 模块
    CommonJS 中不能导入 ESM 模块；不能在 CommonJS 模块中通过 require 载入 ESM 
    CommonJS 模块始终只会导出一个默认成员，所以 EMS 不能直接提取 CommonJS 的成员
12、在 Node.js 中使用 EMS 和 CommonJS 的差异
    在node.js 中自动重新启动  nodemon --experimental-modules 文件名
    ESM 中没有 CommonJS 中的那些模块全局成员
13、在 Node.js 的新版本 进一步支持 ESM
    在文件夹中创建一个 package.json 文件；设置 {"type": "module"}
    这样，项目下的所有 js 文件都会默认以 ESM 工作，不需要将扩展名改为 .mjs 
    如果要运行 CommonJS 的话，需要将文件扩展名改为 .cjs； 就可以正常使用 CommonJS 规范了
14、如果是早期的 Node.js 可以使用 Babel 实现 ESM 的兼容    
    安装：yarn add  @babel/node @babel/core @babel/preset-env --dev
    PS：yarn 跟 npm 都是包管理工具
    运行：直接运行 yarn babel-node index.js 是不可以的，需要在后面加 --presets=@babel/preset-env；
        或者新建一个 .babelrc 的文件，里面配置{"presets": ["@babel/preset-env"]}