脚手架工具

脚手架工具概要(前端工程化的发起者)

  • 脚手架的本质作用:创建项目基础架构、提供项目规范和约定

    1. 相同的组织结构
    2. 相同的开发规范
    3. 相同的模块依赖
    4. 相同的工具配置
    5. 相同的基础代码
  • 举例:IDE创建项目的过程就是一个脚手架的工作流程

常用的脚手架工具

  1. React项目:create-react-app
  2. vue.js项目:vue-cli
  3. angular项目:angular-cli

Yeoman(The web's scaffolding tool for modern webapps)

Yeoman 是一种高效、开源的 Web 应用脚手架搭建系统,意在精简开发过程。Yeoman 因其专注于提供脚手架功能而声誉鹊起,它支持使用各种不同的工具和接口协同优化项目的生成。

  1. Yeoman 提供了一种灵活创建、开发、编译和调试 Web 应用的脚手架(scaffolding)软件。
  2. 虽然 Yeoman 本身是 JavaScript 编写的,但适用于任何语言编写的应用。
  3. Yeoman 支持与 Webpack、Babel、TypeScript、React 和 Angular 等多种第三方软件库的无缝集成。
  4. Yeoman 内建立有一个基于 Node.js 的 HTTP 开发服务器,简化了开发环境的设置和开发过程的迭代。

    5.Yeoman 实现构建过程由开发环境到优化后生产环境间的无缝转移。
    Yeoman以上简介出自此博客

Yeoman 基本使用

  1. node安装:

    • node版本:v14.15.4
    • npm版本:v6.14.10
    • node版本控制工具:nvm
  2. Yeoman安装:yarn global add yo
  3. 安装对应的generator:yarn global add generator-node
  4. 使用:
    1. 创建目录: mkdir my-module
    2. 进入目录: cd my-module
    3. 运行:yo node

Sub Generator

  • 有时我们并不需要去创建完整的项目结构,只是需要在已有的项目基础上创建一些特定类型的文件
  • 给已有的项目创建readme,eslint,babel等,这些文件都有一些基础代码,自己手动去配很容易配错,通过生成器帮我们自动生成以提高效率yeoman 提供的  sub generator
  • 命令:yo node:cli

  • yarn link 到全局范围(命令:yarn link)

    • 注:新加了配置文件过后并没有安装相应的依赖,yarn命令运行安装操作
  • 运行: 目录名 + --help

  • mac中遇到的问题:

  • 解决方法:sudo chmod -R 777 + 文件名

Yeoman 使用步骤总结

  • 常规使用步骤:

    1. 明确你的需求;
    2. 找到合适的Generator;

    3. 全局范围安装找到的Generator;

    4. 通过Yo运行对应的Generator;

    5. 通过命令行交互填写选项;

    6. 生成你所需要的项目结构;
  • 举例:创建一个网页应用

    1. 在Yeoman官网Yeoman找到对应的generator;

    2. 安装generator-webapp: yarn global add generator-webapp;

    3. 运行:yo webapp

自定义Generator

基于Yeoman搭建自己的脚手架

创建Generator模块

Generator本质上就是一个NPM模块

  • Generator 基本结构



  • Yeoman的Generator名称结构:generator-name

  • 示例:

    • 创建目录:mkdir generator-sample
    • 创建package.json: yarn init
    • 安装yeoman-generator: yarn add yeoman-generator
    • 在generator-sample文件夹中创建如下图所示文件

      此处的index.js将入作用Generator的核心入口

// 此文件作为Generator的核心入口
// 需要导入一个继承自Yeoman Generator的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能,例如文件写入
// fs.write('绝对路径','文件的内容') const Generator = require("yeoman-generator"); module.exports = class extends Generator {
wrting() {
// Yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
this.fs.write(
this.destinationPath('temp.txt'),
Math.random().toString()
)
}
}
  • 使用:yo + 模块名

根据模版创建文件

  1. 创建一个templates文件夹, 将需要的模板文件放入此目录下
  2. 运行:yo + 模块名
// 此文件作为Generator的核心入口
// 需要导入一个继承自Yeoman Generator的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能,例如文件写入
// fs.write('绝对路径','文件的内容') const Generator = require("yeoman-generator"); module.exports = class extends Generator {
wrting() {
// Yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
// this.fs.write(
// this.destinationPath('temp.txt'),
// Math.random().toString()
// ) // 通过模版方式写入文件到目标目录
// fs.copyTpl(模版文件的路径, 输出文件的路径, 模版文件的上下文)
// 模版文件的路径
const tmpl = this.templatePath('foo.txt');
// 输出目标的路径
const output = this.destinationPath('fll.txt');
// 模版数据上下文
const context = { title: 'hell yeoman', success: false }; this.fs.copyTpl(tmpl, output, context);
}
}

总结:相对于手动创建每一个文件, 模版的方式大大的提高了效率;

接收用户输入

// 此文件作为 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能,例如文件写入 const Generator = require('yeoman-generator') module.exports = class extends Generator {
prompting () {
// Yeoman 在询问用户环节会自动调用此方法
// 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
return this.prompt([
{
type: 'input',
name: 'name',
message: 'Your project name',
default: this.appname // appname 为项目生成目录名称
}
])
.then(answers => {
// answers => { name: 'user input value' }
this.answers = answers
})
}
writing () {
// Yeoman 自动在生成文件阶段调用此方法 // // 我们这里尝试往项目目录中写入文件
// this.fs.write(
// this.destinationPath('temp.txt'),
// Math.random().toString()
// ) // ------------------------------------------------------- // // 通过模板方式写入文件到目标目录 // // 模板文件路径
// const tmpl = this.templatePath('foo.txt')
// // 输出目标路径
// const output = this.destinationPath('foo.txt')
// // 模板数据上下文
// const context = { title: 'Hello zce~', success: false } // this.fs.copyTpl(tmpl, output, context) // ------------------------------------------------------- // 模板文件路径
const tmpl = this.templatePath('bar.html')
// 输出目标路径
const output = this.destinationPath('bar.html')
// 模板数据上下文
const context = this.answers this.fs.copyTpl(tmpl, output, context)
}
}

Vue Generator案列

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
prompting() {
return this.prompt([{
type: "name",
name: "name",
message: "Your project name",
default: this.appname
}]).then(answers => {
this.answers = answers;
})
} writing() {
// 把每一个文件通过模版转化到目标路径
const templates = [
'.browserslistrc',
'.editorconfig',
'.env.development',
'.env.production',
'.eslintrc.js',
'.gitignore',
'babel.config.js',
'package.json',
'postcss.config.js',
'README.md',
'public/favicon.ico',
'public/index.html',
'src/App.vue',
'src/main.js',
'src/router.js',
'src/assets/logo.png',
'src/components/HelloWorld.vue',
'src/store/actions.js',
'src/store/getters.js',
'src/store/index.js',
'src/store/mutations.js',
'src/store/state.js',
'src/utils/request.js',
'src/views/About.vue',
'src/views/Home.vue'
]
templates.forEach(item => {
// item => 每个文件路径
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answers
)
})
}
}

scaffoldingTools的更多相关文章

随机推荐

  1. 20分钟带你掌握JavaScript Promise和 Async/Await

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://www.freecodecamp.org/news/learn-promise-a ...

  2. CC-BY-NC-SA (创作共用许可协议)

    创作共用许可协议 (英语:Creative Commons license,简称CC许可) 是一种公共版权许可协议,其允许分发受版权保护的作品. 一个创作共用许可,用于一个作者想给他人分享.使用.甚至 ...

  3. OpenShift添加应用健康检查功能

    什么是健康检查? 对于部署成功的应用来说,通过访问接口.执行特定命令等方式判断应用是否存活.正常的方式称为健康检查. 在 OpenShift 或 Kubernetes 中,健康检查都有两个探针,分别是 ...

  4. Linux vmstat 使用说明

    摘自 https://www.thomas-krenn.com/en/wiki/Linux_Performance_Measurements_using_vmstat Linux Performanc ...

  5. java_day 02

    一.方法的传入参数可以为一个 类 类型 有往方法里传 int ,double ,char 类型的值的,第一次学习到居然还能往方法里传 类 定义好一个 Phone 类 实例化对象 ,并且往 method ...

  6. SQL注入fuzz字典

    length Length + handler likeLiKe selectSeleCT sleepSLEEp databaseDATABASe delete having oroR asAs -~ ...

  7. angular8 大地老师学习笔记---第十课

    import { Component,Input} from '@angular/core';@Component({ selector: 'app-lifecycle', templateUrl: ...

  8. 图数据库 Nebula Graph 在 Boss 直聘的应用

    本文首发于 Nebula Graph 官方博客:https://nebula-graph.com.cn/posts/nebula-graph-risk-control-boss-zhipin/ 摘要: ...

  9. win10开启运行下显示历史操作记录

    步骤 设置,隐私,常规,允许windows跟踪应用启动,以改进开始和搜索结果  

  10. 怎么同步fork原git项目

    如何实现 有时候,我们看到有价值的git项目,通常,我们会选择把原项目fork过来,然后自己去把玩研究.然而,原项目进行了更新,fork过来的代码却还是原来的版本,那有没有什么做法,能同时更新到我自己 ...