请选择 进入手机版 | 继续访问电脑版

小型前端脚手架工具Plop

[复制链接]
大胆 发表于 2021-1-1 18:35:09 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
小型的脚手架工具,是一款主要用于去创建项目中特定范例文件的小工具,类似于Yeoman中的sub generator, 不外它一般不会独立去使用,一般我们会把Plop集成到项目当中。
接下来我们来通过两个案例的对比,去体会一下Plop的真正作用及他的优势。
日常开辟中常常会遇到这样的问题,我们在开辟当中,常常需要重复去创建相同范例的文件,比方每一个组件都会有三个文件去组成。分别是js,css,test.js, 如果我们需要创建一个组件,就要去创建三个文件,并且每一个文件中都要有一些根本代码,这就比力繁琐,而且我们很难统一每一个组件文件中那些根本的代码。Plop可以了局这个问题,我们只需要在命令行中取运行Plop
  1. yarn plop component
复制代码
会询问我们一些信息,并且自动的帮我们创建一些文件,这也就包管了我们每次创建的文件都是统一的,并且是自动的。
Plop的基本使用

接下来我们一起在一个项目汇总加入Plop的集成,去相识一下Plop他该如何使用,使用Plop的第一件事就是将Plop作为一个npm的模块安装到我们的开辟依赖当中。
  1. yarn add plop --dev
复制代码
安装事后我们在项目标跟目次下新建一个plopfile.js文件,这个文件是plop工作的一个入口文件,需要导出一个函数,而且这个函数可以吸收一个叫plop的对象,并且这个对象提供了一系列工具函数,用于去帮我们创建生成器的任务。
  1. module.exports = plop => {    plop.setGenerator('component', {});}
