携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
接触前端几年，从最初的改样式，写页面，再到后面的写组件，抽离公共方法和写公共组件，再到后面的搭建项目前端架子，越发觉得前端工程化知识的片面性，于是有了阅读这本小册的冲动
1 定义
将工程方法系统化地应用到前端开发中，以系统、严谨、可量化的方法开发、运营、维护前端应用程序，
目的: 降低生产成本，提高生产效率（降本提效）
再好的项目，团队成员不按照项目规定上来做，最后始终是一锅粥，屎山，你写一个样式，他在别的地方写了同样的样式，
2 项目搭建
2.1 工具
- JS 运行环境：node
- 包管理工具：npm
- 静态模块打包器：webpack
- JavaScript 编译器：babel
- 本地快速开发工具：dev-server
2.2 命令及配置
npm init 创建项目
npm install webpack 打包工具
// 使用 DevServer 创建一个支持 http 的本地服务。
npm install webpack-dev-server --save-dev
npm install webpack-cli
需要设置 webpack 的配置，在根目录下创建 webpack.config.js 配置文件，设置入口文件和输出文件名
2.3 问题解决
1、command not found: webpack
本地全局没有安装 webpack 就会报错。需要配置环境变量path或者全局安装
虽然网上有很多脚手架用来创建项目，作为前端工程化的学习，突破自己的瓶颈，必须要有能不依赖工具进行开发的能力
3 脚手架
没事做就自己写脚手架用，搞kpi，没能力就用网上成熟的脚手架
4 npm与yarn区别
| npm | yarn | |
|---|---|---|
| 安装 | node安装的时候，已经把npm一并安装 | npm install -g yarn |
| 依赖下载 | 按照队列形式安装每一个包 | 并行执行安装，性能有所提升 |
| 缓存机制 | 网络下载 | 再次安装时会从缓存中获取 |
5 模块化
5.1 CommonJS
5.2 AMD
5.3 CMD
5.4 ESM
export 用来导出模块接口，import 用来引入模块接口
几种模块化规范对比
| 运行环境 | 加载方式 | 运行机制 | 特点 | |
|---|---|---|---|---|
| CommonJS | 服务器 | 同步 | 运行时 | 第一次加载后会将结果缓存，再次加载会读取缓存的结构。 |
| AMD | 浏览器 | 异步 | 运行时 | 依赖前置，不管模块是否有用到，都会全量加载。 |
| CMD | 浏览器 | 异步 | 运行时 | 依赖就近，延迟加载 |
| ESM | 浏览器/服务端 | 异步 | 编译时 | 静态化，在编译时就确定模块之间的依赖关系，输入和输出。 |
6 组件化
组件化可以提高开发效率，因为组件复用和作用域隔离
6.1 如何设计一个组件
统一性、单一职责、复用性、生命周期和组件间的通信
学习的话，可以看element ui和ant ui的相关代码
7 开发规范
- 命名规范；
- 小驼峰 大驼峰
- 文件资源命名
- 参数命名
- UI 规范；
- 项目结构规范；
├─api （接口）
├─assets （静态资源）
├─components （公共组件）
├─styles （样式）
├─router （路由）
├─store （vuex）
├─utils （工具函数）
└─views （页面）
- workflow 规范；
分支管理master、develop 、feature、
- git commit 规范。
feat：本次改动为新增功能；
fix：本次改动为修补 bug；
docs：本次改动为新增或修改文档（documentation）信息；
style：本地改动为修改样式文件；
refactor：本次改动为代码重构；
test：本次改动为新增或修改测试用例；
chore：构建过程或辅助工具的变动；
总结
这本小册主要是初探前端工程化，很多东西，只要是参与项目过程中，就会有一定的了解和认识，浅尝辄止
第5点和6点，规范性的东西，在一般公司都有，根据公司内部规定开发，即可，大同小异
如果有借阅卡的，可以用借阅卡看下，不推荐购买本小册
