前端中什么是脚手架？

脚手架在百度百科中的定义是：为了保证各施工过程顺利进行而搭设的工作平台

前端脚手架

随着前端工程化的概念越来越深入人心，脚手架应运而生。简单来说，「前端脚手架」就是指通过选择几个选项快速搭建项目基础代码的工具。前端脚手架可以有效避免我们 ctrl + C 和 ctrl + V 相同的代码框架和基础配置。

背景

当我们准备开发一个新项目的时候：

• 在较短的时间内搭建出一个完备的项目基础环境（技术栈完整，辅助功能丰富，兼顾不同环境），是比较困难的
• 不同的项目需求和团队情况，导致我们在搭建项目基础环境的时候不能一成不变
  

而前端脚手架工具：

• 可以帮助我们快速生成项目的基础代码
• 脚手架工具的项目模板经过了开发者的提炼和检验，一定程度上代表了某类项目的最佳实践
• 脚手架工具支持使用自定义模板，我们可以根据不同的项目进行“定制”
  

对于一个熟练的前端工程师，我们最基本的能力之一就是通过技术选型确定所需要的技术栈，然后根据技术栈选择合适的脚手架工具，来进行项目的初始化。

项目基础结构

• package.json 是 npm 依赖管理体系下的基础配置文件。
• 选择使用 npm 或 Yarn 作为包管理器，这会在项目里添加上对应的 lock 文件，来确保在不同环境下部署项目时的依赖稳定性。
• 确定项目技术栈，在明确选择后安装相关依赖包并在 src 目录中建立入口源码文件。
• 选择构建工具，目前的主流选择还是 webpack ，对应项目里就需要增加相关的 webpack 配置文件。（可以考虑针对开发/生产环境使用不同配置文件）
• 打通构建流程，通过安装与配置各种 Loader 、插件和其他配置项，来确保开发和生产环境能正常构建代码和预览效果。
• 优化构建流程，针对开发/生产环境的不同特点进行各自优化。例如，开发环境更关注构建效率和调试体验，而生产环境更关注访问性能等。
• 选择和调试辅助工具，例如代码检查工具和单元测试工具，安装相应依赖并调试配置文件。
• 最后是收尾工作，检查各主要环节的脚本是否工作正常，编写说明文档 README.md，将不需要纳入版本管理的文件目录记入 .gitignore 等。
  

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) 默认文档文件

前端常见的脚手架工具

• Yeoman
• Create-React-App
• Vue CLI