博主信息
富贵人生
博文
87
粉丝
0
评论
0
访问量
3444
积分:0
P豆:174

如何开发一款前端工具

2021年10月07日 21:38:02阅读数:50博客 / 富贵人生

基本上,使用任何成熟的语言都可以开发 cli 工具,作为一个前端小白,还是 JavaScript 比较顺手,因此我们选用nodejs作为开发语言,开发一款node-cli工具。

类似于脚手架工具,Node工具会自动去询问你一些预设的问题,然后将你回答的结果结合一些模板文件,给你生成一个项目结构。

那接下来我们以一个小型的脚手架工具为例,通过Nodejs完成一个Node工具,再来去深入体会一下Node工具的工作过程。

那我们知道脚手架工具实际上就是一个node-cli应用,那创建脚手架就是创建一个node-cli应用,那这里我们具体来操作一下,我们首先进入到命令行,通过mkdir去创建一个工具目录

mkdir samlpe-cli cd sample-cli

在这个目录下面我们通过yarn init 方式去初始化一个package.json文件

yarn init

有了这个文件之后通过编辑器打开这个目录,紧接着我们需要在package.json中添加一个bin字段,用于去指定一下我们cli应用的入口文件, 我们这里叫cli.js

{"name": "sample-cli","bin": "cli.js", ... }

再然后我们添加这个cli.js文件,跟以往我们在Node中书写的文件有所不同,cli的入口文件必须要有一个特定的文件头, 也就是在这个文件顶部写上这样一句话 #! /usr/bin/env node 我们在这个文件中console.log一句话。

#! /usr/bin/env nodeconsole.log('cli working')

如果说你的操作系统是linux或者mac系统你还还需要去修改这个文件的读写权限,把他修改成755,这样才可以作为一个cli的入口文件。

我们回到命令行,我们通过yarn link 将这个模块映射到全局

yarn link

这时候我们就可以在命令行使用sample这样一个命令, 通过执行这个命令我们的console.log成功打印出来,表示代码执行了。也就意味着我们这个cli基础就已经ok了。

sample-cli

接下来我们实现一下脚手架的具体业务,也就是我们脚手架的工作过程。

首先我们需要通过命令行交互的的方式去询问用户的一些信息,然后紧接着呢根据用户反馈回来的结果我们去生成文件,

通过命令行交互的方式询问用户信息

根据用户反馈回来的结果生成文件

在Node当中去发起命令行交互询问我们使用inquirer这样一个模块,那我们需要通过npm安装一下这个模块,我这里使用yarn,安装在依赖文件当中。

yarn add inquirer --dev

那有了这个模块过后就可以在代码中去载入, inquirer这个模块提供一个叫做prompt的方法用于发起一个命令行的询问。

他可以接收一个数组参数,数组中每一个成员就是一个问题,可以通过type指定问题输入方式,然后name指定返回值的键,message去指定屏幕上给用户的一个提示,在promise的then里面拿到这个问题接收到用户的答案。

我们这里不着急往下写,我们先通过console.log去打印一下。

const inquirer = require('inquirer'); inquirer.prompt([ {type: 'input',name: 'name',message: 'Project name'} ]).then(answer => {console.log(answer); })

回到控制台,我们命令行执行sample-cli, 此时就会提示我们需要输入项目的名称。

sample-cli

这样就可以看到问题和返回的结果。这也就证明inquirer确实可以帮我们发起命令行交互询问。

那有了inquirer之后接下来我们要考虑的就是动态的去生成我们的项目文件。

我们一般会根据模板去生成,所以我们在项目的跟目录下新建一个templates目录,在这个目录下我们去新建一些模板。

由于我们这里是讨论脚手架的工作过程,所以我们也不去关心模板里面有什么,我们就随便写点什么。我们可以通过 <%%>去替换询问过程中得到的答案。

index.html

<head><title><%= name %></title></head>

我们还可以添加一些其他的模板文件,比如style.css

style.css

body {margin: 0;background-color: red; }

回到cli.js文件, 这时候我们可以在得到问题答案的位置,根据用户回答的问题去生成文件。不过在生成前我们一般会先将模板路径和目标目录确定下来。

模板的目录应该是项目当前目录的templates,我们可以通过path获取。

const path = require('path');// 工具当前目录const tmplDir = path.join(__dirname, 'templates');

输出的目标目录一般是我们命令行在哪个目录去执行就应该是哪个路径,也就是cwd目录

const path = require('path');// 工具当前目录const tmplDir = path.join(__dirname, 'templates');// 命令行所在目录const destDir = process.cwd();

明确这两个目录,我们就可以通过fs模块去读取一下模板目录下一共有哪些文件。把这些文件全部输入到我们的目标目录,我们通过fs的readDir方法,这个方法会自动扫描目录下的所有文件

fs.readdir(tmplDir, (err, files) => {if (err) {throw err; } files.forEach(file => {console.log(file); // 得到每个文件的相对路径}) })

我们可以通过模板引擎去渲染路径对应的文件,先去安装一款模板引擎,这里我们使用ejs

yarn add ejs --dev

安装过后,回到代码中引入这个模板引擎, QQ号码地图通过模板引擎提供的renderFile去渲染这个路径对应的文件。

第一个参数是文件的绝对路径,第二个参数是模板引擎在工作的时候的数据上下文,第三个参数是回调函数,也就是我们在渲染成功过后的回调函数,当然如果你在渲染过程中出现了意外那你可以通过throw err的方式把这个错误抛出去。

我们可以先把result通过打印的方式打印出来看一下。

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); }) }) }) })

