工作以来,积累了几套项目模板,包括 PC 、H5 、Electron 、小程序等,平时可用于快速创建 项目模板。
提升开发效率,也是前端工程化的所需要的。
那么这次,封装的 脚手架( JZ-cli ),采用 命令行交互式 询问安装,方便快速开发新项目。
主技术栈为 Node Npm。
话不多说,直接开搞:
脚手架的原理:
脚手架在命令行交互选择,选中所需 web 模板时,去下载远程 git 仓库的模板文件。下载完,拷贝目录到项目根目录。删除多出来的目录,并复制工具库。按照在命令行传入的配置,渲染最新的 package.json.
仓库托管:
因为 脚手架还需要单独发布到 npm ,包的体积大小不适合太大。所以分开 脚手架 和 模板 的目录,我这里都选择了 github 去托管。( 也可以用 gitlab )
初始化 package.json 与 bin 命令
npm init -y
( 初始化 package.json )package.json 里 新建 bin 字段:
bin 是 会链接到全局 path。把 bin 中的命令,在命令行可以执行,并直接运行全局的 bin 指向路径的文件。1
2
3
4
5
6
7
8
9
10
11{
"name": "jz-temp-cli",
"version": "0.0.1",
"description": "一款以node技术为主,包括PC、H5、小程序、Electron的脚手架",
"bin": {
"JZ-temp": "bin/index.js",
"JZ-cli": "bin/index.js",
"JZ": "bin/index.js"
},
}参考链接:npm docs :bin
主文件:
bin / index.js
index.js 里,首行: #!/usr/bin/env node
因为我们需要用 node 去执行相关命令,所以 需要这句话#!/usr/bin/env node
,使用 node 进行脚本的解释程序,那下面的就可以使用 node 的语法了。调试前,需要
npm i . -g
,将本地包安装到全局。然后npm link
,建立 本地包 和 全局包的 同步关联。
接下来可以愉快的调试了~
几个关键库:
commander : 终端交互库
1
2
3
4
5
6
7
8const { program } = require('commander')
program
.version(packageJson.version) // version 赋予版本号
.command('create [project]') // command:指令名字
.description('初始化项目模板') // 对应 command指令的 描述
.action(async (projectName) => { // action 对应 命令指定处理函数
require('../lib/create')(projectName)
})inquirer : 实现交互式命令行
chalk : 给命令行设置颜色
fs-extra : 基于 fs 的额外补充版, 原型是 fs
log-symbols : 各种日志级别的彩色图标
ora : 终端 loading
mvdir : 迁移文件目录
del : 删除 文件 和 目录 ,支持 promise 调用
交互效果如图:
具体脚手架代码:
- 项目链接:github temp-cli
- 因为文章篇幅,就不展开讲了。代码量不算多,可以去看下~
发布 npm 需要做的准备:
- 登录 npm( https://www.npmjs.com/ ) ,注册账号 (存好账号密码)
- 切换 npm 源,为默认的 切换为默认源
命令行输入:npm config set registry https://registry.npmjs.org - 修改 package.json
author :名字
“author”: “jonnzer janebenjohn@outlook.com (http://github.com/jonnzer)",
- name :需要遵循规范:唯一,由小写英文字母、数字和下划线组成,不能包含空格
npm 发布
在命令行,按顺序输入以下命令:
npm login
: 登录 npm ,需要用到刚刚注册的用户名密码npm publish
- 去 npm 个人 packages 页,看下有没有你最新的发布包。
- 恭喜您完成本教程啦~~~
参考链接:
npm docs :bin
github command API
yuque deploy npm package
- 本文标题:搭建脚手架 && 发布 Npm 仓库
- 本文作者:Jonnzer
- 创建时间:2021-11-01 08:30:00
- 本文链接:https://jonnzer.github.io/2021/11/01/开发环境/脚手架/脚手架/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!