详解使用yeoman打造自己的项目脚手架

目录
  • 引言
  • yeoman 介绍
  • 准备工作
  • 编写自己的脚手架
  • 编写模板代码
  • 运行测试用例
  • 运行脚手架
  • 发布

引言

当新建项目的时候,我们通常需要设计目录结构、配各种配置、处理打包编译,而且每次新建都要重来一遍,或把原来的项目 copy 一份再改改。那能不能自己写个模板,然后还可以支持个性化自动创建呢?今天我就来和大家一起分享如何定制一套自己的项目脚手架,提升开发效率。

这里需要引入脚手架的概念,什么是脚手架呢?脚手架如同一个项目的模板,可以帮我们快速开始项目,就像 vue-cli,提供一个终端的交互界面让用户自定义项目内容。

yeoman 介绍

Yeoman 是一个通用的脚手架系统,允许创建任何类型的应用程序(Web,Java,Python,C#等)。用 yeoman 写脚手架非常简单, yeoman 提供了 yeoman-generator 让我们快速生成一个脚手架模板,我们的主要工作就是把模板文件写好。现在我们来用 yeoman 写一个生成 javascript 插件的脚手架吧。

脚手架功能:

  • 自动构建编译和打包
  • 支持 es6 语法
  • 支持单元测试
  • 支持 jsdoc 生成文档
  • 支持 eslint 语法检查
  • 自动生成 changelog

准备工作

首先需要全局安装 yo 和 generator-generator

npm install yo -g
npm install generator-generator -g

生成脚手架模板

yo generator

在这个终端界面里输入项目名、描述等项目信息。注意项目名称要写成generator-xxx的格式,这样用户就可以通过yo xxx安装你的脚手架了。

生成的脚手架模板目录结构如下:

.
├── generators/
│   └── app/
│       ├── index.js
│       └── templates/
│           └── dummyfile.txt
├── .editorconfig
├── .eslintignore
├── .gitattributes
├── .gitignore
├── .travis.yml
├── .yo-rc.json
├── LICENSE
├── README.md
├── package.json
└── __tests__/
    └── app.js

接下来我们就在generators/app/index.js里写脚手架的逻辑。

编写自己的脚手架

脚手架所做的事情:

  • 接收用户输入
  • 根据用户输入生成模板文件
  • 将模板文件拷贝到目标目录(通常是用户运行脚手架的目录)
  • 安装依赖

yeoman 提供了一个基本生成器,你可以扩展它以实现自己的行为。这个基础生成器将帮你减轻大部分工作量。在生成器的 index.js 文件中,以下是扩展基本生成器的方法:

var Generator = require("yeoman-generator");
module.exports = class extends Generator {};

yeoman 生命周期函数执行顺序如下:

  • initializing - 初始化函数
  • prompting - 接收用户输入阶段
  • configuring - 保存配置信息和文件
  • default - 执行自定义函数
  • writing - 生成项目目录结构阶段
  • conflicts - 统一处理冲突,如要生成的文件已经存在是否覆盖等处理
  • install - 安装依赖阶段
  • end - 生成器结束阶段

我们常用的就是 initializing、prompting、default、writing、install 这四种生命周期函数。看下例子:

"use strict";
const Generator = require("yeoman-generator");
const chalk = require("chalk"); // 让console.log带颜色输出
const yosay = require("yosay");
const mkdirp = require("mkdirp"); // 创建目录
module.exports = class extends Generator {
  initializing() {
    this.props = {};
  }
  // 接受用户输入
  prompting() {
    // Have Yeoman greet the user.
    this.log(
      yosay(
        `Welcome to the grand ${chalk.red(
          "generator-javascript-plugin"
        )} generator!`
      )
    );
    const prompts = [
      {
        type: "confirm",
        name: "someAnswer",
        message: "Would you like to enable this option?",
        default: true
      }
    ];
    return this.prompt(prompts).then(props => {
      // To access props later use this.props.someAnswer;
      this.props = props;
    });
  }
  // 创建项目目录
  default() {
    if (path.basename(this.destinationPath()) !== this.props.name) {
      this.log(`\nYour generator must be inside a folder named
        ${this.props.name}\n
        I will automatically create this folder.\n`);
      mkdirp(this.props.name);
      this.destinationRoot(this.destinationPath(this.props.name));
    }
  }
  // 写文件
  writing() {
    // 将templates目录的代码拷贝到目标目录
    // templates目录默认路径是generators/app/templates
    this.fs.copy(
      this.templatePath("dummyfile.txt"),
      this.destinationPath("dummyfile.txt")
    );
    this._writingPackageJSON();
  }
  // 以下划线_开头的是私有方法
  _writingPackageJSON() {
    // this.fs.copyTpl(from, to, context)
    this.fs.copyTpl(
      this.templatePath("_package.json"),
      this.destinationPath("package.json"),
      {
        name: this.props.name,
        description: this.props.description,
        keywords: this.props.keywords.split(","),
        author: this.props.author,
        email: this.props.email,
        repository: this.props.repository,
        homepage: this.props.homepage,
        license: this.props.license
      }
    );
  }
  // 安装依赖
  install() {
    this.installDependencies();
  }
};

编写模板代码

前面我们把一个脚手架的基本框架都写好了,它可以接受用户输入的内容,可以写文件,可以安装依赖,但接收用户输入的数据怎么用?写进什么文件?安装什么依赖呢?这些都是模板文件做的事情。现在就开始最主要的一部分:编写模板文件。

模板文件是你为用户生成的一个项目 demo,让用户看着这些示例代码就可以开工了,用户应该只需要专注于业务逻辑,而不用管打包构建这些事。

首先建好模板目录:

├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .babelrc
├── jsdoc.json
├── README.md
├── package.json
├── build/
    └── rollup.js
├── src/
    └── index.js
├── test/
    └── index.js

我们的模板package.json里已经写好这些命令:

"scripts": {
  "prebuild": "npm run lint && npm run test && npm run doc",
  "build": "node ./build/rollup.js",
  "lint": "eslint --ext .js, src",
  "test": "mocha --require babel-register --require babel-polyfill --bail",
  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
  "doc": "jsdoc -c ./jsdoc.json"
}
  • npm run lint 用 eslint 进行语法检查,在编译前就避免语法错误和统一代码风格。
  • npm test 运行单元测试
  • npm run doc 根据注释生成文档
  • npm run changelog 根据git log生成项目日志,改动记录一目了然
  • npm run prebuild 编译前的语法检查、 运行测试、生成文档
  • npm run build 编译打包

我们可以使用<%= name %>这样的模板语法使用脚手架中的context上下文,无论是用户输入的数据,还是程序自己的变量:

{
  "name": "<%= name %>",
  "description": "<%= description %>",
  "version": "1.0.0",
  "private": false,
  "main": "dist/<%= name %>.umd.js",
  "module": "dist/<%= name %>.es.js"
}

详细代码请到github查看。

运行测试用例

为了保证代码的健壮性,我们必须进行单元测试。其实我们用generator生成的脚手架代码中已经有测试代码示例了,改成自己的逻辑就可以测试我们的脚手架逻辑了。现在我们来测试下文件是否生成:

'use strict';
const path = require('path');
const assert = require('yeoman-assert');
const helpers = require('yeoman-test');
describe('generator-javascript-plugin:app', () => {
  beforeAll(() => {
    return helpers
      .run(path.join(__dirname, '../generators/app'))
      .withPrompts({ someAnswer: true });
  });
  it('creates files', () => {
    assert.file(['build/rollup.js']);
    assert.file(['dist']);
    assert.file(['src']);
    assert.file(['test']);
    assert.file(['package.json']);
    assert.file(['.babelrc']);
    ...
  });
});

执行命令

npm test

运行脚手架

到此,我们的脚手架开发完了,接下来实际运行下看看是否正确。

由于我们的脚手架还是本地开发,它尚未作为全局 npm 模块提供。我们可以使用 npm 创建全局模块并将其符号链接到本地模块。在项目根目录运行:

npm link

这样就可以调用yo javascript-plugin运行脚手架了。你可以在终端看到运行过程。

发布

写好的脚手架发布出去才能让更多的人使用,发布脚手架和发布其他 npm 包一样。如何发布?

github 地址

generator-javascript-plugin这个脚手架已经发布到npm上,可以下载或访问源码。

源码地址:github.com/greenfavo/g…

以上就是详解使用yeoman打造自己的项目脚手架的详细内容,更多关于yeoman项目脚手架的资料请关注我们其它相关文章!

(0)

相关推荐

  • 使用yeoman构建angular应用的方法

    本文将介绍如何亲手来完成一个yeoman的generator,以实现快速构建最适合自己的项目. 本文将实现的generator起名为ngtimo,依照yeoman的命名规矩就叫做generator-ngtimo,是笔者这周末一晚上加一上午参考着yeoman官方给出的几个generator(generator-generator.generator-node)给强行催生出来的,目前也已经在github上托管并发布到npm. 实现效果 首先确保已经全局安装了yeoman,然后再全局安装generat

  • 从零搭建SpringBoot+MyBatisPlus快速开发脚手架

    目录 前言 聊聊mall-tiny项目 项目简介 项目演示 技术选型 数据库表结构 接口文档 使用流程 升级过程 Swagger升级 Spring Security升级 MyBatis-Plus升级 解决循环依赖问题 解决跨域问题 总结 前言 关注我Github的小伙伴应该了解,之前我开源了一款快速开发脚手架mall-tiny,该脚手架继承了mall项目的技术栈,拥有完整的权限管理功能.最近抽空把该项目支持了Spring Boot 2.7.0,今天再和大家聊聊这个脚手架,同时聊聊升级项目到Spr

  • Vue脚手架搭建及创建Vue项目流程的详细教程

    目录 VUE脚手架搭建流程 安装国内淘宝镜像 安装 Vue 脚手架 Vue项目创建 项目结构解读 项目修改测试 总结 VUE脚手架搭建流程 1.安装 Node.js(推荐一个网站:http://nodejs.cn/) 2.下载安装完成之后进行测试,记住安装位置 node -v 测试 node 是否安装成功以及检查 node 版本 npm -v 测试 npm 是否安装成功以及检查 npm 版本 效果: 提示:如果碰到下面情况 可能原因: 可能是C:\Users\Administrator(user

  • Next.js脚手架完整搭建封装的方法步骤

    针对实际的开发场景(SEO优化需求),我们直接使用next.js脚手架创建的项目还无法直接进行开发,需要再次进行配置封装搭建,这里分享一套自己的完整封装搭建给有需要的小伙伴使用; 内容包括:(1)sass样式配置;(2)axios拦截封装;(3)action模块化;(4)reducer模块化;(5)redux搭建;(6)dispatch示范;(7)saga中间件配置;(8)saga拦截示范;(9)useEffect异步请求示范;(10)getServerSideProps/getStaticPr

  • 详解使用yeoman打造自己的项目脚手架

    目录 引言 yeoman 介绍 准备工作 编写自己的脚手架 编写模板代码 运行测试用例 运行脚手架 发布 引言 当新建项目的时候,我们通常需要设计目录结构.配各种配置.处理打包编译,而且每次新建都要重来一遍,或把原来的项目 copy 一份再改改.那能不能自己写个模板,然后还可以支持个性化自动创建呢?今天我就来和大家一起分享如何定制一套自己的项目脚手架,提升开发效率. 这里需要引入脚手架的概念,什么是脚手架呢?脚手架如同一个项目的模板,可以帮我们快速开始项目,就像 vue-cli,提供一个终端的交

  • 详解IDEA 中使用Maven创建项目常见错误和使用技巧(推荐)

    使用idea的运行程序时,出现jar包不存在的错误(pom.xml文件中有依赖,而且代码没有红色的). 解决方法:Maven安装目录下的conf文件下的setting.xml文件中不要加入本地仓库路径设置,直接在idea中设置. tomcat启动maven项目出现jar包不存在的错误.解决方法:在pom.xml文件中加上war maven依赖下载速度太慢.解决方法:在maven安装目录下的conf文件下的setting.xml中,设置阿里云的镜像仓库地址. <mirror> <id>

  • 详解SpringBoot中的参数校验(项目实战)

    Java后端发工作中经常会对前端传递过来的参数做一些校验,在业务中还要抛出异常或者不断的返回异常时的校验信息,充满了if-else这种校验代码,在代码中相当冗长.例如说,用户注册时,会校验手机格式的正确性,用户名的长度等等.虽说前端也可以做参数校验,但是为了保证我们API接口的可靠性,以保证最终数据入库的正确性,后端进行参数校验不可忽视. Hibernate Validator 提供了一种统一方便的方式,让我们快速的实现参数校验. Hibernate Validator 使用注解,实现声明式校验

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • 详解如何在Vue3+TS的项目中使用NProgress进度条

    目录 写在前面 在项目中安装 简单的封装 在Vue切换路由时展示进度条 写在前面 NProgress是一个轻量级的进度条组件,在Github上已经2.4万star数了,虽然这个组件已经好久没有更新了,最近一次更新是20年4月份,改了jQuery的版本,但是该组件的使用频率还是高的. 在项目中安装 这里的包管理工具使用的npm,如果你使用的是yarn或者pnpm,请自行更改安装命令,安装命令如下: npm i nprogress -S 因为我们是TS的项目,还需要安装其类型声明文件,命令如下: n

  • 详解Python如何利用pymysql封装项目通用的连接和查询

    目录 前言 pymysql 介绍与安装 pymysql 的使用 封装项目通用的连接和查询 结语 前言 一个项目通常都需要有数据库,而对于python这门语言,除了一些框架自带orm或者扩展的orm(像django自带orm,flask则需要扩展的orm),使用orm必然有他的好处,但毫无疑问你要花时间学习这个orm,那么接下来阿牛带你们用pymysql简单分装一个通用的连接,关闭和查询! pymysql 介绍与安装 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 详解使用Jenkins部署Spring Boot项目

    jenkins是devops神器,本篇文章介绍如何安装和使用jenkins部署Spring Boot项目 jenkins搭建 部署分为三个步骤: 第一步,jenkins安装 第二步,插件安装和配置 第三步,Push SSH 第四步,部署项目 第一步 ,jenkins安装 准备环境: JDK:1.8 Jenkins:2.83 Centos:7.3 maven 3.5' jdk默认已经安装完成 配置maven 版本要求maven3.5.0 软件下载 wget http://mirror.bit.ed

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 详解用webpack2搭建angular2的项目

    webpack2和angular2搭建的项目 github地址:项目链接 npm install,安装依赖包 npm run dev,启动本地工程,在localhost:1699进行预览 package.json { "name": "angular-webpack", "version": "1.0.0", "description": "webpack2 & angular2"

随机推荐