web前端工程化-0-模块化和包管理

模块化:分解和聚合

• 分解:

  • 简化,确定研究的边界->契合主观规律

• 聚合:

  • 组合,解决具体的问题->契合客观规律

• 函数层面:

  • 定义
  • 调用

• JS层面->文件

  • 问题:(模块化解决的问题)
    • 全局污染
    • 依赖混乱

标准

• CommonJS CJS(民间社区)
  • 运行时-运行过后才能确定依赖关系
• Ecmascript Module ESM(官方)
  • 编译时-运行前就要确定好依赖关系

实现

• 浏览器
• node
• 构建工具
  • webpack
  • rollup
  • esbuilder

包管理

包

• 框架

  • VUE
  • 约束代码结构

• 库

  • react/jquery/lodash
  • 调用关系

前端框架

• 语言

• 协议

• 环境

  • web API
  • drag API
  • observer API
  • canvas API
  • node
  • 小程序

• 框架/库

  • VUE
  • axios
  • eggrn
  • uniapp
  • taro
  • loda
  • moment

• 服务器

  • Node
  • express
  • koa
  • MySQL
  • redis
  • MongoDB

• 工程化

  • ts
  • sass
  • less
  • stylus

管理

• 问题
  • 如何下载
  • 如何升级
  • 如何卸载
  • 如何发布
  • 版本控制
• npm
  • 包的属性
  • registry(仓库)
  • 操作
    • cli:command-line interface
    • GUI:Graphic User Interface
• pnpm
  • 包管理
  • 工程管理
• yarn
• cnpm
• bower(适配浏览器的环境,其他只有node环境支持)