ReactNative进阶（三十二）：前端构建工具--Yeoman

╰+哭是因爲堅強的太久メ 2022-10-14 05:27 373阅读 0赞

![\*\*在这里插入图片描述\*\*][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

### 文章目录 ###

*   *  一、脚手架是什么
     *  二、Yeoman是什么
     *  三、Yeoman 优缺点
     *   *  3.1 Yeoman 优势
         *  3.2 Yeoman 的不足之处
     *  四、Yeoman生态
     *  五、安装yeoman
     *  六、使用yeoman
     *  七、拓展阅读

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]

## 一、脚手架是什么 ##

脚手架是一种约定和规范。可以实现如下规范：

>  *  相同的文件组织结构；
>  *  相同的开发范式；
>  *  相同的模块依赖；
>  *  相同的工具配置；
>  *  相同的基础代码；

然后脚手架将这些重复性的约定、规范全部都集成起来，减少这样无意义的操作。

## 二、Yeoman是什么 ##

`Yeoman`最初发布于 2012 年，是一款高效、开源的 Web 应用脚手架（`scaffolding`）软件，意在精简软件的开发过程。脚手架软件用于实现项目中多种不同的工具和接口的协同使用，优化项目的生成过程。`Yeoman` 因其专注于提供脚手架功能而声誉鹊起，它支持使用各种不同的工具和接口协同优化项目的生成。项目开源发布在`GitHub`上。

`Yeoman`是现代化前端项目的脚手架工具，用于生成包含指定框架结构的工程化目录结构。它是整个前端自动化工厂的第一站。

从个人使用者的角度来看，`Yeoman`的定位有些鸡肋，因为流行框架自带的`cli`工具都能够自动生成官方推荐的目录结构，而且一个项目持续少则几个月多则几年，而项目的初始化结构目录在此期间只需要生成一次。尽管工具的设计定位如此，但在组件化开发的潮流中，使用`Yeoman`来生成符合项目编码规范的组件框架是非常有必要的。

为了降低项目的维护成本，将要求的组件结构和必要的使用说明生成组件模板，使用`Yeoman`工具来直接生成，当项目的体积越来越大时，就会体会到这种方式的好处。

>  *  `Yeoman` 提供了一种灵活创建、开发、编译和调试 Web 应用的脚手架（`scaffolding`）软件。
>  *  虽然 `Yeoman` 本身是 `JavaScript` 编写的，但适用于任何语言编写的应用。
>  *  `Yeoman` 支持与 `Webpack、Babel、TypeScript、React` 和 `Angular` 等多种第三方软件库的无缝集成。
>  *  `Yeoman` 内建立有一个基于 `Node.js` 的 HTTP 开发服务器，简化了开发环境的设置和开发过程的迭代。
>  *  `Yeoman` 实现构建过程由开发环境到优化后生产环境间的无缝转移。

## 三、Yeoman 优缺点 ##

### 3.1 Yeoman 优势 ###

*  `Yeoman` 的流程中整合了多种新手特性，支持新入门的开发人员轻松进行 Web 应用开发，同时也简化了专业人员的工作。
 *  `Yeoman` 可用于开发任何类型的 Web 应用。对于潜在的开发人员而言，它提供了极大的自由度。
 *  该软件非常人性化。即使是十分缺乏经验的开发人员也可以使用，由此也成为 Web 应用开发的一种绝佳选择。
 *  该软件还提供了一些构建应用的自动化流程。对于无论具有何种经验水平的各类开发人员而言，精简复杂的开发过程无疑都是一件好事。
 *  在提供脚手架功能外，`Yeoman` 还为 Web 应用开发的其它部分提供了工具。例如，调试所用的代码。开发人员可以使用 Chrome Devtools，或者任何使得顺手的 IDE。Yeoman 生成器还提供调试模式，可记录相关日志。这意味着 Yeoman 可以满足开发人员的各种需求，不必使用大量的软件平台即可创建完美的应用。
 *  `Yeoman` 支持使用任何编程语言创建应用，包括 `Java` 和 `C＃`。对于希望或需要实现应用开发多样化的开发人员，该多语言软件提供的多功能性是非常有用的。
 *  `Yeoman` 集成了多种生成器。这些生成器作为 Yeoman 开发过程的“插件”，为 Yeoman 用户提供了多种选项。在搭建脚手架中，支持使用不同的生成器。例如，开发人员可通过使用各种生成器间的协调和协作来“支撑”自身的项目。在项目定制和开发之前，开发人员还可以考虑将生成器作为项目的准系统。一些热门的生成器包括：

1.  `Backbone.js`：提供 Web 应用处理数据、视图、事件、REST API 等的结构和公共基础。
2.  `AngularJS`：广为使用且十分流行的 JavaScript 框架，可提供模型支撑、视图路由等功能。该生成器中还包括了 `sun-generator`，实现控制器、指令、服务、提供者（provider），装饰器（decorator）等其他功能。
3.  `Bootstrap` 生成器：一种流行的 CSS 框架，通过提供超高效实现简化项目开发。它为 Bootstrap 项目提供四种起始选项：`CSS、LESS、SASS` 和 `Stylus`。生成器根据开发人员的选择，将所选框架下载到项目的 `bower` 组件中。
4.  `JHipster` 生成器：用于开发和部署 `Spring Boot` 和 `Angular/React Web` 应用。
5.  `Hyperledger-composer`：使用 `Hyperledger Composer` 业务网络定义作为输入，创建和编写新应用程序相关的工件。

