前端搭建自己的脚手架(cli)，实现公司内部前端工程化
发布时间
阅读量：
阅读量
我们广泛使用的vue-cli和create-react-app是前端开发中最受欢迎、普及率最高的常用脚手架工具。然而，在我们的公司内部开发过程中，默认情况下我们会根据实际需求对他们进行二次封装以创建属于自己的专属脚手架工具。尽管如此，在实际操作中发现很多教程或文章在搭建过程中较为繁琐且复杂度较高。“我们希望能够找到一种通过简单命令就能快速获取自己所需脚手架代码的方式。”
一、生成脚手架代码模板，并放到github
在这里我封装了两个脚手架代码模板：
- 以Vue CLI为基础，在项目管理中将业务逻辑和组件进行打包。
- 采用React Buildpack或Webpack等工具框架，在开发环境中实现对业务代码和组件的封装。
- 将这些打包后的项目上传至GitHub存储库中，在以后的操作中使用脚手架工具时的命令等价于从GitHub上下载相应的资源。
二、来制作脚手架工具
- 生成一个项目:
jkc-cli
- 并在项目内执行：
npm init -y生成package.json文件
- 安装我们需要的模块
commander，download-git-repo。
在GitHub上知名开发者`tj所编写的开源库中提供了对命令行的支持，并能处理我们输入的所有诸如jkc-cli -v或jkc-cli init
download-git-repo: 下载git仓库代码的库。
npm i commander download-git-repo- 在项目根目录创建
index.js文件，写入相应的处理逻辑
index.js:
#! /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);- 此脚本采用 Node.js 执行方式。
- program.version 是解析输入 "jkc-cli -v" 时输出的内容: "1.0.0"。
- command 是解析输入 "jkc-cli init vue my-vue-project" 后提取的后两个参数：一个为模板名、一个为项目名称。
- action 是根据上述两个参数进行逻辑处理：判断模板名并下载对应的 Git 仓库代码至项目目录；download 参数中第一个参数为获取代码的地址（需按照 Git 网站格式填写），第二个参数为生成的项目名称；第三个参数是用于错误处理的回调函数。
在`package.jsonfile中添加filename, 这一步是在命令行使用jkccli时执行的操作.
....
"bin": {
"jkc-cli": "index.js"
},
....三、把脚手架工具上传到npm
首先需要创建一个npm账号，请访问官网【https://www.npmjs.com/
然后到我们的脚手架目录
npm login登陆我们的npm账号
npm publish发布我们的脚手架工具到npm
四、测试我们的脚手架工具
npm i jkc-cli -g全局安装脚手架工具
jkc-cli -v
生成vue项目
jkc-cli init vue my-vue-project
或者生成react项目
jkc-cli init react my-react-project
到此为止，并未遇到任何阻碍
全部评论 (0)
还没有任何评论哟~