工作中接到新项目,开发前都需要先规划项目目录,然后一个个创建文件,搭建 sass 编译环境,下载 jquery,Swiper 等类库... 这些准备工作都要花上不少时间。每做一个项目,都会遇到同样的问题,再重复一遍吗? 是时候做点改变了:编写自己的 cli 工具,一行命令,3 秒钟进入 coding 状态!
本文以自己的 my-cli 为例,将开发到发布过程完整记录下来,看完本文,你将学会如何从零开发一个 cli 项目,如何上传到 github 库,以及如何使用 npm 发布自己的包。
开发一个 cli 工具前首先要想好它能做什么。以我自己为例,我需要一个工具,让我能只输入一行命令就帮我快速搭建好项目结构,就像这样: 是不是很炫酷?放心,很简单。
首先创建你的 cli 项目,并使用 npm init 创建一个 package.json。
- $ mkdir my-cli && cd my-cli
- $ npm init
根据提示一步步创建好 package.json。name 属性就是你发布到 npm 上的名字,这个是不能与 npm 上现有项目重名的,一个小技巧是使用 npm install 下载你想要起的包名字,如果报错 404,那么你的包名是可用的。最后创建好的 package.json 文件像这样子:
- {
- "name": "my-cli",
- "version": "0.0.1",
- "description": "Auto generate project template",
- "main": "index.js",
- "bin": {
- "my-cli": "./index.js"
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/hlme/my-cli.git"
- },
- "keywords": [
- "cli"
- ],
- "author": "798400626@qq.com",
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/hlme/my-cli/issues"
- },
- "homepage": "https://github.com/hlme/my-cli#readme"
- }
package.json 中有一个 "bin" 字段,配置后才可以在控制台使用你的命令。
- "bin": {
- "my-cli": "./index.js"
- }
我们配置了 "my-cli" 命令来执行 index.js 文件。用你喜欢的编辑器,在项目主目录下创建一个 index.js 文件。 注意第一行的 "#! node" 很重要,表示用 node 来执行这个文件。如果没有这句声明,就会在记事本中打开 index.js 文件。
使用 npm install -g 将你当前的项目安装到全局环境, 现在你可以在命令行使用 "my-cli" 命令了。
我们自定义的指令可以执行了,接下来编写代码实现功能。my-cli 的主要功能就是生成项目模板,一个思路是用一个 templates 文件夹保存项目模板,然后通过 fs.mkdir() 来创建项目目录,最后把文件从 templates 文件夹拷贝到项目中去。
- var fs = require('fs');
- var path = require('path');
- function copyTemplate(from, to) {
- from = path.join(__dirname, 'templates', from);
- write(to, fs.readFileSync(from, 'utf-8'))
- }
- function write(path, str, mode) {
- fs.writeFileSync(path, str)
- }
- function mkdir(path, fn) {
- fs.mkdir(path,
- function(err) {
- fn && fn()
- })
- }
核心代码就这么点,是不是非常简单?
整个项目文件结构差不多就这个样子,把你需要的文件放到 templates 文件夹,然后用 copyTemplate 方法将文件拷贝到项目目录下。
创建文件目录和拷贝文件的过程,代码看着比较丑陋
平常我们使用命令行工具时都会用到参数,如 webpack -p, express -e 等,现在我们来为自己的 cli 添加接收命令行参数的功能。为 my-cli 设计四个参数,用来向项目中添加类库。
- $ my - cli - j - s - v - b
- //-j :添加jQuery
- //-s :添加Swiper
- //-v :添加vue
- //-b :添加Bootstrap
使用 commander 包可以简化解析参数过程,但是本项目比较简单,我也不想额外引入其他的包了,处理一些简单的参数其实并不难。 node 中我们可以使用 process.argv 来获取命令行参数,process.argv 是一个参数数组,第一项为 node.exe 的绝对路径,第二项为执行该 js 的绝对路径,使用 process.argv.slice(2) 即可获取输入的参数数组。
通过遍历参数数组来检查命令中输入了哪些参数。如果输入了预设的参数,就为 config 对象添加对应的属性,在生成文件时根据 onfig 判断是否将模板文件拷贝到项目中。继续丑陋的代码:
至此我们的项目已经基本完成了,使用 npm install -g 将项目安装到全局环境,然后新建一个项目文件夹,使用 my-cli 命令来生成项目模板。
要想将自己的包发布到 npm 上,首先得有一个 npm 账号,创建账号非常简单,输入 npm adduser,简单三步即可完成创建。 创建好 user 后,使用 npm publish 即可将当前项目发布到 npm 上了,以后就可以使用 npm install -g my-cli 来安装你的 cli 工具。
开发了自己的 npm 包,如果想获得更多人的关注,上传到 github 上是个比较好的办法,推荐一篇教程:Git 远程仓库 (Github)。
相信大家看完本文后知道如何根据自己的需求制作 cli 工具了。本文中的 my-cli 比较简单,权当做抛砖引玉。如果想查看完整源码或者使用这个工具,可以戳这里:github 地址。
来源: http://www.cnblogs.com/huanglei-/p/6885914.html