脚手架工具

脚手架工具
- 脚手架工具介绍
- 常用的及脚手架工具
- Yeoman
- Sub Generator
- 常用的Yeoman使用步骤
- 自定义Generator
- 根据模板生成文件
- 接收用户输入
- vue Generator
- Plop
- - 1. Plop简介
  - 2. Plop基本使用
- 脚手架的工作原理

脚手架工具

脚手架工具介绍

脚手架的本质作用：自动创建项目基础结构提供项目规范和约定。

脚手架不仅仅能帮我们创建文件，更重要的是可以帮我们进行一些规范的约定

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

脚手架工具就是为了解决我们项目搭建前期需要重复的工作的。

IDE创建项目的过程就是脚手架执行的过程

前端脚手架没有同意标准不会继承在IDE中都是独立存在的插件

主要学习：
脚手架的作用
常用的脚手架工具
通过脚手架工具剖析
开发一款自己的脚手架

常用的及脚手架工具

目前市面上的工具
React => create - react - app
vue => vue - cli
Angular => angular - cli

实现方式都大同小异 , 根据信息创建对应的项目基础结构，主要服务于自身的框架，还有一些类似Yeoman这种的通用的脚手架，根据一个模板生成一个项目结构还有，另一个工具plop创建一个组件 / 模块所需要的文件。

Yeoman

Yeoman不同于vue - cli，Yeoman更像是脚手架的平台我们可以搭建不同的
Generator来创建不同的脚手架，可以通过创建自己的额Generator来搭建适合自己项目的脚手架。
Yeoman的优点也是缺点：对于经常使用框架的自带的脚手架的人而言Yeoman不够专注过于通用。
Yeoman的使用

安装Yeoman 准备工作：

node -v  // 确认node环境以及版本
npm-v  // 确认npm版本
npm i yarn -g // 全局安装yarn命令
yarn global add yo || npm install -g yo // 安装全局安装Yeoman

安装对应的gennerator
Yeoman必须要配合Genarator才能帮助我们创建项目例如我们想要创建一个node-modules的模块就需要使用generator-node这个模块

使用Generator的方式也是通过全局安装的方式

