>[success] # 前端开发面临的问题 ~~~ 1.想使用es6+新特性，但是却不能很好的兼容浏览器 2.想使用 less/sass/postCss 增强css的编程性，但是浏览器是不支持这些的 3.想使用模块化的方式开发提高项目维护性但是运行环境有些不能直接支持 4.上线前手动压缩代码和文件资源 5.统一大家的代码风格 以上问题之前都是通过人为的方式解决，现在这些重复的工作被自动化完成这些琐碎的步骤就是前端工程化的目的 ~~~ [工程化不错的博客](https://www.yuque.com/kongdepeng/rgpm60/pt15oa) >[success] # 项目开发流程步骤 ~~~ 1.package.json 依赖管理文件 2.选择 npm 或 Yarn 作为包管理器 3.确定项目技术栈 4.选择构建工具，例如webpack 5.打通构建流程，通过安装与配置各种 Loader 、插件和其他配置项 6.优化构建流程，针对开发/生产环境的不同特点进行各自优化 7.选择和调试辅助工具，例如代码检查工具和单元测试工具，安装相应依赖并调试配置文件。 8.编写说明文档 README.md package.json 1) npm 项目文件 package-lock.json 2) npm 依赖 lock 文件 public/ 3) 预设的静态目录 src/ 3) 源代码目录 main.ts 3) 源代码中的初始入口文件 router.ts 3) 源代码中的路由文件 store/ 3) 源代码中的数据流模块目录 webpack/ 4) webpack 配置目录 common.config.js 4) webpack 通用配置文件 dev.config.js 4) webpack 开发环境配置文件 prod.config.js 4) webpack 生产环境配置文件 .browserlistrc 5) 浏览器兼容描述 browserlist 配置文件 babel.config.js 5) ES 转换工具 babel 配置文件 tsconfig.json 5) TypeScript 配置文件 postcss.config.js 5) CSS 后处理工具 postcss 配置文件 .eslintrc 7) 代码检查工具 eslint 配置文件 jest.config.js 7) 单元测试工具 jest 配置文件 .gitignore 8) Git 忽略配置文件 README.md 8) 默认文档文件 ~~~ >[success] # 脚手架 [关于脚手架介绍的文章这个文章分上中下后续需要细读一下](https://juejin.im/post/6844903928618811400) ~~~ 1.脚手架它原本是建筑工程术语，指为了保证施工过程顺利而搭建的工作平台，它为工人们在各层施工提供 了基础的功能保障在软件开发领域，脚手架是指通过各种工具来生成项目基础代码的技术。多个项目开发 流程大概率会有有相同内容，每个新项目都重复上面八个步骤是会让项目反而变得繁琐，比如相同文件目录 ，相同的构建工具的配置，通过脚手架工具免去人工处理上的环节，轻松地搭建起项目的初始环境 2.脚手架的本质:'创建项目基础结构、提供项目规范和约定'，举个例子当我们每次搭建新的项目的时候 都需要可能有'相同的组织结构'，'相同的开发范式'，'相同的依赖（比如都用vue）'，'相同的基础代码' 每次这些相同的内容，脚手架就是为了解决在每开一次新的项目时候都要去手动构建，通过脚手架自动 生成一个项目骨架 3.针对框架本身的脚手架 -- vuecli / angular-cli / create-react-app，这类脚手架都是会根据项目创建时，通过 用户选择的配置生成对应的项目基础结构，一般是针对特定自己的框架开发的 4.通用的脚手架 -- Yeoman，允许创建任何类型的应用程序。它允许快速开始新项目并简化现有项目的维护。 5.Plop 是一个基于node js所开发的小工具，主要作用是根据模板代码生成目标代码 ~~~ >[danger] ##### 总结 ~~~ 1.对比几个前端常见的工具更好的说明脚手架的作用 1.1.'yeoman'，项目结构模板。 1.2.'webpack'，代码打包工具。 1.3.'grunt/gulp', 流程构建工具，和webpack有一定交集，但是定制性更强。 在建筑工程中脚手架的意思是为了保证各施工过程顺利进行而搭设的工作平台，'在编程'中可以最简单的理解 就是创建一类通用项目的结构目录基础和通用的项目规范。 2.脚手架的意义： 虽然存在vuecli 这类脚手架只是会将公用一些文件目录划分好，但是涉及到实际开发需求场景，中会出现一部分 基础代码甚至业务代码在相同类型项目时还是重复的，这个时候最笨的做法就是复制项目A，删除部分代理 直流一个骨架，开发项目B，以此不停地迭代重复这时我们就可以把公共部分都放到脚手架工具当中生成， 让脚手架工具发挥更大的价值 ~~~ >[danger] ###### 对vuecli 和react-script 两个脚手架比较文章 [链接](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=416#/detail/pc?id=4415)