【笔记】前端工程化

[MJingv]

前端工程化三个阶段

模块化/工具化 -> 大爆发 -> 全家桶

• 预编译：babel
• 模块管理 webpack/browserify
• 流程和插件管理 webpack/gulp/grunt

CI 持续集成（Continuous Integration）

• 小步提交，快速验证
• 大/小闭环
• 小闭环：代码改动-》本地提交—》代码检查-》单元测试-》本地预览-》
• 大闭环：代码改动-》远程提交-》代码检查-》单元测试-》编译-》部署测试环境-》集成测试-》集成预览-》

CD 持续交付（Continuous Delivery）

可交付产物

• jar包/zip -> docker image (支持env)

Docker部署优势

• 小成本打包整个运行实例
• 拉平服务器环境和依赖
• 作为可部署产出物，可运行可调式
• 通过环境变量区分差异

流程

• 发布
  • 回滚
• 部署（部署=环境迁移）
  • 蓝绿部署（st）
  • 灰度部署（放量）
• 验证
  • 测试用例
  • 回归验证
• 监控
• 指标
• 告警

前端工程化目标

• 模块和资源管理工具

  • webpack/requirejs/browserify

• 本地预览工具

  • webpack/pm2/nodemon

• 测试工具

  • jest/mocha/cypress/eslint/sonar

• 编译和打包工具

  • webpack/rollup/browserify

• 发布工具

  • webpack/gulp/grunt

• 测试环境&线上环境

  • nginx/express/koa/docker

• 监控

• 提供开发工具，提升开发体验

  • webpack/commander

• 自动化原有人工流程

  • webpack/jenkins/grunt/gulp

webpack原理

打包机制

• loader1-》loader2-》loader3-》bundle
• loader类似与pipe传递

插件原理

• loader有不同生命周期
• plugin在不同生命周期里插入各种方法

测试工具

单元测试（Unit Test）

• Jest/Mocha
• 核心模块测试

集成测试（E2E Test）

• Puppeteer/NightWatch
• 核心流程测试

Jenkins

• 任务和流程管理
• 构建和部署管理
• 权限控制

到家工具

• nine
• talos
• wolf
• plus