【前端工程基础-CLI】系列文章，持续更新中：【前端工程基础-CLI】HowVueCLI已实现【前端工程基础-CLI篇】CreactReactApp是如何实现的关注玩相机的程序员公众号，最新文章第一时间阅读。原文链接http://axuebin.com/articles/fe-solution/cli/desc.html转载请联系我们。0.前面提到初始化项目，就一定要提到脚手架这个词，那为什么这篇文章的标题不是脚手架而是初始化项目呢？脚手架一词来自建筑工程领域。百度百科的解释是“脚手架是为保证各项施工过程顺利进行而搭建的工作平台”，意思是脚手架为工人提供了施工的基本功能。将其扩展到软件工程领域意味着什么？从狭义上讲，脚手架是一种可以使用配置好的项目模板快速初始化项目，避免重复性工作，为开发者提供便利的工具；从广义上讲，脚手架是整个前端项目生命周期的完整工程解决方案，从初始化、开发调试到构建部署，提供一系列的工具或规范，并集成为一个“工具”。开发者只需要关心业务逻辑的开发。这个工具也可以称为“脚手架”。由于一个完整的工程解决方案会涉及到很多知识点，这里就不多说了。本文所描述的脚手架只是狭义上的项目初始化。一、为什么需要脚手架现在大部分开发者都习惯使用vue-cli/create-react-app等工具来快速初始化一个项目。我们来看一个前端项目初始化的开发过程：远古时代。手动创建前端三件套：index.html/index.js/index.css，分别将index.js和index.css引入index.html石器时代。在Git/SVN上托管项目模板代码。使用时，先手动拉取代码到本地，然后在项目中修改文件夹名称和配置。通过脚本，自动化做了一些事情：拉取项目模板，配置项目信息等。形成了一套完整的命令行工具，如vue-cli/create-react-app等工业时代。基于cra/vue-cli自定义个性能力，接入自定义模板，自动化Git流程，数据采集等现代。脚手架跳出终端（命令行），配合可视化、WebIDE等方案，通过更便捷的交互完成项目初始化。从这样一个开发过程可以看出，脚手架解决的核心问题是——帮助开发者更方便的初始化项目，这也是需要脚手架的原因。总结起来，脚手架最重要的作用有两个：提高效率。过去，初始化一个可用的项目可能需要一个小时或更长时间，但现在只需键入命令或单击鼠标然后拉伸即可，以降低成本。比如创建文件、配置项目信息等都是重复性的工作，开发者不需要在这些可以自动化的事情上花费精力。脚手架在一个完整的前端工程系统中起着至关重要的作用。接下来就给大家介绍几个大家肯定见过的常用脚手架解决方案。你有没有想过它是如何实现的？2、通用脚手架底层解决方案目前通用脚手架底层会依赖两种方案：使用download-git-repo下载模板代码，使用Yeoman作为脚手架的核心能力进行扩展。2.1download-git-repodownload-git-reponpm包可以拉取git仓库，支持GitHub、GitLab等。基于这个npm包，我们可以写一个简单的脚本来实现简单的模板下载功能。download-git-repo的用法这里就不展开了。如果你有兴趣，你可以自己尝试一下。2.2YeomanGeneratorYeoman是一个较早的脚手架工具。它的第一个版本已经是8年前了。那时，我还没有开始学习前端。很多人说前端技术太复杂，各种技术更新太快。这句话没有错。随着移动互联网的爆发，前端技术也迎来了百花齐放的时代。向上。为什么Yeoman在8年后还活着？别着急，我们分析完Yeoman的原理，你会觉得它确实可以在现在的前端工程中占有一席之地。Yeoman是一个通用的脚手架系统，允许创建任何类型的应用程序。Yeoman被放在“通用脚手架底层解决方案”中，是因为Yeoman不能直接初始化项目所需的文件。它是一个脚手架系统。开发者使用Yeoman提供的API，可以自定义任何脚手架，完全开放、免费、可扩展性强。可以理解为Yeoman提供了一个插件系统。开发人员可以开发自定义插件以使用Yeoman的功能。这个“插件”在Yeoman中叫做生成器，所有的代码生成能力都是由生成器提供的。是不是充满了想象力？这个包的存在为脚手架的实现提供了无限可能。3.常用脚手架集成方案目前，对于前端开发者来说，社区中常用的两种脚手架是VueCLI和CreateReactApp。3.1VueCLIVueCLI是一套完整的基于Vue.js的快速开发系统，提供终端命令行工具、零配置脚手架、插件系统、图形化管理界面等。3.1.1核心思想Vue的核心原理CLI主要有两部分：预设管理。CLI内部，通过统一的实例管理提示（终端交互）和预设（preset）。在交互之前，互连层和关联层之间存在递进关系。在初始化时，这些终端交互的配置在内存中初始化，根据用户的选择触发不同的逻辑。灵活的插件系统。VueCLI采用了基于插件的架构，将CLI的逻辑与代码生成的逻辑解耦，通过不同的插件修改文件内容和配置，生成最终的代码。VueCLI还提供了图形界面来初始化和管理项目，这是与CreateReactApp等CLI的区别之一。3.1.2自定义模板VueCLI官方只有一个初始化模板，内置在@vue/cli-service核心插件中，CLI提供的api.render('./template')方法会渲染模板通过EJS模板引擎写入内存，最后在CLI中通过Node的文件写入操作写入本地目录。如果开发者需要自定义模板，则需要开发一个插件来创建新的模板，并将生成代码的逻辑写在插件中。3.1.3源码分析如果想了解更多关于VueCLI的细节，可以阅读《VueCLI是如何实现的——终端命令行工具》。3.2创建ReactAppCreateReactApp是React官方提供的创建应用的脚手架。3.2.1核心思想CreateReactApp我理解的核心思想是：脚手架核心功能集中化：使用npx保证每个用户使用的是最新版本，方便功能升级模板去中心化：模板管理方便，这也允许自定义模板脚手架逻辑与初始化代码逻辑分离：CLI只负责核心依赖、模板安装和脚手架核心功能，而初始化代码逻辑在react-scripts包中执行。3.2.2自定义模板的使用在创建ReactApp时，可以传入模板参数来使用自定义模板：npxcreate-react-appmy-app--template[template-name]如果不传，默认模板为将使用cra模板。例如，--templatetypescript将使用cra-template-typescriptTypeScript模板。用户可以根据模板规范发布自定义模板，发布到npm上。最重要的规范是它的npm包名称是cra-template-xxx。3.2.3源码分析如果想了解更多关于create-react-app的细节，可以阅读createreactapp核心思想分析。3.3总结无论是create-react-app还是VueCLI，在设计的时候都会尽可能的考虑插件机制，在将功能集成到CLI中之前，将能力发布给开发者。除了有利于自身的功能迭代，对社区开发者也有足够的开放性和可扩展性。并且可以看出这两个脚手架已经抛开了对git的依赖，通过npm来管理模板代码，并且使用了一些类似ejs的模板引擎能力来渲染和替换静态模板中的代码，模板代码可以更加多样化.4.通用的现代解决方案已经到了“工业时代”。搭建脚手架并不像在CLI中通过init等命令生成代码目录那么单调。趋势在逐渐向平台化发展，枯燥单调的终端界面也在向UI图形化界面发展。过渡。4.1图形界面：VueUI先来看看图形界面。上面提到的VueCLI提供了相应的图形化界面来管理项目。相比于CLI枯燥的界面和单一的交互方式，UI图形界面拥有更丰富的交互形式，对于现代开发者来说是美的。当然不是简单的web界面，大家可以先用vueui体验一下。这是VueUI的整体架构图：我们把VueUI看成是一个运行在浏览器中的客户端，在本地终端上架设一个Node服务作为服务端。通过插件机制，插件中的开发者可以调用插件API做一些事情，也可以完成客户端与服务端的通信。比如在图形界面初始化项目后，终端会收到一个事件“trigger”，然后将项目代码初始化到本地文件系统。参考链接：https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui4.2IDE集成编辑器：除了UI图形界面，小程序开发者工具现在初始化项目的能力也经常集成在IDE中，比如小程序开发工具。打开支付宝小程序开发者工具，您可以根据需要直接选择功能齐全的模板进行项目初始化。比如开发者想体验支付宝小程序中的serverless功能，可以直接选择GettingStartedwithServerlessDEMO模板创建项目。项目初始化后，开发者也在这个IDE中进行开发、构建和发布。在整个开发环节中，不会出现切换工具带来的负担。对于开发者来说，开发体验非常好。参考链接：https://opendocs.alipay.com/mini/ide/start-page4.3VSCode插件：Iceworks目前很多前端开发者都在使用VSCode的整个编辑器。放弃常用和熟悉的编辑器并不是一个好的选择。VSCode插件作为一种轻量级的接入方式，还允许开发者使用VSCode中的初始化项目等功能。例如Iceworks是一款可视化智能研发助手，帮助开发者快速利用可视化和智能化能力进行应用开发。在VSCode中安装Iceworks插件后，会有一个图形化的界面来指导应用程序的创建。点击Finish后，会在本地生成工程文件。之后就可以正常使用VSCode进行开发了。参考链接：https://ice.work/docs/guide/gui-start5。小结本文主要介绍前端工程中初始化项目的部分。CLI章节分析了VueCLI和CreateReactApp的源码。其他章节没有介绍，有兴趣的朋友可以多了解下。个人原创技术文章将发布在公众号玩相机的程序员，用键盘和相机记录生活公众号。