编辑完成之后我们运行一下脚手架工具。

sample-cli

此时打印出来的这个结果其实是已经经过模板引擎工作过后的结果,我们只需要将这个结果通过文件写入的方式写入到目标目录就可以了,那目标目录应该是通过path.join把我们destDir以及我们的file做一个拼接。内容就是我们这里的result。

files.forEach(file => { ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {if (err) {throw err; } fs.writeFileSync(path.join(destDir, file), result); }) })

完成过后我们找到一个新的目录,使用一下这个脚手架

sample-cli

我们输入项目名称过后,就会发现他会自动把我们模板里面的文件自动生成到对应的目录里面,至此我们就已经完成了一个非常简单,非常小型的一个脚手架应用。

那我们也回顾了一下脚手架的工作过程,其实脚手架的工作原理并不复杂,但是他的意义却是很大的,因为他确实在创建项目环节大大提高了我们的效率。

我们可以将自己的工具发布至npm上,提供给更多的人使用。

至于发布npm也非常的简单,首先我们需要注册npm账号,有两种方式可以注册,一种是登录npm官网https://www.npmjs.com/, 另一种是使用命令npm adduser。

npm adduser

会提示你输入用户名,密码,以及邮箱。

注册好后登录npm账号。

npm login

依次输入第二步中第一种方法注册的用户名、密码和邮箱。

登录成功后执行npm发布命令。

npm publish

注意:如果报错:’You do not have permission to publish “samlpe-cli”. Are you logged in as the correct user?’

表示包samlpe-cli名字已经在包管理器已经存在被别人用了,需要更该包名称,我们可以前往package.json中的name中换一个名字。

{"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镜像

npm config set registry https://registry.npmjs.org/

至此你的node工具就可以提供给其他人使用了。

如果需要更新你的工具,只要继续执行npm publish就可以更新发布了,不过需要注意,每次发布都需要修改版本号version的值,同一个版本不允许发布两次。

{"name": "sample-cli1","version": "1.0.1","bin": "cli.js", ... }

如果想要撤销本次发布可以执行

npm unpublish

不过需要注意,只有在发包的24小时内才允许撤销发布的包,超过24小时,就无法撤回了。


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • WebStorm 是JetBrains公司旗下JavaScript
    php是服务器的脚本语言,主要用于动态网页,是目最流行的语言之;Node是用来编写高性能网络服务器的JavaScript包。让我们来看看相比较Node,php有什么优点。
    对于程师来说,banner图是中必不可少的部分。但是对于缺少了DOM的小程序来说该实现banner图呢?
    VS Code的确是非常热门、有强大用户基础的。因此,本文就来介绍10高效、好用的插件,能够让原本单薄的VS Code虎添翼,效率顿时提升到个新的阶段。
    网上有很多很棒的,让作为人员的我们生活的更加轻松。在这篇文章中,我将快速介绍下我在作中经常使用的11种
    bootstrap能移动
    <&order>用npm安装Vue方便包管理,可用Vue命令、webpack构建更加高效;<&order>直接引入方式,在应用需要越来越多的库和框架的时候
    VS Code的确是非常热门、有强大用户基础的。本文给大家介绍下10高效、好用的插件,能够让原本单薄的VS Code虎添翼,效率顿时提升到个新的阶段。
    ​近些年,领域涌现出了大量框架,让人眼花缭乱,不知选择。
    Emmet是WebSublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度。
    VS Code 现今已经成为炙手可热的,它以轻量化、功能强大、易于配置、丰富的插件备受广大者的喜爱。本文,就再来介绍 5 提升生产力的 VS Code 插件。
    dva是个基于redux和redux-saga的个轻型框架,能辅助更好的组织代码进行;同时内置了react-router和fetch,基本上备了web应用所需的主要,简化了体验
    amtemu是功能十分强大的针对adobe软件设计的破解,这软件能够很好的帮助用户直接对adobe系列所有的软件进行破解,并且是在不需要管理员权限的提之下,同时,也不会向adobe软件送任的数据
    phpMyAdmin 是众多 MySQL图形化管理中使用最为广泛的种,是使用PHP 的基于B/S模式的 MySQL 客户软件,该是基于 Web 跨平台的管理程序,并且支持简体中文,用户可以在官网上下载最新版本的
    微信小程序视频教程》本课程讲述了个微信小程序,小程序需要用到哪些和接口等!步步带你实现个属于自己的微信小程序。
    般用bootstrap来网站。
    区别:react是基于mvc模式的javascript框架,而bootstrap只是个基于HTML、CSS、JAVASCRIPTui框架;bootstrap是基于html的UI构建,react
    在平时时,代码在浏览器上能很方便的断点调试,那么果要调试node后接口的话,该实现断点调试呢?本篇文章给大家介绍下vscode中断点调试nodejs的方法。
    layui是免费源的;layui是绝对源和免费的UI框架,遵循原生“HTML/CSS/JS”的书写与组织形式,门槛极低,拿来即用。
    vue-cli是Vue 提供的个官方命令行,可用于快速搭建大型单页应用。该提供箱即用的构建配置,带来现代化的流程。