yarn global add gennerator-nodeC: \Users\ Apple\ Desktop\ songyi - module > yo node ?=== === === === === === === === === === === === === === === === === === === === === === === === ==We 're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time ?More info : https: //github.com/yeoman/insight & http://yeoman.io====== === === === === === === === === === === === === === === === === === === === === === === == Yes?Module Name songyi - module // 创建的项目名称
(node: 1356)[DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated ?Description // 项目的具体描述 ?Project homepage url https : //github.com/93songyi   // github地址?Author 's Name songyi  // 作者名字 ?Author 's Email 840600097@qq.com // 作者邮箱 ?Author 's Homepage https://songyi.me ?Package keywords(comma to split) module, node // 项目关键词?Send coverage reports to coveralls No 是否发送代码覆盖到指定的地方 no ?Enter Node versions(comma separated) ?Enter Node versions(comma separated) ?GitHub username or organization songyi ?Which license do you want to use ? MIT 选择MITcreate package.json
force.yo - rc.json
force..\..\.yo - rc - global.json
create README.md
create.editorconfig
create.gitattributes
create.gitignore
create.travis.yml
create.eslintignore
create lib\ index.js
create LICENSE
create lib\ __tests__\ songyiModule.test.jsI 'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.npm WARN deprecated request @2 .88 .2: request has been deprecated, see https: //github.com/request/request/issues/3142npm WARN deprecated request - promise - native @1 .0 .9: request - promise - native has been deprecated because it extends the now deprecated request package, see https: //github.com/request/request/issues/3142npm WARN deprecated har - validator @5 .1 .5: this library is no longer supported[..........] / extract: yargs - parser: sill extract word - wrap @1 .2 .3

Sub Generator

作用: 有时我们不需要创建整个数据结构只需要在原有的项目结构上创建文件，例如给已有的项目创建Readme文件。
可以通过Yeoman上的sub Generator这个特性来实现。

yo node: cli //Yeoman运行node下的cli

会提醒是否重写package.json 文件因为cli模块会改变配置

conflict package.json
? Overwrite package.json?  overwrite  // 回答 yforce package.jsoncreate lib\cli.jspackage.json文件修改了 "bin": "lib/cli.js",
"dependencies": {"meow": "^3.7.0"
}

还有在lib/cli.js 中提供了一些基础的代码

yarn link 到全局范围就可以运行刚刚加进来的模块了
yarn命令安装package.json中的依赖
就可以以项目名称书写命令运行了这就是Generator子集的特性, 不是所有的子集都有这个特性.
需要通过官方文档来明确当前使用的子集是否有这个特性

generator-node提供的sub generator

node - boilerplate
node: cli
node: editorconfig
node: eslint
node: git
node: readme

我的运行项目名称 --help之后报错

PS C:\Users\Apple\Desktop\songyi-module> songyi-module --help
songyi-module : 无法将“songyi-module”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路
径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1
+ songyi-module --help
+ ~~~~~~~~~~~~~+ CategoryInfo          : ObjectNotFound: (songyi-module:String) [], CommandNotFoundException+ FullyQualifiedErrorId : CommandNotFoundException
环境变量配置问题

常用的Yeoman使用步骤

常用步骤整理：

明确需求
查看官网找到需要使用的Generator
全局范围安装Generator
通过yo运行对应的generator
通过命令行交互填写选项
生成所需要的项目结构

例如想生成一个网页应用

找到官网 https://yeoman.io/generators/ 查找合适的generator
命令行安装 webapp yarn global add generator - webapp
安装完成后通过Yeoman运行 yo webapp 会有一些预设的问题会根据你的选项生成项目结构也会自动帮你安装所需依赖
需要注意的是安装这些依赖是需要依赖c++的模块去下载一些二进制的文件这些文件不能通过npm镜像去加速所以速度会慢。

自定义Generator

不同的Generator可以生成不同的项目，我们可以根据自己的需求创建Generator
创建Generator模块规则：

Generator有特定的目录结构
有特定的名称必须是以generator-的形式命名yeoman运行时候才能找到这个模块

步骤：

mkdir generator-sample 文件夹名作为生成器目录

mkdir generator-sample

cd generator-sample
yarn init 生成package.json
yarn add yeoman-generator 安装生成器的基类，基类中提供了一些工具函数可以在创建生成器的时候更加便捷
vscode打开目录安装generator要求创建基础目录
6 generators/app/index.js 创建一个generators文件夹下面包含一个app文件夹，下面有一个index.js
在index.js 写入文件方法
把当前的sample挂载到全局 yarn link / npm link
cd…回到桌面创建文件夹my-project
进入my-project 运行yo sample 项目中创建了temp.txt 内容就是Math.random()的内容

此时没有生成成功报错如下：
Error sample

primordials is not defined

解决：

安装node版本控制器 npm install -g n
运行后又报错改为报错如下 npm install -g n --force 就可以了

npm ERR! code EBADPLATFORM   (EBADPLATFORM ->古怪)
npm ERR! notsup Unsupported platform for n@6.7.0: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Vali。d OS:    !win32
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Apple\AppData\Roaming\npm-cache\_logs\2020-11-20T15_54_31_755Z-debug.log

根据模板生成文件

很多时候需要创建的文件有很多内容也很复杂这时候需要使用模板创建文件

现在generator/app 文件夹下创建一个templates的文件夹里面有一个文件foo.txt
yo sample yeoman会自动使用模板引擎来渲染模板，将渲染结果输出到目标文件夹中

相对于手动创建文件，模板的方式可以提升效率特别当文件较多又很复杂的情况。

接收用户输入

模板中的一些数据是创建文件时用户自定义的需要我们动态获取的
命令行交互的方式来获取

方法如下:

在writing方法的同级使用prompting方法
return 一个promise对象 this.prompt()
this.prompt() 接收一个数组参数里面用来配置命令行交互的配置项
promise对象的then方法中返回了命令行交互中要获取的动态值
在write方法中的模板数据上下文修改为动态值
运行 yo sample

vue Generator

创建一个vue Generator案例步骤：

生成一个理想的项目结构

mkdir generator-songyi-vue

cd generator-songyi-vue

初始化package.json文件

yarn init

安装依赖

yarn add yeoman-generator

vscode打开

code .

引入 yeoman-generator
导出继承generator的模块
在prompting的 prompt方法中写入命令行交互的问题以及把回答的answers挂载到this上
创建templates目录拷贝项目目录放进templates中作为模板
修改模板中可能发生变化的地方使用<%= %>的方式进行替换
在writing中把每一个文件通过模板转换到目标路径
写入模板文件的相对路径的数组，通过数组遍历的方式通过fs.copyTpl生成文件
yarn link 到全局
新生成一个目录并进入
在新目录下运行 yo songyi-vue 需要输入项目名称用来替换模板中的项目名称
报错因为 <%= BASE_URL %> 并不是以ejs模板字符串的形式输出的, 改为<%%= BASE_URL %> 就可以转译

发布Generator

一般发布需要进行git托管
进入命令行忽略 node - modules
echo node_modules
git init 初始化本地仓库
git add . 添加所有文件夹下文件
git commit -m “first-commit” 创建一次提交
github创建一个新仓库
git remote add origin 地址添加远端仓库
git push -u origin master
yarn publish / npm publish 运行后会提示是否要对版本进行修改输入用户名和密码
运行后会报错原因是国内会用淘宝镜像取代国外镜像
方法：
修改本地镜像地址
或者运行命令 yarn publish --registry=https://registry.yarnpkg.com

就已经发送成功了成功后可以通过去全局的方式去进行安装了再通过yo 去使用

可以添加一个yeoman-generator的关键词这个时候yeoman的官方会发现

Plop

1. Plop简介

用在项目中创建特定类型的小工具类似sub generator
不会单独使用都是集成使用的

需要再命令行运行plop然后会有一些我们设置的问题询问之后plop会根据我们给的选项自动帮我们生成重复的文件

2. Plop基本使用

将plop模块作为项目开发依赖进行安装
在项目根目录下创建一个plopfile.js文件
在plopfile.js文件中定义脚手架任务
编写用于生成特定类型文件的模板
通过plop 提供的cli运行脚手架任务

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}}.js',templateFile: 'plop-templates/component.hbs'},{type: 'add', // 代表添加文件path: 'src/components/{{name}}/{{name}}.css',templateFile: 'plop-templates/component.css.hbs'},{type: 'add', // 代表添加文件path: 'src/components/{{name}}/{{name}}.test.js',templateFile: 'plop-templates/component.test.hbs'}]})}