`Yeoman` 是开源的。 这意味着用户可从软件开发的自由市场中受益。一旦需要汇集英才创建最佳、最优化的系统，用户就能够受益于这些最优秀的开发人员。

`Yeoman` 具有清晰的 API，这对于那些刚着手或想要尝试构建应用的用户是一个很好的特性。 此外，Yeoman 还可自动执行一些常见的任务，有助于开发人员改进工作流程。

### 3.2 Yeoman 的不足之处 ###

*  `Yeoman` 支持使用任何编程语言并为业余开发者提供服务，这意味着对于那些经验丰富的开发人员而言，他们希望的是在提供高级开发选项的同时尽可能地简化和定制流程，由此 Yeoman 可能并非最佳的系统。在他们看来，Yeoman 的平台可能过于通用。
 *  与上一点相关，一些开发人员可能会发现，由于 `Yeoman` 的生成器设置，他们花费了过多时间在定制和测试生成器上，而不是工作于实际的应用开发。
 *  `Yeoman` 另一个饱受批评之处是需要开发人员紧跟发展。对于开发人员而言，重要的是确保他们不断拥有最新的程序、生成器及其它工具，以生产最好的产品。因此，项目或应用是永远不会真正完成的，最佳实践也是不断变化的。为了保持竞争力，开发人员必须亦步亦趋。

尽管 `Yeoman` 尚存在一些缺陷，但其背后具有一个不断增长的社区，并且开发人员也正在其工作流程集成 Yeoman，实现持续集成、版本控制等，从而使构建应用对每位开发人员而言不再那么令人生畏和耗时。Yeoman 还支持多种选择，例如 `Grunt、Gulp` 和 `npm`，确保开发人员所具有的软件组合最符合团队对 Web 应用程序开发过程的期望。

## 四、Yeoman生态 ##

`Yeoman`能够帮助开发者快速构建一个项目工程，提供最佳实践和工具，使开发者保持高效率编码。

`Yeoman`自己提供了一个构建生态系统，主要通过‘`yo`’这个命令来构建一个完整的项目或者项目的一部分。

通过官方的生成器，`Yeoman`建立了一个Yeoman的工作流，这个流是由一个强大的,固定的客户端组建，包含工具和框架帮助开发者快速建立强大的web应用。他们尽量提供了开发者所需的东西。

作为良好文档和深入思考构建过程的思想者，Yeoman包含了**检测（静态检测）**、**测试**以及**压缩**等等一系列工具，让开发者能够更加专注于思考解决方案。

`Yeoman`其实是3个工具的总和：

>  *  `yo` — 脚手架，自动生成工具；
>  *  `Grunt`、`gulp` — 构建工具 （最初只有`grunt`，后面`gulp`火了添加进来的）；
>  *  `Bower`、`npm` — 包管理工具 （原来是 `bower`，后面添加了`npm`）；

上面的三个是各自独立发展和运行的，混合后效果就不一样，主要在于`yo`，相当于一个粘合剂一样，把`grunt`这些工具粘合在一起。

## 五、安装yeoman ##

*  安装 `yeoman`

npm install -g yo //权限不够，请加上 sudo，一般来说mac都需要。

## 六、使用yeoman ##

安装完成之后，你就拥有了1个命令 – `yo`

![在这里插入图片描述][20210521145721327.png]

可以看到，在使用时，官方已经在提示你了，我们选择 **Install a generator**，输入`react`，得到很多选择，我选择了 **react-fullstack**（如果安装需要权限，`sudo yo`即可，注意看安装失败的log）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 2]

接着等待安装，`yo`这个命令跟Vue官方脚手架`vue-cli`一样，现在下载的`generator`其实就是相当于模板一样，来生成你需要的project的最基本架构，包括你主要使用的框架-- `react、angular、polymer、backbone、ember`，构建工具—`grunt、gulp、webpack`等，现在还包括了`nodejs`的模块–`express、node-webkit`等等一系列各种工具。

如果不用`yo`命令来安装generator，可以自己手动安装你想要的:

npm install -g generator-react-fullstack // 记得权限，记得给包前面加上generator.

装完界面变成这个样子了，我们选择generator，run一下。

![Paste\_Image.png][Paste_Image.png]

接下来，我们需要填写一个信息来配置下项目名称等项目信息。

现在，可以看见你的文件夹下面已经有新的文件和文件夹建立出来，等待完成，然后

npm run start

![Paste\_Image.png][Paste_Image.png 1]

页面如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 3]  
可以看到的是，几个简单的命令，`Yeoman`就帮助我们新建立一个项目，而且项目已经填充了不少代码，我们可以沿着别人的已经搭建好的构架来编写业务即可，这对很多新手来说是非常好的一种提高方式，所以建议大家选star多的 —代码风格好，文件夹规划清晰，js的模块拆分细致合理。

## 七、拓展阅读 ##

*  [YEOMAN官网][YEOMAN]
 *  [官方生成器][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221014/2a57565dad2643e0b77ad21730ede928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/7ff81572bacd40e48a96db74008e6329.png
[20210521145721327.png]: /images/20221014/3298df45e0de4bde909482527298d559.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/c246b1c533014d26891dc422abe7b680.png
[Paste_Image.png]: https://img-blog.csdnimg.cn/20210521150036604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70
[Paste_Image.png 1]: https://img-blog.csdnimg.cn/20210521150134903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210521150151386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70
[YEOMAN]: https://yeoman.io/
[Link 1]: http://yeoman.io/generators/