乐趣区

关于javascript:前端工程化基础-初始化项目现代-CLI-和-GUI-方案指南

jiezi

【前端工程化根底 – CLI 篇】系列文章，继续更新中：

  • 【前端工程化根底 – CLI 篇】Vue CLI 是如何实现的
  • 【前端工程化根底 – CLI 篇】Creact React App 是如何实现的

关注公众号 玩相机的程序员，第一工夫浏览最新文章。

原文链接 http://axuebin.com/articles/fe-solution/cli/desc.html 转载请分割。

0. 写在后面

提到初始化我的项目，那就必须提到脚手架这个名词，那为什么这篇文章的题目不是对于脚手架而是对于初始化我的项目呢？

脚手架这个名词来源于建筑工程畛域，百度百科对其的解释是“脚手架是为了保障各施工过程顺利进行而搭设的工作平台”，也就是说脚手架为工人提供了施工的根底性能。将其引申到软件工程畛域，又是什么含意呢？

  • 广义上讲，脚手架是一个能够疾速地应用配置好的工程模板初始化工程的工具，防止反复工作，为开发者提供便当；
  • 狭义上讲，脚手架是一个欠缺的面向整个前端我的项目生命周期的工程解决方案，从初始化、开发调试到构建部署，都提供了一系列的工具或者标准，并且集成到一个“工具”中，开发者只需关怀业务逻辑开发即可，这工具也能够称为“脚手架”。

因为残缺的工程解决方案会波及到大量的知识点，在这里就不开展说了。本文介绍的脚手架仅是广义上的我的项目初始化。

1. 为什么须要脚手架

当初大多数开发者曾经习惯应用 vue-cli / create-react-app 等工具来疾速初始化一个我的项目，无妨先看看前端我的项目初始化的一个倒退历程：

  1. 远古时代。手动创立前端三件套：index.html/index.js/index.css，在 index.html 里别离引入 index.js 和 index.css
  2. 石器时代。将我的项目模板代码托管到 Git/SVN 上，应用的时候先手动将代码拉到本地，而后批改文件夹名以及我的项目中的配置
  3. 青铜时代。通过脚本，自动化做了一些事件：拉取我的项目模板、配置我的项目信息等
  4. 蒸汽时代。造成一套残缺的命令行工具，比方 vue-cli/ create-react-app 等
  5. 工业时代。在 cra/vue-cli 的根底上定制共性能力，接入自定义模板、自动化 Git 流程、数据采集等
  6. 古代。脚手架曾经跳出终端（命令行），有了可视化、WebIDE 等计划，通过更为不便的交互即可实现我的项目的初始化

从这样一个倒退历程能够看出，脚手架解决的外围问题就是 —— 帮忙开发者更不便地初始化我的项目，这也就是为什么须要脚手架。总结来说，脚手架最重要的作用有两点：

  1. 提高效率。之前初始化一个可用的我的项目可能须要 1 个小时甚至更久，到现在只须要敲个命令或者点下鼠标而后伸个懒腰就搞定了
  2. 降低成本。比方创立文件、配置我的项目信息等都是反复工作，开发者没必要花精力在这些能够自动化的事件上

在残缺的前端工程体系中，脚手架起到至关重要的作用。

接下来介绍几个目前罕用的的、你肯定见过的几种脚手架计划，你是否有思考过它是如何实现的呢？

2. 常见脚手架底层计划

目前，常见的脚手架底层都会依赖两种计划：应用 download-git-repo 来下载模板代码，以及应用 Yeoman 来作为脚手架的一个外围能力进行扩大。

2.1 download-git-repo

通过 download-git-repo 这个 npm 包能够实现 git 仓库的拉取，反对 GitHub、GitLab 等。基于这个 npm 包，咱们能够写一个简略的脚本来实现繁难的模板下载性能。

对于 download-git-repo 的用法在这里就不开展了，感兴趣的能够本人试试看。

2.2 Yeoman Generator

Yeoman 是一个较早就呈现的脚手架工具，它的第一次公布曾经是在 8 年前，那时候我还没开始学习前端。很多人都说，前端技术太杂，各种技术更新太快，这句话也没什么问题，前端技术随着挪动互联网的暴发也迎来了百花齐放的时代，一些技术在潮流中被后浪就拍没了。Yeoman 历经 8 年还存活着，这是为什么呢？不急，待咱们分析了 Yeoman 的原理之后，你会感觉它的确能够在当初的前端工程化中占有一席之地。

Yeoman is a generic scaffolding system allowing the creation of any kind of app.

将 Yeoman 放在了「常见脚手架底层计划」，是因为 Yeoman 它并不能间接初始化我的项目所需的文件，它是一个脚手架零碎，开发者们应用 Yeoman 提供的 API 能够定制任意脚手架，齐全凋谢、自在的，扩展性极强。

能够了解 Yeoman 提供一个插件体系，开发者能够自定开发插件来应用 Yeoman 的能力，这个“插件”在 Yeoman 中称为 generators，所有代码生成的能力都由 generators 提供。

是不是充斥了想象力？这个包的存在，给脚手架的实现提供了有限可能性。

3. 常见脚手架集成计划

目前对于前端开发者来说，社区上比拟罕用的两个脚手架是 Vue CLI 和 Create React App。

3.1 Vue CLI

Vue CLI 是一个基于 Vue.js 进行疾速开发的残缺零碎，提供了终端命令行工具、零配置脚手架、插件体系、图形化治理界面等。

3.1.1 核心思想

Vue CLI 的外围原理次要有两局部：

  1. 预设治理。在 CLI 外部通过对立的实例对 prompt（终端交互）和 preset（预设）进行治理，交互之前存在互联关联层层递进的关系，在初始化的时候，这些用于终端交互的配置就初始化在内存中，依据用户的抉择触发不同的逻辑。
  2. 灵便的插件零碎。在 Vue CLI 中应用了一套基于插件的架构，将 CLI 的逻辑和生成代码的逻辑解耦，通过不同的插件去批改文件内容和配置，生成最终的代码。

Vue CLI 同时还提供了图形化界面对我的项目进行初始化、治理，这也是和 Create React App 等 CLI 不同的中央之一。

3.1.2 自定义模板

Vue CLI 官网初始化模板只有一个，内置在 @vue/cli-service 外围插件中，CLI 提供的 api.render('./template') 办法会将模板通过 EJS 模板引擎渲染到内存中，最终在 CLI 中通过 Node 的写文件操作写到本地目录中。

如果开发者须要自定义模板，须要开发一个插件来创立新的模板，在插件中编写相干生成代码的逻辑。

3.1.3 源码解析

如果你想理解更多对于 Vue CLI 的细节，能够浏览 Vue CLI 是如何实现的 — 终端命令行工具篇。

3.2 Create React App

Create React App 是 React 官网创立利用的脚手架。

3.2.1 核心思想

Create React App 的核心思想我了解次要是：

  1. 脚手架外围性能中心化：应用 npx 保障每次用户应用的都是最新版本，不便性能的降级
  2. 模板去中心化：不便地进行模板治理，这样也容许用户自定义模板
  3. 脚手架逻辑和初始化代码逻辑拆散：CLI 中只负责外围依赖、模板的装置和脚手架的外围性能，而初始化代码的逻辑在 react-scripts 包里执行

3.2.2 自定义模板

应用 Create React App 时，能够传入 template 参数应用自定义模板：

npx create-react-app my-app --template [template-name]

如果不传，则应用 cra-template 这个默认模板。

比方，--template typescript 就会应用 cra-template-typescript 这个 TypeScript 的模板。

用户能够依照模板标准公布自定义模板，并且公布到 npm 上。最次要的一个标准是，它的 npm 包名是 cra-template-xxx。

3.2.3 源码解析

如果你想理解更多对于 create-react-app 的细节，能够浏览 create react app 外围思路剖析。

3.3 总结

无论是 create-react-app 还是 Vue CLI，在设计的时候都会尽量思考 插件机制，将能力凋谢进来给开发者再将性能集成到 CLI。除了有利于本身的性能迭代之外，对于社区开发者来说，都具备了足够的开放性和扩展性。

并且能够看到，这两个脚手架曾经抛开了对 git 的依赖，将模板的代码通过 npm 进行治理，并且借助一些相似 ejs 等的模板引擎能力，对动态模板中的代码进行渲染替换，模板代码能够更加多样化。

4. 常见古代计划

到了“工业时代”，脚手架不仅仅是在 CLI 中通过 init  等命令生成一个代码目录这么枯燥了，趋势逐步向平台化发展，并且干燥枯燥的终端界面也在往 UI 图形化界面过渡。

4.1 图形化界面：Vue UI

先来看一下图形化界面，上文提到的 Vue CLI 就提供了对应的图形化界面来对我的项目进行治理。

相比于 CLI 干燥的界面和交互繁多，UI 图形化界面有更丰盛的交互模式，对于古代开发者来说好看。当然，它不是简略的一个 web 界面，你能够先应用 vue ui 体验一下。

这是 Vue UI 的整体架构图：

咱们将 Vue UI 看作运行在浏览器的客户端，而本地终端起了一个 Node 服务当作是服务端。通过插件机制，在插件中开发者能够调用插件 API 做一些事件，也能够实现客户端和服务端的通信。比方在图形化界面上初始化了我的项目之后，终端会收到事件“触发”，而后将我的项目代码初始化到本地文件系统中。

参考链接：https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui

4.2 IDE 集成编辑器：小程序开发者工具

除了 UI 图形界面之外，现在初始化我的项目的能力也常被集成在 IDE 中，比方小程序开发工具。

关上支付宝小程序开发者工具，就能够间接依据须要抉择一个性能齐备的模板初始化我的项目，比方开发者想要在支付宝小程序中体验 Serverless 的性能，就能够间接选中 Serverless 入门 DEMO 这个模板创立我的项目。

我的项目初始化之后，开发者也是在这个 IDE 中进行开发、构建、公布，在整个开发链路中，都不会有切换工具带来的累赘，对于开发者而言，开发体验是十分棒的。

参考链接：https://opendocs.alipay.com/mini/ide/start-page

4.3 VSCode 插件：Iceworks

目前很多前端开发者都在用 VSCode 整个编辑器，如果让开发者为了一些提效的能力去放弃罕用、相熟的编辑器，也不是一个很好的抉择。VSCode 插件作为一个轻量级的接入形式，也能够让开发者在 VSCode 中应用初始化我的项目等性能。

比方，Iceworks 就是一款可视化智能研发助手，帮忙开发者疾速应用可视化和智能化的能力进行利用开发。

在 VSCode 中装置了 Iceworks 插件之后，就有图形化界面疏导创立利用，点击实现之后就间接在本地生成我的项目文件了。在这之后，就是失常地应用 VSCode 进行开发。

参考链接：https://ice.work/docs/guide/gui-start

5. 总结

这篇文章次要是介绍前端工程化中初始化我的项目的局部，CLI 章节对 Vue CLI 和 Create React App 进行了源码解析，其它章节没有开展介绍，感兴趣的敌人能够深刻理解一下。

集体原创技术文章会发在公众号 玩相机的程序员 上，用键盘和相机记录生存的公众号。

退出移动版