脚手架的工作原理

根据一些预设问题，根据回答替换模板帮你生成一些文件

工作过程：

桌面进入命令行创建文件 mkdir sample-scaffolding
进入文件目录 cd sample-scaffolding
创建package.json文件运行yarn init
vscode打开目录 code .
打开package.json 新增bin字段执行cli应用的入口文件

"bin":"cli.js"

文件夹下新增cli.js
写入固定文件头 #!usr/bin/evn node
// node cli 应用的入口文件必须要有这样固定的文件头
// 如果是linux 或者macOS系统还需要修改此文件的读写权限修改为755
// 在文件随意写入一个、console.log()语句为了验证后面 sample-scaffolding是否正常运行
link到全局 yarn link
运行 sample-scaffolding 查看命令行是否有打印正常输出

脚手架工作过程：

通过命令行询问信息
通过用户回答生成文件
node中使用inquiry模块 yarn global add inquirer
载入inquirer

const inquirer = require('inquirer')

通过inquirer的prompt方法配置命令行交互的问题

 inquirer.prompt([{type: 'input',name: 'name',message: 'Project name',default: 'sample-scaffolding'}]).then(answers => {console.log(answers);
})

控制台运行sample-scaffolding 就会弹出个交互命令了我们回答后控制台会打印我们的问题的键和回答的值
新建templates文件并创建模板文件
根据用户回答结果生成文件