复制代码
plop有个成员叫setGenerator, 吸收两个参数,第一个参数是生成器的名字,第二个参数是生成器的一些选项。
在设置选项中我们需要指定一下生成器的参数
  1. {    description: '生成器的形貌',    prompts: [ // 发出的命令行问题        {            type: 'input',            name: 'name',            message: 'component name',            default: 'MyComponent'        }    ],    actions: [ // 问题完成后的动作        {            type: 'add', // 添加一个全新的文件            path: 'src/components/{{name}}/{{name}}.js', // 指定添加的文件会被添加到哪个具体的路径, 可以通过双花括号的方式使用命令行传入的变量            templateFile: 'plop-templates/component.hbs', // 本次添加文件的母版文件是什么, 一般我们会把母版文件放在plop-template目次中,可以通过handlebars去创建模板文件.hbs        }    ]}
复制代码
数据填写完毕我们这个Plop就算是完成了。
在安装Plop模块的时候plop提供了一个CLI步调,可以通过yarn启动这个步调。
yarn plop ; // 生成器的名字
  1. yarn plop component
复制代码
yarn 会自动找到node_modules下bin目次下的命令行工具,回车事后就会执行我们上面定义的plop
我们可以尝试为生成器添加多个模板,就是添加多个actions, 官网中提供了多个type, 可以参考官网。
这就是Plop的一个基本使用,在这个过程中我们可以发现,Plop用往复创建项目当中同范例的文件还是非常方便的。
总结一下我们在一个项目当中具体去使用Plop需要这样几个步调,首先我们需要将plop模块作为项目开辟依赖去安装,然后我们需要在项目目次下创建一个plopfile.js文件,在有了plopfile文件事后我们需要在plopfile.js文件中定义一些脚手架任务,最后我们去编写一些用于生成特定范例文件的模板,这一切都完成事后我们需要通过plop提供的cli运行刚刚制定的脚手架任务,从而去生成我们在项目当中一些特定范例的文件。
脚手架的工作原理

通过询问你一些预设的问题,然后将你回复的效果结合一些模板文件,给你生成一个项目布局。
那接下来我们以一个小型的脚手架工具为例,通过NodeJS完成一个Node工具,再往复深入体会一下Node工具的工作过程。
那我们知道脚手架工具实际上就是一个node-cli应用,那创建脚手架就是创建一个node-cli应用,那这里我们具体来使用一下,我们首先进入到命令行,通过mkdir去创建一个工具目次
  1. mkdir samlpe-clicd sample-cli
复制代码
在这个目次下面我们通过yarn init 方式去初始化一个package.json文件
  1. yarn init
复制代码
有了这个文件之后通过编辑器打开这个目次,紧接着我们需要在package.json中添加一个bin字段,用于去指定一下我们cli应用的入口文件, 我们这里叫cli.js
  1. {  "name": "sample-cli",  "bin": "cli.js",  ...}
复制代码
再然后我们添加这个cli.js文件,跟以往我们在Node中书写的文件有所不同,cli的入口文件必须要有一个特定的文件头, 也就是在这个文件顶部写上这样一句话 #! /usr/bin/env node我们在这个文件中console.log一句话。
  1. #! /usr/bin/env nodeconsole.log('cli working')
复制代码
如果说你的使用系统是linux大概mac系统你还还需要去修改这个文件的读写权限,把他修改成755,这样才可以作为一个cli的入口文件。
我们回到命令行,我们通过yarn link 将这个模块映射到全局
  1. yarn link
复制代码
这时候我们就可以在命令行使用sample这样一个命令, 通过执行这个命令我们的console.log乐成打印出来,体现代码执行了。也就意味着我们这个cli根本就已经ok了。
  1. sample-cli
复制代码
接下来我们实现一下脚手架的具体业务,也就是我们脚手架的工作过程。
首先我们需要通过命令行交互的的方式去询问用户的一些信息,然后紧接着呢根据用户反馈回来的效果我们去生成文件,

  • 通过命令行交互的方式询问用户信息
  • 根据用户反馈回来的效果生成文件
在Node当中去发起命令行交互询问我们使用inquirer这样一个模块,那我们需要通过npm安装一下这个模块,我这里使用yarn,安装在依赖文件当中。
  1. yarn add inquirer --dev
复制代码
那有了这个模块事后就可以在代码中去载入, inquirer这个模块提供一个叫做prompt的方法用于发起一个命令行的询问。
他可以吸收一个数组参数,数组中每一个成员就是一个问题,可以通过type指定问题输入方式,然后name指定返回值的键,message去指定屏幕上给用户的一个提示,在promise的then内里拿到这个问题吸收到用户的答案。
我们这里不着急往下写,我们先通过console.log去打印一下。
  1. const inquirer = require('inquirer');inquirer.prompt([    {        type: 'input',        name: 'name',        message: 'Project name'    }]).then(answer => {    console.log(answer);})
复制代码
回到控制台,我们命令行执行sample-cli, 此时就会提示我们需要输入项目标名称。
  1. sample-cli
复制代码
这样就可以看到问题和返回的效果。这也就证明inquirer确实可以帮我们发起命令行交互询问。
那有了inquirer之后接下来我们要考虑的就是动态的去生成我们的项目文件。
我们一般会根据模板去生成,所以我们在项目标跟目次下新建一个templates目次,在这个目次下我们去新建一些模板。
由于我们这里是讨论脚手架的工作过程,所以我们也不去关心模板内里有什么,我们就随便写点什么。我们可以通过 去替换询问过程中得到的答案。
index.html
  1.    
复制代码
我们还可以添加一些其他的模板文件,好比style.css
style.css
  1. body {    margin: 0;    background-color: red;}
复制代码
回到cli.js文件, 这时候我们可以在得到问题答案的位置,根据用户回复的问题去生成文件。不外在生成前我们一般会先将模板路径和目标目次确定下来。
模板的目次应该是项目当前目次的templates,我们可以通过path获取。
  1. const path = require('path');// 工具当前目次const tmplDir = path.join(__dirname, 'templates');
复制代码
输出的目标目次一般是我们命令行在哪个目次去执行就应该是哪个路径,也就是cwd目次
  1. const path = require('path');// 工具当前目次const tmplDir = path.join(__dirname, 'templates');// 命令行所在目次const destDir = process.cwd();
复制代码
明确这两个目次,我们就可以通过fs模块去读取一下模板目次下一共有哪些文件。把这些文件全部输入到我们的目标目次,我们通过fs的readDir方法,这个方法会自动扫描目次下的所有文件
  1. fs.readdir(tmplDir, (err, files) => {    if (err) {        throw err;    }    files.forEach(file => {        console.log(file); // 得到每个文件的相对路径    })})
复制代码
我们可以通过模板引擎去渲染路径对应的文件,先去安装一款模板引擎,这里我们使用ejs
  1. yarn add ejs --dev
复制代码
安装事后,回到代码中引入这个模板引擎, 通过模板引擎提供的renderFile去渲染这个路径对应的文件。
第一个参数是文件的绝对路径,第二个参数是模板引擎在工作的时候的数据上下文,第三个参数是回调函数,也就是我们在渲染乐成事后的回调函数,当然如果你在渲染过程中出现了意外那你可以通过throw err的方式把这个错误抛出去。
我们可以先把result通过打印的方式打印出来看一下。
  1. const fs = require('fs');const path = require('path');const inquirer = require('inquirer');const ejs = require('ejs');// 工具当前目次const tmplDir = path.join(__dirname, 'templates');// 命令行所在目次const destDir = process.cwd();inquirer.prompt([    {        type: 'input',        name: 'name',        message: 'Project name'    }]).then(answer => {    fs.readdir(tmplDir, (err, files) => {        if (err) {            throw err;        }        files.forEach(file => {            ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {                if (err) {                    throw err;                }                console.log(result);            })        })    })})
复制代码
编辑完成之后我们运行一下脚手架工具。
  1. sample-cli
复制代码
此时打印出来的这个效果实在是已经颠末模板引擎工作事后的效果,我们只需要将这个效果通过文件写入的方式写入到目标目次就可以了,那目标目次应该是通过path.join把我们destDir以及我们的file做一个拼接。内容就是我们这里的result。
  1. files.forEach(file => {    ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {        if (err) {            throw err;        }        fs.writeFileSync(path.join(destDir, file), result);    })})
复制代码
完成事后我们找到一个新的目次,使用一下这个脚手架
  1. sample-cli
复制代码
我们输入项目名称事后,就会发现他会自动把我们模板内里的文件自动生成到对应的目次内里,至此我们就已经完成了一个非常简单,非常小型的一个脚手架应用。
那我们也回首了一下脚手架的工作过程,实在脚手架的工作原理并不复杂,但是他的意义却是很大的,因为他确实在创建项目环节大大提高了我们的效率。
我们可以将自己的工具发布至npm上,提供给更多的人使用。
至于发布npm也非常的简单,首先我们需要注册npm账号,有两种方式可以注册,一种是登录npm官网https://www.npmjs.com/, 另一种是使用命令npm adduser。
  1. npm adduser
复制代码
会提示你输入用户名,暗码,以及邮箱。
注册好后登录npm账号。
  1. npm login
复制代码
依次输入第二步中第一种方法注册的用户名、暗码和邮箱。
登录乐成后执行npm发布命令。
  1. npm publish
复制代码
注意:如果报错:‘You do not have permission to publish “samlpe-cli”. Are you logged in as the correct user?’
体现包samlpe-cli名字已经在包管理器已经存在被别人用了,需要更该包名称,我们可以前往package.json中的name中换一个名字。
  1. {  "name": "sample-cli1",  "version": "1.0.0",  "bin": "cli.js",  ...}
复制代码
再次执行publish命令。出现 +sample-cli1@1.0.0即体现发布乐成。
如果发布时报错:no_perms Private mode enable, only admin can publish this module:
体现当前不是原始镜像,要切换回原始的npm镜像
  1. npm config set registry https://registry.npmjs.org/
复制代码
至此你的node工具就可以提供给其他人使用了。
如果需要更新你的工具,只要继续执行npm publish就可以更新发布了,不外需要注意,每次发布都需要修改版本号version的值,同一个版本不允许发布两次。
  1. {  "name": "sample-cli1",  "version": "1.0.1",  "bin": "cli.js",  ...}
复制代码
如果想要取消本次发布可以执行
  1. npm unpublish
复制代码
不外需要注意,只有在发包的24小时内才允许取消发布的包,高出24小时,就无法撤回了。

来源:https://blog.csdn.net/xuzhijia1991/article/details/111959507
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )