我们熟知的
vue-cli
,create-react-app
都是前端圈最知名、最流行、最大众化的脚手架工具,但是我们公司内部开发时一般会对其再封装一些自己的库或者组件等,生成自己的脚手架工具,但大多搭建脚手架的文章都比较复杂,很多时候我们想要就是通过简单的命令能够比较方便的下载到我们的脚手架代码。
一、生成脚手架代码模板,并放到github
在这里我封装了两个脚手架代码模板:
- 基于
vue-cli
,封装自己的业务代码及组件等 - 基于
create-react-app
,封装自己的业务代码及组件等 - 并把他们上传到
github
上,到时候我们用脚手架工具命令其实就是从github
下载
二、来制作脚手架工具
- 生成一个项目:
jkc-cli
- 并在项目内执行:
复制代码
1
2npm init -y
生成package.json
文件
- 安装我们需要的模块
commander
,download-git-repo
。
commander
: tj
大神开发的可以对命令行做解析的库,可以解析我们在命令行输入的如jkc-cli -v
或jkc-cli init <projectName>
等命令
download-git-repo
: 下载git
仓库代码的库。
复制代码
1
2npm i commander download-git-repo
- 在项目根目录创建
index.js
文件,写入相应的处理逻辑
index.js
:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25#! /usr/bin/env node const program = require('commander'); const download = require('download-git-repo'); //version 版本号 //name 新项目名称 program.version('1.0.0', '-v, --version') .command('init <templateName> <projectName>') .action((templateName, projectName) => { if (templateName === "vue") { console.log('clone template ...'); download('github:junkaicool/jkc-cli-vue-src', projectName, function (err) { console.log(err ? 'Error' : 'Success') }) } else if(templateName === "react") { console.log('clone template ...'); download('github:junkaicool/jkc-cli-react-src', projectName, function (err) { console.log(err ? 'Error' : 'Success') }) } else { console.error('A template name that does not exist') } }); program.parse(process.argv);
#! /usr/bin/env node
是执行这个文件时使用node
方式执行program.version
是解析别人输入jkc-cli -v
时输出的内容:1.0.0
command
解析输入jkc-cli init vue my-vue-project
,init
后面两个参数,一个模板名,一个项目名action
是根据上面的两个参数做相应的逻辑处理,判断模板名,去相应的git
仓库下载代码。download
的第一个参数下载地址不是填我们git
的网址,按照我的格式填就行,第二个参数是生成的项目名,第三个参数是错误的回调执行函数。
- 在
package.json
文件中加入,这一步是我们在命令行jkc-cli
的时候执行的文件。
复制代码
1
2
3
4
5
6.... "bin": { "jkc-cli": "index.js" }, ....
三、把脚手架工具上传到npm
首先你得有一个npm
账号,没有的去https://www.npmjs.com/
注册一个,邮箱验证一下。
然后到我们的脚手架目录
复制代码
1
2npm login
登陆我们的npm
账号
复制代码
1
2npm publish
发布我们的脚手架工具到npm
四、测试我们的脚手架工具
复制代码
1
2npm i jkc-cli -g
全局安装脚手架工具
复制代码
1
2jkc-cli -v
生成vue
项目
复制代码
1
2jkc-cli init vue my-vue-project
或者生成react
项目
复制代码
1
2jkc-cli init react my-react-project
到此,我们前端搭建自己的脚手架就完成了,如果有什么不懂的小伙伴,可以留言哦!
最后
以上就是飞快太阳最近收集整理的关于前端搭建自己的脚手架(cli),实现公司内部前端工程化的全部内容,更多相关前端搭建自己内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复