ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

脚手架工具

2022-07-01 16:03:06  阅读:184  来源: 互联网

标签:generator yo 项目 Generator Yeoman 脚手架 工具


目录

脚手架工具

脚手架工具概要

脚手架的本质作用

创建项目基础解构,提供项目规范和约定

  • 项目的组织结构
  • 相同的开发范式
  • 相同的模块依赖
  • 相同的工具配置
  • 相同的基础代码

常用的脚手架工具

为特定类型服务脚手架工具

根据信息创建对应的项目基础解构,但一般只适用于自身所服务的框架的项目

  • React 项目 => create-react-app
  • Vue.js 项目 => vue-cli
  • Angular 项目 => angular-cli

通用性项目项目脚手架工具

可根据一套模板,生成一个对应的项目解构

  • Yeoman
  • Plop 用于项目开发过程中,创建特定的类型文件,例如创建一个组件 / 模块所需要的文件

Yeoman 简介

Yeoman 通用型脚手架工具,容易拓展,比较灵活,可创建属于自己的脚手架。Plop项目开发过程中,创建特定类型的文件。

相比 vue-cli 等,Yeoman 更像是脚手架的运行平台。可通过 Yeoman 搭配 Generator 创建任何类型的项目。可通过创建自己的 generator ,从而去定制属于我们自己的前端脚手架。

image

缺点:

1、过于通用,不够专注

Yeoman 基础使用

  • 全局安装 Yeoman
npm install yo --global # or yarn global add yo
  • 安装对应的 generator (例如 generator-node)
npm install generator-node --global # or yarn global add generator-node
  • 通过 yo 运行 generator
cd path/to/project-dir
mkdir my-module
yo node

image

Sub Generator

作用:可用于在已有的项目中创建特定类型的文件,如 .browserslistrc .eslintrc.js

  • 通过 yo 运行 generator-node 子集生成器
yo node:cli

image

image

image

  • 设置成为全局的命令行模块
yarn link
  • 安装依赖
yarn
  • 运行命令
my-module --help

需注意并不是所有的 generator 都有子集生成器

Yeoman 使用步骤总结

常规使用步骤:

  1. 明确你的需求;
  2. 招到合适的 Generator;
  3. 全局范围安装找到的 Generator;
  4. 通过 Yo 运行对应的 Generator;
  5. 通过命令行交互填写选项;
  6. 生成你所需要的项目结构;

如想创建一个网页应用:

  1. 先到 Yoman 官网 找到对应的 Generator (generator-webapp)

image

  1. 安装 generator
yarn global add generator-webapp
  1. 运行 webapp
yo webapp

npm 镜像加速配置

image

标签:generator,yo,项目,Generator,Yeoman,脚手架,工具
来源: https://www.cnblogs.com/dwyWeb/p/16434982.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有