基于 node 实现项目下载、自动化路由、项目发布脚手架

1,681 阅读3分钟

安装

全局安装

yarn add xwl-cli -g / npm install xwl-cli -g 在任意位置都可以使用 xw 命令

局部安装

yarn add xwl-cli -D/-S / npm install xwl-cli -D/-S 只有在当前目录下才可以使用 xw 命令

npm 包地址

命令介绍

xw -V 查看版本号

xw -h 查看帮助信息

列出了该脚手架的所有功能命令并含有详细的描述信息

xw d <directory> [repository] 下载仓库模版

<directory> 本地目录名
[repository] 就是需要下载的仓库名 -> 由 用户名/项目名 组成

sudo xw d aa sudo(在 mac 下才需要)

xw r <viewPath> <routePath> [routeName] 自动化路由

<viewPath>  vue 文件路径字符串,已‘/’分割路径层级
<routePath> 路由文件路径字符串,已‘/’分割路径层级
[routeName] 路由名称

xw s 连接服务器(该命令还未实现,没有服务器实践)

可以通过 【ssh2】 连接服务器

xw b 打包并发布

在项目根目录下执行 xw b 会执行一系列的操作,如下:
  • 选取分支、拉取远程服务代码
  • 安装依赖
  • 打包 npm run build

  • 移动打包文件到服务静态目录

实现

所需工具类

  • chalk 输出色彩文本
  • commander 定义交互命令
  • download-git-repo git 相关操作
  • inquirer 收集用户的操作
  • javascript-stringify 字符串转对象
  • log-symbols 警告信息
  • ora 加载提示
  • shelljs shell 脚本
  • ssh2 连接服务器

初始化脚手架

  • npm init 初始化项目

    配置 bin 添加可执行文件

!/usr/bin/node是告诉操作系统执行这个脚本的时候,调用/usr/bin下的node解释器;

!/usr/bin/env node这种用法是为了防止操作系统用户没有将node装在默认的/usr/bin路径里。当系统看到这一行的时候,首先会到env设置里查找node的安装路径,再调用对应路径下的解释器程序完成操作。

!/usr/bin/node相当于写死了node路径;

!/usr/bin/env node会去环境设置寻找node目录,推荐这种写法

  • npm link [path] 用来在本地项目和本地npm模块之间建立连接,可以在本地进行模块测试 (不加参数就是全局)

  • npm unlink [path] 解决关联

功能命令实现

xw d <directory> [repository] 下载仓库模版

主要通过 download-git-repo 包将资源下载到本地

【注意点:】 仓库名的填写 请看上面的使用

核心代码:

xw r <viewPath> <routePath> [routeName] 自动化路由

xw r default/page1 default/page page1

通过解析 viewPath 生成对应的 vue 模板(分割字符串、检测文件/夹状态、写文件) 通过解析 routePath 生成对应的 vue 模板(分割字符串、检测文件/夹状态、读写文件、对象字符串之间的转换)

xw b 打包并发布

拉取git服务器代码、依赖安装、打包、移动打包文件

发布

npm adduser 注册 npm 账号

npm login 登录 npm 账号

npm publish 发布 npm 包

发布不成功的原因:

  • 包名已被占用
  • 登录的账号没有进行邮箱验证

验证是否发布成功

  • 登录 npm 账号查看

  • npm install [包名]

更新包

1、修改 package.json 里面的 version,必须比上一次的大

2、npm publish

npm unpublish [包名] 删除包

项目地址

代码仓库

博文推荐

【笔记不易,如对您有帮助,请点赞,谢谢】