const path = require('path')
const fs = require('fs')
const ejs = require('ejs')
inquirer.prompt([{type: 'input',name: 'name',message: 'Project name',default: 'sample-scaffolding'
}]).then(answers => {console.log(answers);})

// 8.1 拿到模板目录

const tmplDir = path.join(__dirname, 'tempaltes')

// 8.2 目标目录

 const destDir = process.cwd()

// 8.3 将模板下的文件全部转换到目标目录

    fs.readdir(tmplDir, (err, files) => {// 8.4 如果有err返回出去if (err) throw err// 8.5 遍历查看files是什么files.forEach(item => {console.log(item); // 7.6 打印了文件的相对路径// 8.7 通过模板引擎去渲染对应路径下的文件// 8.8 命令行安装模板引擎并引入yarn add ejs// 8.9 通过模板引擎的readFile方法来渲染模板文件到目标路径ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {if (err) throw errconsole.log(result); //已经是模板引擎转换过的文件// 8.10 通过目标文件目录写入转换好的模板文件fs.writeFileSync(path.join(destDir, file), result)})})})
})

创建新文件
使用新的脚手架输入项目名称在目标文件就生成了一个我们脚手架的文件目录了.

大前端学习2-1__脚手架工具相关推荐

靠在校所学的前端知识，你可能连实习都找不到，附【大前端学习路线】
又是一年毕业季,又有万千学子开始涌入社会这片汪洋. 前些日子有个大学生小伙问了我关于前端开发找工作的问题,他说他很迷茫,大家都找到了工作,自己的简历投了却杳无音信,于是来问我是不是哪些环节没有做好. ...
大前端学习--开发脚手架与自动化构建工作流封装
开发脚手架与自动化构建工作流封装去年6月24号开始工作,到今天刚好一周年了,纪念一下,分享最近学习的前端工程化笔记. 一.前端工程化前端工程化是指遵循一定的标准和规范,通过工具去提高效率.降低成本 ...
大前端学习记二开发准备
此学习笔记主要是根据XX网大前端课程学习时的笔记整理. 目录一.项目开发准备 1.1 开发环境搭建 1.1.1 虚拟机介绍 1.1.2 Vue-Cli 1.2 Linux中常见指令 1.3 Dock ...
前端H5怎么切换语言_「自学系列一」HTML5大前端学习路线+视频教程完整版
全新Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我是谁? 我该从哪里开始 ...
【自学系列一】HTML5大前端学习路线+视频教程（完整版）
今年,本公司全新发布了囊括Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了-- 我 ...
史上最全前端学习路线图（视频+工具+书籍+资源）
很多人在学习编程的路上都会收藏一些资料,但是真正用起来的却很少,究其原因可能就是不够系统,资料不全.所以下面我也为大家整理了最全的前端学习教程+工具+书籍,就不用你一个个收藏了,看这篇就够了!!! 2 ...
大前端学习--两个多月来的收获与进步学习总结
两个多月来的收获与进步有多少作为大前端课程的第一期学员,我已经学了2个多月了,课程质量和教学水平如何不用再重复了,之前在大前端高薪训练营心得体会+学习笔记这篇文章里已经说过了.这两个月来有很多人向 ...
大前端学习笔记--持续随缘更新
前端知识&HTML常用标签 20200210 1.浏览器及内核介绍: chrome谷歌:特点--简洁.快速.安全内核--webkit,Blink费用--收费前缀-- -webkit- Fire ...
前端从入门到大前端学习流程总结
第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMA ...

大前端学习2-1__脚手架工具