阅读 101

从0到1开发一个自己的脚手架

什么是脚手架?

脚手架可以简单的理解为是自动为我们创建项目基础文件的工具,总结它的作用有两点:一、创建项目基础结构;二、提供项目规范和约定。这些约定包括相同的组织结构、相同的开发范式、相同的模块依赖、相同的工具配置、相同的基础代码等。脚手架工具可以避免掉搭建项目时出现的重复工作。像vue-cli、create-react-app这些都是很成熟的脚手架工具。

关于Yeoman( yeoman.io/

Yeoman是目前来说最老牌最通用的脚手架工具,它不像vue-cli这种更具有针对性,它更像是一个脚手架运行平台。可以通过yeoman搭配不同的generator去创建任何类型的项目。 也就是说我们可以通过定制generator去定制自己的前端脚手架。

Yeoman的基本使用

  • 在全局范围安装yo
$ npm i -g yo
复制代码
  • 安装对应的generator
$ npm i  -g generator-node
复制代码
  • 通过generator运行yo
$ cd path // cd到目标muluxia
$ mkdir my-modules // 创建项目文件夹
$ yo node
复制代码

1.png

  • 想给项目增加部分功能,如:生成自己的cli
$ yo node:cli
$ sudo npm link
复制代码

2.png

3.png

基于Yeoman搭建自己脚手架 (自定义generator)

$ mkdir generator-sample
$ npm init
$ npm i yeoman-generator
复制代码
  1. 创建生成器目录

自定义generator的目录结构

|__generators/.................................................生成器目录 | |__app/.....................................................默认生成器目录 | |__index.js..........................................默认生成器实现 |__package.json...............................................模块包配置文件

  1. 将index.js作为genertor的核心入口,在此文件中需要导出一个继承自yeoman-generator的类,yeoman-generator工作的时候会自动调用导出的类的生命周期方法。我们在这些方法中可以调用一些父类提供的工具和方法,实现一些功能。我们下面就写一个文件写入的功能。

4.png

代码完成后,输入 npm link 命令将一个generator-sample包链接到全局执行环境。 新建demo文件夹,执行 yo sample。在demo文件夹内生成露路径/temp.txt内容为随机数的文件。

5.png

根据模板创建文件

  1. 在app文件夹中新建template文件夹,template文件中放入目标模板。目标模板支持ejs( ejs.bootcss.com/ ) 语法。
  2. 修改index.js,利用fs模块的copyTpl方法完成。

6.png

7.png 代码完成后,cd到demo文件夹下执行命令 yo sample,成功生成foo.txt文件。

8.png

接受用户输入

利用父类的prompt对象实现接受用户的输入,修改index.js,接受用户输入的name

9.png 在foo.txt模板中接受

10.png 代码完成后,cd到demo下执行命令yo sample

11.png

12.png

文章分类
前端
文章标签