前端脚手架工具 电脑版发表于:2020/8/24 20:51 # 脚手架工具 ## 什么是脚手架工具 用于创建项目基础结构的一种工具、提供项目的基础规范和约定等 当开发人员经过较长时间的工作经历后,并有过多个项目开发经历后。我们会发现,很多项目会有很多类似的点,往往这些类似的点,在大部分情况下是相同的。例如 - 相同**组织结构** - 相同**开发范式** - 相同**模块依赖** - 相同**工具配置** - 甚至某些类似业务的项目还有着相同**基础代码** 这些相同的部分如果都采用手动的方式(例如 `Ctrl C / Ctrl V`)将会导致大量的重复内容要做。很不合理,并且还容易出错。 而 **脚手架工具** 就是用于解决这一类问题。有了 **脚手架** 我们就可以通过 **脚手架** 快速搭建**特定**项目的基础骨架。然后再基于该骨架上进行后续的开发工作,从而大大提高我们的开发效率。 > 毕竟早点下班还是很爽的 **脚手架用于解决在创建项目过程中,那些复杂并重复的工作** ## 常用的脚手架工具 在前端领域中,脚手架主要分为 `2` 类,一类是 给 **特定框架** 服务的脚手架工具、另一类是 **通用类型** 的脚手架工具 - 给特定框架服务 - vue-cli - angular-cli - create-react-app - 通用类型 - Yeoman - Plop 对于 特定框架的 **脚手架** ,如果你使用的对应的框架,那它提供的脚手架工具。几乎是贯穿在整个框架的使用周期中的。 ## [Yeoman](https://yeoman.io/) > THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS **Yeoman** 是一款用于创建现代化的 `Web` 应用的脚手架工具 > Yeoman 像一个运行脚手架工具的平台。它需要 对应的 `Generator` 才能够使用。 > Yeoman 这种方式可以让我们编写自己的 `Generator`,来得到一个符合自己需求的脚手架工具 ### 基本使用 由于 **Yeoman** 是一个运行在 `Node` 平台上的一个工具。我们需要确定 `Node` 是否安装好。 1. 检查 Node 环境 ```shell node -v npm -v ``` 2. 安装 **Yeoman** 使用 `npm` 或者 `yarn` 都可 ```shell yarn global add yo # or npm install -g yo ``` 3. 然后我们再安装一个 `generator-node` 的 Generator ```shell yarn global add generator-node ``` 4. 使用新安装的 `generator` 创建一个项目 ```shell yo node ``` > 注意:使用 `generator` 时 需 **去除前缀** 填写 `模块名` 、`作者` 、`版本` 等,就可以创建成功了 ```shell Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2020/8/24 19:27 lib d----- 2020/8/24 19:29 node_modules -a---- 2020/8/24 19:27 171 .editorconfig -a---- 2020/8/24 19:27 9 .eslintignore -a---- 2020/8/24 19:27 12 .gitattributes -a---- 2020/8/24 19:27 22 .gitignore -a---- 2020/8/24 19:27 72 .travis.yml -a---- 2020/8/24 19:27 138 .yo-rc.json -a---- 2020/8/24 19:27 1076 LICENSE -a---- 2020/8/24 19:27 1228 package.json -a---- 2020/8/24 19:27 664 README.md -a---- 2020/8/24 19:29 195300 yarn.lock ``` 打开 `Yeoman` 帮我们创建的项目,可以看到 它帮我们创建一个 `Node` 项目的基本结构、以及基础文件。 并且当我们打开某些配置文件,也能看到一些基础代码 `Yeoman` 也帮我们生成好了。 到这里我们已经可以发现,使用脚手架来创建项目。大大提高我们的效率。 ### Sub Generator 有些时候我们不想创建一个完整的项目结构,或者想在已有的项目上增加一些特定类型的文件,比如一些配置文件等。 这些文件会有一些基础代码,手动去写呢比较慢,也会容易写错。而在 `Yeoman` 中它给我们一个 `Sub Generator` 的功能,来帮助我们实现这样的需求。 这里我们使用一下上面的 `generator-node` 生成器提供的 `cli` `Sub Generator` > 这个 `Sub Generator` 是将我们的 `Node` 项目变成一个 `cli` 应用 > 注意:使用 `Sub Generator` 时使用 `:` 链接 ```shell yo node:cli ``` 执行该命令过后,会询问我们是否重写 `package-json`,这里选择是 ```shell conflict package.json ? Overwrite package.json? overwrite force package.json create lib\cli.js ``` 在 `package-json` 中,可以看到的确新增了 `cli` 程序所需要的依赖。执行 `yarn` 安装新增的依赖,然后把这个 `cli` 模块 `link` 到全局测试一下 ```shell yarn link # 成功后运行一下该模块 my-module --help ``` 可以看到这个 `cli` 应用已经可以成功运行工作了 ```shell yeoman-test Usage $ my-module [input] Options --foo Lorem ipsum. [Default: false] Examples $ my-module unicorns $ my-module rainbows unicorns & rainbows ``` ### 注意 并不是所有的 `generator` 都有 `Sub Generator` ,我们可以前往对应 `generator` 官方文档查看。 例如这里的 `generator-node` [点这](https://www.npmjs.com/package/generator-node#sub-generators) ### 脚手架 `Yeoman` 使用流程 1. 明确你的需求 2. 找到合适的 `Generator` 3. 在全局范围安装找的 `Generator` 4. 用过 `yo` 运行对应的 `Generator` 5. 在命令行交互中填写选项 6. 生成你需要的项目结构 ### 自定义 `Generator` 有时候官方或者社区提供的 `Generator` 过于通用,无法满足我们的需求。像在项目代码一些基础代码、甚至有些业务代码也是相同的。这时我们就可以定义自己的 `Generator` 来满足我们自己需求。 下面我们来动手试试吧!其他可参考官方文档 [Click Me](https://yeoman.io/authoring/) `Generator` 其实就是一个 `NPM` 模块,并且 `Generator` 有着特定的结构,如下: - 特定的目录结构 ```shell ├───package.json # 模块配置文件 └───generators/ # 生成器目录 ├───app/ # 默认生成器 │ └───index.js # 默认生成器实现 ``` `Sub Generator` 的结构 ```shell ├───package.json # 模块配置文件 └───generators/ # 生成器目录 ├───app/ # 默认生成器 │ └───index.js # 默认生成器实现 ├───SubGenerator1/ # 其他生成器 │ └───index.js # 其他生成器实现 ├───SubGenerator2/ # 其他生成器 │ └───index.js # 其他生成器实现 ``` - 特定的模块名称 我们说到 `Generator` 就是一个 `NPM` 模块,而 `yeoman` 对模块名也有规定,必须是以 `generator`开头 如: `generator-<name>` 1. 创建 `Generator` 模块 先创建一个用于存放自定义 `Generator` 模块的文件夹,进入这个模块初始化成一个 `NPM` 模块 ```PowerShell mkdir generator-sample cd generator-sample yran init ``` 然后我们还需要安装一个 `yeoman-generator` 的模块,这是一个 `generator` 的基类(鸡肋),可以帮助我们开发自己的 `generator` ```PowerShell yarn add yeoman-generator ``` 2. 在创建的 `generator-sample` 中 按照 **上文** 创建 对应的目录结构 ```PowerShell ├───package.json # 模块配置文件 └───generators/ # 生成器目录 ├───app/ # 默认生成器 │ └───index.js # 默认生成器实现 ``` 3. 然后我们在 `index.js` 中 编写 `Generator` 生成器代码 ```JavaScript // 该文件作为 Generator 的核心入口 // 需要导出一个继承自 Yeoman Generator 的类型 // 当该模块工作时 会自动调用我们自定义的声明周期方法 // 父类中也为我们提供一些工具方法,给我们使用,如文件写入等 const Generator = require('yeoman-generator') module.exports = class extends Generator { writing() { // Yeoman 生成文件阶段自动调用 可以理解未 Vue 中的生命周期函数 this.fs.write( this.destinationPath('test.js'), '测试测试' ) } } ``` 4. 完成后我们将这个 `Generator` 模块 `link` 到全局,并使用 `Yeoman` 来使用我们自定义的 `Generator` 模块 ```PowerShell PS D:\xxxx\xxxxx\xxxx\generator-sample> yarn link yarn link v1.22.4 ``` 5. 新创建一个 `test` 目录 运行自定义的 `Generator` 模块 ```PowerShell cd ../ mkdir test cd test # 运行 yo sample create test.js ``` ### 以上就是一个 **Yeoman Generator** 的基本开发流程 ## Plop [官网](https://plopjs.com/) > Plop is a little tool that saves you time and helps your team build new files with consistency. > > Plop 是一个小工具,它可以节省您的时间,并帮助您的团队构建具有一致性的新文件。 **Plop** 主要用于在项目过程中,用于创建特定类型的独立文件的一个工具 例如在 `Angular` 、`React` 中创建组件时,一个组件往往包含 `Html`、`Css`、`JavaScript`或者更多的文件。如果一个个手动创建并写入文件中的基础代码,体验非常不好,而 `Plop` 就是帮我做个事情的。 如果你使用过 `Angular Cli` 的 `ng generate` 命令 那你应该可以很容易理解 `Plop` 的作用,以及她带给我们在开发过程中的好处 ### Plop 基本使用 `Plop` 也是一个 `NPM` 模块所以我们需要安装它,但是这里需要注意的是 `Plop` 主要用 **项目过程中** ,所以我们**不应该**作为全局模块安装,应该作为一个**开发依赖**安装 1. 安装 ```PowerShell yarn add plop --dev ``` 2. 项目根目录下新建一个 **plofile.js** 文件 > 这里我们用 **Plop** 来创建一个已经包含基础代码的 `.vue` 文件 ```JavaScript // Plop 入口文件 导出一个函数 // 此函数接受一个 Plop 对象 用于创建生成器任务 module.exports = plop => { plop.setGenerator('component', { description: 'create a component', prompts: [ { type: 'input', name: 'name', message: 'component name', default: 'MyComponent' } ], actions: [ { type: 'add', path: 'src/components/{{name}}/{{name}}.vue', templateFile: 'plop-templates/component.hbs' } ] }) } ``` 3. 还需要创建一个用创建 `.vue` 文件的模板文件 `plop-templates/component.hbs` > 一般我们会把 **Plop** 使用的模板都放在 **plop-templates** 文件夹中便于管理 ```hbs <template> <div class="{{name}}"> <h1>{{name}} Component</h1> </div> </template> <script> export default { data() { }, } </script> <style scoped> </style> ``` 4. 运行 **Plop** 命令测试一下 ```PowerShell PS D:\xxx\plop-demo> yarn plop component yarn run v1.22.4 $ D:\xxx\plop-demo\node_modules\.bin\plop component ? component name Home √ ++ \src\components\Home\Home.vue Done in 15.64s. ``` ### **Plop** 使用步骤 > 整体来看 **Plop** 的使用还是很简单的。很符合她 **小而美** 的特点,用于创建项目中同类型的文件,还是很方便的 - 将 Plop 模块做为项目的开发依赖安装 - 项目根目录创建 `plopfile.js` - 在 `plopfil.js` 中编写脚手架任务 - 编写用于生成特定类型问及那的模板 - 通过 Plop 提供的 CLI 程序运行脚手架任务 ## 脚手架工作原理 通过对上面的 2 款脚手架工作原理的介绍和基本使用,我们不难发现 **脚手架** 工具就是通过 **CLI** 程序发起一些预设的询问,再将我们的**回答结果**结合一些 **模板文件** 来生成对应的项目结构。