前端搭建自己的脚手架(cli)，实现公司内部前端工程化

我们熟知的vue-cli，create-react-app都是前端圈最知名、最流行、最大众化的脚手架工具，但是我们公司内部开发时一般会对其再封装一些自己的库或者组件等，生成自己的脚手架工具，但大多搭建脚手架的文章都比较复杂，很多时候我们想要就是通过简单的命令能够比较方便的下载到我们的脚手架代码。

一、生成脚手架代码模板，并放到github

在这里我封装了两个脚手架代码模板：

1. 基于vue-cli，封装自己的业务代码及组件等
2. 基于create-react-app，封装自己的业务代码及组件等
3. 并把他们上传到github上，到时候我们用脚手架工具命令其实就是从github下载

二、来制作脚手架工具

1. 生成一个项目: jkc-cli

2. 并在项目内执行：

npm init -y

生成package.json文件

3. 安装我们需要的模块commander，download-git-repo。

commander: tj大神开发的可以对命令行做解析的库，可以解析我们在命令行输入的如jkc-cli -v或jkc-cli init <projectName>等命令

download-git-repo: 下载git仓库代码的库。

npm i commander download-git-repo

4. 在项目根目录创建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);

• #! /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的网址，按照我的格式填就行，第二个参数是生成的项目名，第三个参数是错误的回调执行函数。

5. 在package.json文件中加入，这一步是我们在命令行jkc-cli的时候执行的文件。

....
 "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

到此，我们前端搭建自己的脚手架就完成了，如果有什么不懂的小伙伴，可以留言哦！

最后

以上就是飞快太阳最近收集整理的关于前端搭建自己的脚手架(cli)，实现公司内部前端工程化的全部内容，更多相关前端搭建自己内容请搜索靠谱客的其他文章。