前端工程化概述

[banli17]

工程化解决的问题

• 传统语言语法的弊端
• 无法使用模块化和组件化
• 重复的机械工作，如压缩
• 代码风格统一、质量保证
• 依赖后端服务接口支持
• 整体依赖后端项目

什么是工程化

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

一切重复的工作都应该被自动化。

• 创建项目
  • 创建项目结构
  • 创建特定类型文件
• 编码
  • 格式化代码
  • 校验代码风格
  • 编译/构建/打包
• 预览/测试
  • web server / mock
  • live reloading / hmr
  • source-map
• 提交
  • git hooks (代码检查和提交日志检查)
  • lint-staged
  • 持续集成
• 部署
  • CI/CD
  • 自动发布

工程化不等于某个工具，工程化是一种项目的方案和规划，工具是实施的方式。

工程化的核心是 Node.js。

内容

• 脚手架工具开发
• 自动化构建系统
• 模块化打包
• 项目代码规范化
• 自动化部署

体验

npm scripts

"dev": "browser-sync . --files \"css/*.css\"",
"build": "sass ./scss/index.scss ./css/index.css --watch",
"start": "run-p dev build"

sass 之前的扩展名是 sass，因为语法规范不被人接受，所以 sass v3 引入的新的语法，扩展名为 scss。

npm-run-all

npm-run-all 可以同时运行多个 npm script，

为什么

• & 在 window 上有兼容问题
• npm-run-all 提供了三个命令，可以很方便的并行、顺序执行 npm 命令

npm-run-all clean lint --parallel "build:** -- --watch"

# 顺序执行
run-s

# 并行执行
run-p

常用的自动化构建工具

npm scripts 能解决一些构建任务，但是很难处理复杂的任务。

• Grunt: 基于临时文件，每步都会生成临时文件，速度较慢。
• Gulp: 基于内存。支持同时执行多个任务，相对 Grunt 更简单。
• FIS

[banli17]

https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit