前端工程化，本质上还是从开发到构建再到部署这一过程中涉及到的工作流的问题，那么在这个过程中影响开发流程和效率的第一个东西是什么？很显然，是前端开发工具。
这里的工具并非简单指代编辑器，而是指我们进入真正编码阶段需要做的准备工作。
我们可能需要安装编辑器、配置开发环境、选用合适的脚手架，同时写一些基础的项目代码，简单完善一下项目开发中可能用到的东西，甚至需要考虑不同环境下需要用到不同的技术栈。
这些准备工作看起来简单，但是对于缺乏经验的开发人员来讲，也是个不小的挑战，可能需要花费好几天的时间才能做出最终决定，但是并不一定能保证最终能够匹配现有的业务，最终的结果是时间成本白白浪费掉了。
而脚手架这个东西，就是为了解决这些问题。
通过利用脚手架，我们可以快速生成项目基础代码，生成项目模版，而且，这些基础代码都是经过经验丰富的开发者不断提炼出来的，具有非常高的可靠性。相对于自己配置来说，可以节约我们不少的开发时间，当然，熟能生巧，我们也可以自定义我们自己的项目模版，从而生成自己的脚手架。
所以，对于一个中高级的前端开发者来说，一个基本的能力就是可以通过选用合适的技术来确定业务所需的技术栈，然后选择合适的脚手架工具对项目进行初始化。
然后，不断的优化项目配置，找到最优路径去解决开发过程中涉及到的问题，为整个团队的开发效率提升贡献出自己的能力。
那么，脚手架到底是什么？
在建筑行业，脚手架指的就是用钢管或者竹竿搭建起来的一个一个一层又一层的架子，用来保证工程能够顺利进行。
同理，在软件领域，脚手架是通过各种工具，生成项目基础代码的一种技术，它可以为将要开发的项目提供一套完整的基础技术框架模版，并且可以选择性的安装项目开发过程中可能用到的模块，也提供了一套基本的开发、构建、部署流程。
这样，作为开发者，我们就可以集中力量进行开发任务即可，而不必分心考虑其他事情。
那么我们可以思考这样一个问题：
如果放弃脚手架，如何从0-1新建一个前端项目？
其实很简单。
首先，我们需要新建一个package.json文件，配置项目的基本信息，比如：名称、入口文件、开发者信息、依赖包等信息。
其次，我们需要用npm、yarn作为包管理器。包管理器在安装依赖时会生成对应的日志文件。
然后，我们需要确定这个项目要使用的技术栈。比如：vue 、react 、ng等。选择技术栈的时候，我们需要考虑到整个团队的情况，团队成员时偏向vue 还是react ，是否能够熟练运用ts ，习惯使用那种样式预处理器...
接下来，我们安装技术栈对应的依赖包，然后在src源码文件中创建入口文件，随后，我们选择合适的构建工具，安装对应的构建工具的依赖包，通常情况下咱们用的都是webpack，然后我们通常需要新建config文件件，在里面添加webpack相关的配置文件，并且可以配置开发、生产环境两种配置。
有了基础的技术框架、和构建工具，下一步就是将整个构建流程进行打通。
这就需要安装各种loader插件，Babel等js转化包等，同时配置项目的入口文件，出口文件等，当然构建工具的配置也需要根据开发环境和生产环境分别进行配置，这时候项目基本上就可以跑起来了。
vue-cli 和 create-react-app
这两个脚手架是个人感觉目前用的最多的两个脚手架，但是它们的设计理念多少有些不同之处。
create-react-app是fackbook官方提供的react开发工具，它实际上包含两个东西，一个是create-react-app，一个是react-script，前者的用来创建项目，后者作为项目运行时的依赖，提供项目的启动、编译、测试等技术功能。
create-react-app将所有的配置细节都封装在react- script中，直接降低了开发者的学习成本，当然，它也提供了eject选项来满足开发者的高级定制需求，但是这种配置真正执行起来也相当繁琐。
而vue-cli是由vue.js官方提供，它的定位是基于vue进行快速开发的完整系统。
完整的vue-cli由三部分组成：
- @vue/cli
- @vue/cli-service
- @vue/cli-plugin-
其中，@vue/cli作为全局命令使用，@vue/cli-service作为项目集成工具使用，@vue/cli-plugin-则提供一套插件系统。
vue-cli一方面可以快速创建项目，达到开箱即用，另一方面可以用自定义配置覆盖原有配置，有很强的灵活性，相对于 create-react-app对开发者更加友好。
了解了脚手架之后，如何对它进行优化？
脚手架，除了用来创建项目之外，我们需要了解它的基本功能，能做哪些优化，这样我们才能在开发中得心应手，遇到问题也可以做到有的放矢。
我们可以先简单了解一下这些能够进行优化的地方，实际上都是webpack的主要配置模块。
- loaders 加载器
比如：eslint-loader、babel-loader、style-loader、css-loader、sass-loader、less-loader等。
- 插件系统
htmlwebpackplugin、definePlugin、hotmoduleReplacementPlugin、minicssExtractPlugin、forktschecker、inlineChunkHtmlPlugin等。
它们都使用了跟构建相关的一些插件，比如htmlwebpackplugin生成 html文件，导出样式的插件、加速 ts 检查的插件等。
- 优化配置 optimize
它们都使用 terserPlugin来压缩js ，用splitchunKS做分包，
- resolve和resolve loader
它们都用pnpwebpackplugin 来加速包管理器的安装和解析。
简单的对比，可以让我们对脚手架有稍微深一点的认识。
虽然官方提供了一套完整的脚手架模版，但是在实际开发过程中，我们也会需要根据项目去定制化我们的脚手架。
比如我们可能需要把我们封装的公共组建或者方法引入我们的脚手架，又或者需要针对特定项目做web pack的特定配置，以提高开发效率，甚至我们需要脚手架中有团队内部特有的代码规范，这就需要我们有定制化脚手架的能力。
而定制脚手架又有两种方法。一种是基于模版，另外一种是基于代码。
基于模版的相对简单一些，你可以把你需要的项目文件事先写好，存放在git仓库中，然后用包管理工具写一些命令去远程拉取即可。
基于代码的就麻烦很多，需要我们精通 node ，用 node 中的文件系统、os 、procss 、exec等命令去生成相关的模版文件，当然这中间会涉及到拆分各种各样的包，又涉及到多个包管理系统...
没事儿的时候尝试一下就明白了...
脚手架就先介绍到这里吧，还是需要多看多去配置多去尝试....
没有关注公众号的朋友，觉得文章对您有启发的话，记得点赞、关注、评论、转发一下。
