javascript - 类似vue-cli,express-generator之类的脚手架工具是怎么做出来的?
阿神
阿神 2017-04-11 11:56:15
[JavaScript讨论组]

在使用vue-cliexpress-generator的时候,非常好奇它们到底是如何制作并运行的。google了好久都是一堆基于yobowergrunt的方案,但显然vue-cli之类的并非采用这套方案。
所以产生了下面几个问题,希望能够得到各位的解答:

  1. 假设我的脚手架工具名为my-cli,在终端输入my-cli以后会自动为我生成文件目录,应该掌握什么知识?

  2. 如何把my-cli变成一个可以全局安装的包,并且能够在终端直接输入my-cli就生效呢?

问题可能有点小白,但真的是我非常想知道的东西,还请赐教,谢谢!

阿神
阿神

闭关修行中......

全部回复(3)
高洛峰

1.

想一想你在执行 vue init webpack my-project 时,界面显示了什么东西。好像是先显示下载进度,然后输入一些 package.json 中的项目属性吧。那么他的实现就呼之欲出了,就是下载远程仓库的模版项目,然后替换模版项目中的一些字段。
在 vue-webpack-tempate 中可以看到 README 和 package.json 中的模版占位符。

2.

npm 就是干这个的啊。

package.json

{
  "name": "my-cli",
  "bin": {
    "mycli": "index.js"
  }
}

index.js

console.log('my-cli start!')

执行 npm link 后,你将得到一个全局的 mycli 命令。

  • Node.js 命令行程序开发教程

PHP中文网

所有包都可以全局安装,只用安装的时候用-g参数就行了。

点在于可执行文件,一般是放在node_modules/.bin/下,全局的这个文件夹是在PATH中的,所以可以直接运行。

可执行文件

所以,首先得知道怎么创建那个可执行文件。

"bin": {
    "eslint": "./bin/eslint.js"
  },

这样子创建一个软连接,从node_modules/.bin/eslintnode_modules/eslint/bin/eslint.js

处理输入的参数

tj大神的commander
https://github.com/tj/command...

操作文件夹和文件

https://npm.taobao.org/mirror...

执行shell命令

https://npm.taobao.org/mirror...

更完整的教程

其实推荐看vue-cli,eslint等比较简单业务的源码。

伊谢尔伦

commander 和 download-git-repo

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号