前端脚手架模板cli搭建

最新推荐文章于 2025-02-26 21:59:33 发布

原创最新推荐文章于 2025-02-26 21:59:33 发布 · 572 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端效率开发专栏收录该内容

1 篇文章

订阅专栏

本教程详细讲解如何通过命令行下载个人在GitHub上搭建的React模板，并构建一个CLI NPM包进行管理。步骤包括创建React应用并上传到GitHub，初始化NPM包，安装必要的依赖，编写执行命令，发布到npm，并最终通过全局安装的包下载模板到本地。涉及关键技术如commander和download-git-repo。

前言

本教程主要聚焦于使用命令行下载自己搭建的模板，其中涉及到的具体细节不一一赘述，会给出参考链接，需要读者自行查阅相关文档，本教程分为三个步骤，分别是
1. 新建模板上传到git.
2. 构建cli NPM包
3. 下载自己上的模板到本地

1.建模板上传到git

我这里直接用的npx create-react-app my-app命令新建了一个react模板，上传到了自己的github仓库。

1.1 新建react应用

参考链接：https://react.docschina.org/docs/create-a-new-react-app.html

1.2 上传到自己的github上

参考链接 https://blog.csdn.net/loner_fang/article/details/80488385

2. 构建cli NPM包

2.1 新建npm包

npm init -y

2.2 安装npm依赖

此处我们使用的包主要有两个一个是命令行的包commander，一个是从git上下载文件的包

npm intsall commander download-git-repo

2.3 创建index文件

#! /usr/bin/env node
const program = require('commander');
const download = require('download-git-repo');
//version 版本号
//name 新项目名称
// 这个下载url格式时固定的 github:${git用户名}/${仓库名称}
const reactUrl = 'github:qinguoshuaiks/template';
program.version('1.0.0', '-v, --version')
    .command('init <templateName> <projectName>')
    .action((templateName, projectName) => {
 	if(templateName === "react") {
            console.log('clone template ...');
            console.log('reactUrl',reactUrl);
            download(reactUrl, projectName, function (err) {
                console.log(err ? 'Error' : 'Success')
            })
        } else {
          console.error('A template name that does not exist')
        }
    });
program.parse(process.argv);

2.4 在packjson里面添加执行命令

此处时我们以后下载时使用的命令 test-cli xxxx

  "bin": {
    "test-cli": "index.js"
  }

2.5 把当前的包发布到npm上

npm publish

如何构建发布一个npm包参考链接：https://www.jianshu.com/p/77c489928cf4

3. 执行命令

3.1 全局安装自己发布的npm包

npm install -g test-cli-by-qinguoshuai@1.0.4

3.2 下载模板到本地

test-cli init react test

本教程参考链接：https://blog.csdn.net/junkaicool/article/details/106123839