github地址: https://github.com/Wec4Dre96/wwq-learn-cli
一. 如何创建终端命令
- 入口文件index.js
!后面代码表示去环境变量里头找node这个命令
#!/usr/bin/env node
console.log("wwq cli");
- package.json添加如下配置
"bin": {
"wwq": "index.js"
},
-
当前目录下运行npm link命令
npm link结果
二. commander库
用来在node代码里面比较方便地使用命令行
- 简单的打印版本号
#!/usr/bin/env node
const program = require('commander');
// 定义
program.version(require('./package.json').version);
// 解析
program.parse(process.argv);
- 增加自己的选项option
program.option('-w --wwq', 'a cli made by wwq');
- 监听指令
program.on("--help", function () {
console.log();
console.log("Other: ");
console.log(" other options~ ");
});
监听help指令
三. 如何让wwq create demo的命令生效
首先需要创建create这个指令, 单独搞了个lib/core/create.js的目录
const program = require("commander");
const createCommands = () => {
program
.command("create [others...]")
.description("clone repository into a folder")
.action((project, others) => {
console.log(project);
});
};
module.exports = createCommands;
三. 搞个ejs模版
如图所示, 之后会放到github上
image.png
四. 编译
我们搞了模版之后需要先将ejs编译才能使用, 所以我们搞点工具函数用用.
我们需要使用ejs这个库来帮助我们编译, 所以npm i ejs.
在这里我们先调试一下看看路径是否正确, 需要在actions (addComponentsAction方法)和create(program注册命令c d xcdx)里面同步命令的注册.
image.png
测试后路径正确, 进行编译步骤.
image.png
现在我们的编译步骤已经完成, 接下来就是在actions的addComponentAction的函数中, 然后我们进行测试, 代码如下.
image.png
image.png
可以看到, 我们的ejs模版编译结果是正确的
五. 写文件
const writeToFile = (path, content) => {
return fs.promises.writeFile(path, content);
};
image.png
六. 发布到npm
在npm(https://www.npmjs.com/)上注册个账号, 然后在命令行npm login登录一下, 然后直接npm publish就行了.
image.png
七. 后续
其他的添加store, 添加page的命令也是相似的, 具体代码可以参考笔者的github, 欢迎交流