xd-cli

起因

• 工作也差不多满一年了，对于基本的业务开发有了一些自己的想法
• 刚开始工作的前3个月，每天都可以接触到新东西，接触新业务
• 3个月之后业务开发熟悉了对于自己的技术成长就感觉受到了局限
• 如果一直没有作出改变，那么等于是3个月的经验要用一年
• 我的学习方式就是多对已经学过的做总结积累，然后探索没有接触过的新方法
• 所以这一篇是总结，对一年的收获做个总结
• 开始想以写下一篇博客的方式进行总结
• 后来觉得博客可能实用性不高，所以决定自己开发一个npm插件
• 好了接下来介绍下这个插件，也就知道我这一年所积累的东西

过程

预想实现功能

• 拿本地IPv4ip
• 静态起服务server(支持自定义端口号server 1234，默认7777)
  
• 压缩图片资源rar(速度较快，压缩效果不及tinify，且暂时不能传参)
  
• 压缩图片资源tinify(速度较慢，压缩效果好，受tinify_api限制(每月500张，对于一般项目而言应该是够了)
  
• 支持网路图片压缩后存本地tinify http://asdf.png
  
• 快速生成项目模版xd ls
  
• 自动化爬虫
• 图片自动上传七牛云返回cdn链接

项目模版是主要功能点

• 移动端h5-vue
• 移动端h5-react
• 管理中后台admin-vue
• 管理中后台admin-angular6☑️
• 官网pc-vue
• 小程序-wepy️️☑️
• 小程序-taro
• go后台模版
• express后台模版

公用UI组件库

• 针对移动端h5
• 针对管理中后台admin
• 针对小程序

结果

• 关于xd-cli这个插件我最终想做成一个包含常用基础功能，然后再带一个生成项目模版的list
• 里面的功能实现都由原生js实现，后面会出一篇如何实现这个npm包的博客
• 此xd-cli包就是为工作的第一年画上句号
• 展望第二年准备学习一个后端语言go/nodejs、学习开发原生ios、熟悉用Linux、最后还是巩固基础（网络层/应用层）

实现过程

开始之前我需要准备什么？

• mkdir 项目名称
• npm init
• remote至远程仓库
• 核心功能开发

项目结构啥样的？

├── LICENSE
├── OTP.md // 双因素身份验证
├── README.md
├── bin // 命令式核心功能模块
│   ├── ip.js
│   ├── list.js
│   ├── rar.js
│   ├── server.js
│   └── tinify.js
├── index.js // 文件主入口
├── lib // 存常量
│   └── templates.js
├── package-lock.json
└── package.json

如何制作命令并调用相应功能模块代码，类似ip就调用/bin/ip.js?

• cd bin
• touch ip.js
• vi ip.js
• 第一行插入#!/usr/bin/env node，这是指定运行环境需在node下
• 导入需要模块后npm i xx –save，实现逻辑代码，具体代码就不贴了（已开源，末尾有github地址）
• vi package.json，生成ip命令

  "bin": {
      "ip": "./bin/ip.js",
      "server": "./bin/server.js",
      "tinify": "./bin/tinify.js",
      "rar": "./bin/rar.js",
      "xd": "index.js"
    }

• Last but the least, 生成软连接npm link

说明下几个关键模块是干嘛的？(自己去npm上搜)

• commander，总之就是制作命令的
• chalk，让你的打印输出变成彩色
• inquirer，用于跟用户交互的
• download-git-repo，顾名思义
• ora，loading模块，等待时间长有个转圈圈的，用户体验好
• open，用你默认浏览器打开一个网址
• tinify，🐼压缩用到里面的api

功能做好了，我要发布出去给大家用，咋弄？(百度呗)

• 逗你的啦
• npm publish
• 注意一点，每次要发版本前记得改下version

如何在实现过程中遇到除上面之外问题咋办?

• 百度
• 给我留言(ps:提issue)

附件📎

• npm地址