note
note copied to clipboard
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
