开发脚手架工具

230 阅读2分钟

学习了coderwhy的nodejs视频课的笔记

一:创建项目

1. 创建index.js

  • 可以编写一些简单的代码
console.log('test...')

2. 创建package.json

  • npm init -y

3. 创建xwlvue命令

  • 入口文件index.js中,添加如下指令(shebang也成为hashbang)。目的就是通过电脑环境,使用node执行该文件index.js。
#!/usr/bin/env node
console.log('test...')
  • 修改package.json
"bin": {
    "xwlvue": "index.js"
}
  • npm link。目的就是添加全局命令xwlvue

上面测试的执行结果如下:

image.png

二:Commander的使用

1. 下载commander,然后CommonJS倒入

  • npm install commander
const program = require('commander')

2. 定义显示版本号

program.version(require('./package.json').version)

3. 解析终端指令

program.parse(process.argv)

上面测试的执行结果如下:

image.png

image.png

4. 添加其他选项、修改帮助选项

image.png

三:创建项目指令
  • 创建项目指令的思路如下:
    • 创建解析create指令
    • 通过download-git-repo第三方库,从代码仓库中下载模板
    • 进入目录,并且执行 npm install命令
    • 执行 npm run serve命令
    • 打开浏览器

1、index.js文件:

image.png

2、create.js文件,创建create指令,执行的是createProjectAction的回调函数

image.png

3、actions.js文件,定义createProjectAction的回调函数

image.png

4、terminal.js文件,创建子进程,执行npn install、npm run serve

image.png

5、repo-config.js

image.png

四:创建添加组件
  • 创建添加组件思路(页面、路由等文件类似思路):
    • 创建addcpn的命令
    • 准备好对应的ejs模块(vue-component.ejs),使用ejs的第三方库
    • 封装编译ejs模块的函数
    • 封装将编译后的内容,写入文件的函数

1、create.js,在program.opts().dest获取的参数./src/views(xwlvue addcpn nav -d ./src/views)

image.png

2、actions.js

image.png

3、compiler.js,解析创建组件的模板vue-component.ejs

image.png

4、writeToFile.js,根据解析的模板来创建组件

image.png

五:发布项目
  • 注册npm账号:
  • 在命令行登录:
    • npm login
  • 修改package.json
  • 发布到npm registry上
    • npm publish
  • 更新仓库:
    • 1.修改版本号(最好符合semver规范)
    • 2.重新发布
  • 删除发布的包:
    • npm unpublish
  • 让发布的包过期:
    • npm deprecate