前端工程化概述

我心飞翔 分类:javascript

1. 前端工程化

全副武装:通过工程化提升【战斗力】

"刀耕火种"的年代

6b7tdf.png

技术是为了解决问题而存在的

面临的问题

  • 想要使用ES6+新特性,但是兼容有问题
  • 想要使用Less / Sass / PostCSS 增强CSS的编程性,但是运行环境不能直接支持
  • 想要使用模块化的方式提高项目的可维护性,但运行环境不能直接支持
  • 部署上线前需要手动压缩代码及资源文件, 部署过程需要手动上传代码到服务器
  • 多人协作开发,无法硬性统一大家的代码风格,从仓库中pull回来的代码质量无法保证
  • 部分功能开发时需要等待后端服务接口提前完成

主要要解决的问题归纳如下

  1. 传统语文或语法的弊端
  2. 无法使用模块化/组件化
  3. 重复的机械式工作
  4. 代码风格统一、质量保证
  5. 依赖后端服务接口支持
  6. 整体依赖后端项目

2. 工程化表现

一切以提高效率、降低成本、质量保证为目的的手段都属于"工程化"

一切重复的工作都应该被自动化
  • 创建项目
    • 创建项目结构
    • 创建特定类型文件
  • 编码
    • 格式化代码
    • 校验代码风格
    • 编译/构建/打包
  • 预览/测试
    • Web Server / Mock
    • Live Reloading / HMR
    • Source Map
  • 提交
    • Git Hooks
    • Lint-staged
    • 持续集成
  • 部署
    • CI / CD
    • 自动发布
graph LR
A[创建项目]-->B[编码]
B-->C[预览/测试]
C-->D[提交]
D-->E[部署]
E-->B

3. 工程化不等于某个工具

6bz4UA.png

一些成熟的工程化集成

  1. create-reace-app
  2. vue-cli
  3. angular-cli
  4. gatsby-cli

6qSZ5R.png

4. Powered by Node.js

厥功至伟的 Node.js

工程化内容概要

  1. 脚手架工具开发
  2. 自动化构建系统
  3. 模块化打包
  4. 项目代码规范化
  5. 自动化部署

回复

我来回复
  • 暂无回复内容