前端从零到一搭建脚手架并发布到npm

这里写自定义目录标题

  • 一、为什么需要脚手架？
  • 二、前置-第三方工具的使用
    • 1. 创建demo并运行-4步
      • 新建文件夹 zyfcli，并初始化npm init -y
      • 配置入口文件
    • 2.commander-命令行指令
    • 3. chalk-命令行美化工具
    • 4. inquirer-命令行交互工具
    • 5. figlet-艺术字
    • 6. ora-loading工具
    • 7. npm link 本地调试npm包的神器
    • 8. 小demo的完整代码
  • 三、正式版走起
    • 1. 处理bin的index文件
    • 2.处理create.js
    • 3. 添加utils工具函数
    • 4. 查看效果
  • 四、发布到npm
  • 五、参考文章
  • 六、源码仓库地址
  • 七、踩过的坑
  • 其他

在这里插入图片描述

好多前端童鞋工作多年依然不会搭建脚手架，本文就介绍下如何从零开始搭建一个属于你自己的前端脚手架，提高自己的工程化实力，同时也提高团队的开发效率。

先看下github的dipper-cli仓库和npm上的成果：
在这里插入图片描述
在这里插入图片描述
欢迎大家到github上点赞，项目已开源，欢迎大家加入。大家可以加我微信哈 zyfts1，一块讨论前端发展。

好了，下面开始开发您的第一个前端脚手架吧

一、为什么需要脚手架？

  1. 减少重复性的工作，不再从零创建一个项目，或者复制粘贴另一个项目的代码 。
  2. 根据动态交互生成项目结构和配置文件，具备更高的灵活性和人性化定制的能力 。
  3. 有利于多人开发协作，避免了人工传递文件的繁琐。
  4. 可以集成多套开发模板，根据项目需要选择合适的模板。
    在这里插入图片描述

二、前置-第三方工具的使用

实现一个脚手架，通常需要以下工具

  1. commander: 命令行工具
  2. chalk: chalk是一个颜色的插件。可以通过chalk.green(‘success’)来改变颜色。修改控制台输出内容样式
  3. inquirer: 用于命令行交互问询等
  4. download-git-repo: 来通过git下载项目模板的插件
  5. figlet: 生成好看的艺术字，增加终端美观度
  6. ora: 用于实现node命令环境的loading效果，并显示各种状态的图标,显示 loading 动画
  7. npm link: 本地调试npm包的神器。

**注意：**插件的版本。

为了演示先创建一个小项目

1. 创建demo并运行-4步

新建文件夹 zyfcli，并初始化npm init -y

装包-注意版本

pnpm i commander@9.5.0 chalk@4.0.0 inquirer@8.2.1 ora@4.0.0 figlet download-git-repo  ora

注意：版本过高会报错，已踩坑…
在这里插入图片描述

配置入口文件

在根目录下新建bin/index.js【整个脚手架的入口文件】

#! /usr/bin/env node
console.log('hello world')

验证结果：在命令行中输入node ./bin/index.js,如果能打印出hello即成功

将入口文件配置到package.json 的bin字段

{
  "name": "zyfcli",
  "bin": "bin/index.js",  
}
// 写法2，注意bin里key，需要和nage保持一致
{
  "name": "zyfcli",
  "bin": {
    "zyfcli": "bin/www"
  }
}

npm link将命令挂载到全局
执行 npm link将命令挂载到全局，然后再输入 zyfcli 就可以到达刚才node ./bin/index.js 的效果了

2.commander-命令行指令

引入commander

const program = require("commander");

program.name('zyfcli').usage(`<command>[option]`).version(`1.0.0`)
// 解析用户执行命令传入参数
program.parse(process.argv);

在命令行输入commander --help，即可看到简单的效果
在这里插入图片描述

3. chalk-命令行美化工具

#! /usr/bin/env node
const program = require("commander");
const chalk = require('chalk')

program.name('zyfcli').usage(`<command>[option]`).version(`1.0.0`)

// 解析用户执行命令传入参数
program.parse(process.argv);

// 演示美化工具
console.log(`${chalk.green("hello")} zyf`);

输入 zyfcli，看hello显示颜色
在这里插入图片描述
其他用法

console.log(`${chalk
               .green  --颜色
               .bold   --加粗
               .underline  --下划线
               ("hello")} zyf`);

4. inquirer-命令行交互工具

const Inquirer = require('inquirer');

// 命令行交互
new Inquirer.prompt([
  {
    name: 'zyfcli',
    type: "checkbox",
    message: "Check the features needed for your project",
    choices: [
      {
        name: 'Babel',
        checked: 'true',
      },
      {
        name: 'TypeScript',
      }
    ]
  }
]).then((data) => {
  console.log(data);
})

在这里插入图片描述

5. figlet-艺术字

  1. 安装 npm i figlet
  2. 使用
const figlet = require('figlet')

figlet.textSync("dipper-cli", {
      font: "3D-ASCII",
      horizontalLayout: "default",
      verticalLayout: "default",
      whitespaceBreak: true,
    })
  1. 效果 在这里插入图片描述

6. ora-loading工具

注意版本

  1. 使用
const ora = require('ora');
const spinner = ora('Loading unicorns').start();

setTimeout(() => {
  // spinner.color = 'yellow';
  spinner.text = 'Loading rainbows';
  spinner.succeed()
  // spinner.stop()
}, 1000);

效果
在这里插入图片描述

7. npm link 本地调试npm包的神器

npm link：可以在本地调试我们正在开发的脚手架或组件库的神器，不用费事的发布到npm后再调试。

详细的用法教程很多，就不赘述了，没用过的小伙伴可以参考这篇文章，下面介绍一下常用方法 ：

  1. 创建: npm link，软后就可在本地调试了
  2. 查看所有的软连接： npm ls -g
  3. 取消软连：npm unlink
  4. 卸载npm包：npm uninstall -g 简写 npm un -g <name>

还有个实用的命令：
npm ls -g : 可以查看全局安装的npm包，

在这里插入图片描述
例如：如上图所指，即为我们本地包，其他的是npm包，如果要从全局删除需要用npm un -g <name>指令。

8. 小demo的完整代码

#! /usr/bin/env node
// 演示工具的使用
const program = require("commander");
const chalk = require('chalk');
const Inquirer = require('inquirer');
const figlet = require('figlet')
const ora = require('ora');


program.name('zyfcli').usage(`<command>[option]`).version(`1.0.0`)

// 演示美化工具
console.log(`${chalk.green.bold.underline("hello")} zyf`);

// 命令行交互
// new Inquirer.prompt([
//   {
//     name: 'zyfcli',
//     type: "checkbox",
//     message: "Check the features needed for your project",
//     choices: [
//       {
//         name: 'Babel',
//         checked: 'true',
//       },
//       {
//         name: 'TypeScript',
//       }
//     ]
//   }
// ]).then((data) => {
//   console.log(data);
// })

// 艺术字
console.log(figlet.textSync('Hello Word'));

// loading
const spinner = ora('Loading unicorns').start();

setTimeout(() => {
  // spinner.color = 'yellow';
  spinner.text = 'Loading rainbows';
  // spinner.succeed()
  // spinner.stop()
}, 1000);

// 解析用户执行命令传入参数
program.parse(process.argv);

三、正式版走起

先看下目录结构
在这里插入图片描述

1. 处理bin的index文件

#! /usr/bin/env node
const program = require("commander");
const chalk = require("chalk");
const figlet = require("figlet");

program
  .name("zyfcli")
  .usage(`zyfcli <command> [option]`)
  .version(`zyfcli ${require("../package.json").version}`);


program
  .command("create <project-name>") // 增加创建指令
  .description("create a new project") // 添加描述信息
  .option("-f, --force", "overwrite target directory if it exists") // 强制覆盖
  .action((projectName, cmd) => {
    // 处理用户输入create 指令附加的参数
    require("../lib/create")(projectName, cmd);
  });

program
  .command("config [value]")
  .description("inspect and modify the config")
  .option("-g, --get <key>", "get value by key")
  .option("-s, --set <key> <value>", "set option[key] is value")
  .option("-d, --delete <key>", "delete option by key")
  .action((value, keys) => {
    console.log(value, keys);
  });

program.on("--help", function () {
  console.log(
    "\r\n" +
    figlet.textSync("zyf-cli", {
      font: "3D-ASCII",
      horizontalLayout: "default",
      verticalLayout: "default",
      width: 80,
      whitespaceBreak: true,
    })
  );
  // 前后两个空行调整格式，更舒适
  console.log();
  console.log(
    `Run ${chalk.cyan(
      "zyfcli <command> --help"
    )} for detailed usage of given command.`
  );
  console.log();
});


program.parse(process.argv);

create.js先不写东西

看下效果
在这里插入图片描述

2.处理create.js

路径：根目录/lib/create.js

const path = require("path");
const fs = require("fs-extra");
const Inquirer = require("inquirer");
const downloadGitRepo = require("download-git-repo");
const chalk = require("chalk");
const util = require("util");
const { loading } = require("./util");

module.exports = async function (projectName, options) {
  // 获取当前工作目录
  const cwd = process.cwd();
  const targetDirectory = path.join(cwd, projectName);

  // 处理文件夹
  await handleFolder(projectName, options, targetDirectory);

  // 1.选择模版
  const { template } = await new Inquirer.prompt([
    {
      name: "template",
      type: "list",
      message: "Please choose a template to create project",
      choices: [
        { name: 'react', value: 'zyf118725/reactTs' },
        { name: 'vue', value: 'https://vue仓库' }, // 演示
        { name: 'angular', value: 'https://angular仓库' },
      ],
    },
  ]);

  // 2.下载
  await download(template, targetDirectory);

  // 3.模板使用提示
  console.log(`\r\nSuccessfully created project ${chalk.cyan(projectName)}`);
  console.log(`\r\n  cd ${chalk.cyan(projectName)}`);
  console.log("  npm install");
  // console.log("  npm run serve\r\n");
};

// 处理文件夹创建重名问题
async function handleFolder(projectName, options, targetDirectory) {
  if (fs.existsSync(targetDirectory)) {
    if (options.force) {
      // 删除重名目录
      await fs.remove(targetDirectory);
    } else {
      let { isOverwrite } = await new Inquirer.prompt([
        {
          name: "isOverwrite", // 与返回值对应
          type: "list", // list 类型
          message: "Target directory exists, Please choose an action",
          choices: [
            { name: "Overwrite", value: true },
            { name: "Cancel", value: false },
          ],
        },
      ]);
      if (!isOverwrite) {
        console.log("Cancel");
        return;
      } else {
        await loading(
          `Removing ${projectName}, please wait a minute`,
          fs.remove,
          targetDirectory
        );
      }
    }
  }
}

// 下载git仓库
async function download(templateUrl, targetDirectory) {
  const downloadGitRepoPromise = util.promisify(downloadGitRepo);
  await loading(
    "downloading template, please wait",
    downloadGitRepoPromise,
    templateUrl,
    targetDirectory // 项目创建位置
  );
}

3. 添加utils工具函数

封装axios等函数。

const ora = require("ora");

/**
 * 睡觉函数
 * @param {Number} n 睡眠时间
 */
function sleep(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, n);
  });
}

/**
 * loading加载效果
 * @param {String} message 加载信息
 * @param {Function} fn 加载函数
 * @param {List} args fn 函数执行的参数
 * @returns 异步调用返回值
 */
async function loading(message, fn, ...args) {
  const spinner = ora(message);
  spinner.start(); // 开启加载
  try {
    let executeRes = await fn(...args);
    spinner.succeed();
    return executeRes;
  } catch (error) {
    spinner.fail("request fail, reTrying");
    await sleep(1000);
    return loading(message, fn, ...args);
  }
}

module.exports = { loading };

4. 查看效果

创建一个democli项目

在这里插入图片描述
在这里插入图片描述

四、发布到npm

npm包的发布比较简单，就不在赘述了，没整过的小伙伴可以查下教程

  1. npm login
  2. npm publish

在这里插入图片描述
额，名字太简单了改下名字，就叫北斗cli吧 dipper-cli
修改下package继续发包，注意package的name和bin中的名称。
小技巧，大家可以先到npm.com中输入名字看下有没有相似的名字。

在这里插入图片描述

发布成功
在这里插入图片描述

五、参考文章

  1. https://blog.csdn.net/gao_xu_520/article/details/120505635
  2. 掘金-工具详解：https://juejin.cn/post/7077717940941881358
  3. commander中文文档(github):https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md

六、源码仓库地址

  1. dipper-cli: https://github.com/zyf118725/dipper-cli
  2. react模版-还在丰富中: https://github.com/zyf118725/reactTs
  3. 未来其他的模版也一并放在这个仓库。

七、踩过的坑

在这里插入图片描述

1.注意npm包的版本。
万年大坑，好多同学跟着博客一路敲代码，结果一启动就报错，简直怀疑人生。
注意，这可能就是依赖包版本的问题。比如commander 最新版用的是es模块化方式，而大多数博客上用的的v9.0版本，博主也没注意提醒版本问题，结果就是一启动就报错。

2.npm包名导致的npm发包失败问题
如果npm包的名称有重复或者类似，注意名字类似也会提交失败。

一个小妙招，大家起名字前可以先到 https://www.npmjs.com/ 网站上搜索下有没有类似的名称，省的后续再改名。
在这里插入图片描述

下班码字不易，如果喜欢请点赞关注，谢谢
在这里插入图片描述

其他

2024.4.16 号，进入热榜21，记录一下😄
在这里插入图片描述

感谢CSDN官方的推荐，粉丝量一下涨了好几十 😄，未来将持续产出高质量的文章，将枯燥的知识写的有趣生动。再远一点试试能否在退休之前写本书 🤠。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/559175.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Oracle数据库的简单使用

Oracle数据库的简单使用

Oracle简单使用 一、数据库的介绍二、Oracle介绍账号管理Oracle的安装Oracle服务的作用OracleRemExecService服务创建数据库 常用命令 三、SQL语言SQL分类实用的数据表添加注释数据操纵语言&#xff08;DML&#xff09;查询语句&#xff08;SELECT&#xff09;wherelikedistinc…
阅读更多...
ShardingSphere：强大的分布式数据库中间件【图文】

ShardingSphere：强大的分布式数据库中间件【图文】

ShardingSphere的诞生 ShardingSphere的结构 Sharding-JDBC :它提供了一个轻量级的 Java 框架&#xff0c;在 Java 的 JDBC 层提供额外的服务。使用客户端直连数据库&#xff0c;以 jar 包形式提供服务&#xff0c;无需额外部署和依赖&#xff0c;可理解为增强版的 JDBC 驱动&…
阅读更多...
如何使用 Cloudflare 和 Mailgun 设置自定义电子邮件

如何使用 Cloudflare 和 Mailgun 设置自定义电子邮件

作为一名软件工程师&#xff0c;您可能考虑拥有一个专业的电子邮件账户&#xff0c;以及自己的网站&#xff0c;比如 “infoexample.com”. 但这可能会花费一定金额&#xff0c;您可能不愿意支付。 但您知道您可以免费做到吗&#xff1f;事实上&#xff0c;有一种方法可以做到…
阅读更多...
error解决expression before ‘static‘

error解决expression before ‘static‘

问题现象 报警如下 跳转到提示第125行&#xff0c;但是这行明显是没有问题的。 问题分析 经过排查可以看到&#xff0c;是120行的末尾\在S32DS编译器里面被认为是“接下一行”的意思&#xff0c;120行注释掉之后&#xff0c;后面的121行、122行、123行均被注释掉&#xff0c;…
阅读更多...
得物sign参数逆向分析与Python算法还原

得物sign参数逆向分析与Python算法还原

文章目录 1. 写在前面2. 接口分析3. 断点分析4. Python算法还原 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚…
阅读更多...
bp神经网络拟合函数未知参数【源码+视频教程】

bp神经网络拟合函数未知参数【源码+视频教程】

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法&#xff0c;并提供所有案例完整源码&#xff1b;2.…
阅读更多...
Linux 操作系统非缓冲区的文件操作、时间编程

Linux 操作系统非缓冲区的文件操作、时间编程

1、文件操作 1.1 基于缓冲区的文件操作 基于缓冲区的文件操作---高级Io 以f开头的是基于缓冲区的文件操作 printf是一个基于缓冲区的函数 输出条件&#xff1a; 1.程序正常运行 2.遇到换行\n也能输出 3.缓存区内存已满 1024大小 4.遇到fflush&#xff08;stdout&a…
阅读更多...
Ansible-变量-迭代-jinja2模版

Ansible-变量-迭代-jinja2模版

变量&#xff1a; 在ansible中&#xff0c;变量是用来存储和传递数据的容器。 这些变量可以包含各种类型的数据&#xff0c;列如数字、字符串、列表、字典。 可以增加ansible playbook的灵活性和重用性变量的使用&#xff1a; 声明&#xff1a;变量名值 引用&#xff1a;{{ 变量…
阅读更多...
详细分析Java中的AuthRequest类（附Demo）

详细分析Java中的AuthRequest类（附Demo）

目录 前言1. 基本知识2. Demo3. 实战 前言 公共接口&#xff0c;定义了对第三方平台进行授权、登录、撤销授权和刷新 token 的操作 1. 基本知识 先看源码基本API接口&#xff1a; import me.zhyd.oauth.enums.AuthResponseStatus; import me.zhyd.oauth.exception.AuthExce…
阅读更多...
提升测试效率，专业方案揭秘

提升测试效率，专业方案揭秘

提升测试效率是软件开发中一个永恒的主题&#xff0c;它不仅关乎项目能否按期完成&#xff0c;更影响着软件产品的质量与用户体验。随着敏捷开发、持续集成等方法论的普及&#xff0c;如何在有限的时间内进行高效、全面的测试成为了开发者和测试人员面临的挑战。 在传统模式中&…
阅读更多...
Windows 平台上面管理服务器程式的高级 QoS 策略

Windows 平台上面管理服务器程式的高级 QoS 策略

在 Windows 平台上面&#xff0c;目前有两个办法来调整应用程式的 QoS 策略设置&#xff0c;一种是通过程式设置&#xff0c;一种是通过 “Windows 组策略控制”。 在阅读本文之前&#xff0c;您需要先查阅本人以下的几篇文献&#xff0c;作为前情提示&#xff1a; VC Windows…
阅读更多...
数据质量与策略：解锁生成式AI潜力的关键步骤

数据质量与策略：解锁生成式AI潜力的关键步骤

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
每日一题(L2-011):玩转二叉树--建树+层序遍历

每日一题(L2-011):玩转二叉树--建树+层序遍历

与L2-006近乎相同&#xff0c;先建树&#xff0c;然后遍历 #include<bits/stdc.h> using namespace std; int in[35]; int pre[35]; typedef struct Tree{int num;Tree* left;Tree* right; }T;T * build(int in1,int in2,int pre1,int pre2){T * tnew T;t->numpre[pr…
阅读更多...
战姬物语部署

战姬物语部署

一.准备环境 #关闭seliunx和防火墙 setenforce 0 systemctl stop firewalld systemctl disable firewalld #配置源&#xff0c;并安装常用工 curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo curl -o /etc/yum.repos.d/epel.repo …
阅读更多...
Leetcode 86. 分隔链表

Leetcode 86. 分隔链表

题目链接&#xff1a; 86. 分隔链表 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/partition-list/description/ 题目&#xff1a; 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出…
阅读更多...
深入探究图像增强（C语言实现）

深入探究图像增强（C语言实现）

我们将从基础出发使用C语言进行图像处理与分析&#xff0c;重点讨论图像增强和平滑技术。图像增强技术旨在通过增加对比度、亮度和整体清晰度来改善图像的视觉质量。另一方面&#xff0c;图像平滑方法则用于减少噪声并减少图像中的突变&#xff0c;使图像更加均匀和视觉上吸引人…
阅读更多...
利用二维码定位技术实现桌面机器人简易定位方案（上篇）

利用二维码定位技术实现桌面机器人简易定位方案（上篇）

目录 1、前言2、二维码的定位标签识别原理3、生成定位标签3、基于定位标签的物体识别与定位 1、前言 机械手臂尤其是工业场景下大部分的应用是在一个平面&#xff08;桌面&#xff09;内完成一些抓取工作。一般可以用示教方式完成重复步骤。但是示教方式&#xff0c;对于一些活…
阅读更多...
过氧化氢滴定方法可用的PFA器皿有哪些？

过氧化氢滴定方法可用的PFA器皿有哪些？

滴定液:KMnO4标准溶液 试液:H2O2商品液(3%)&#xff0c;H2SO4 (3.0mol/L ) 指示剂:酚酞指示剂 仪器:分析天平&#xff0c;PFA酸式滴定管50mL&#xff0c;PFA 移液管10mL/25mL、PFA 容量瓶250mL、PFA锥形瓶250mL 1、KMnO4标准溶液浓度的标定(见实验:高锰酸钾标准溶液的配制与…
阅读更多...
记一次普通的单表查询sql优化，去掉文件排序

记一次普通的单表查询sql优化，去掉文件排序

一现象&#xff1a; 有空观察了线上某个sql语句执行计划&#xff0c;发现在500多毫秒左右&#xff0c;打算进行下优化。 二步骤&#xff1a; 对查询列assessment_periodic_id、assessment_user_id、create_time添加了组合索引并指定了倒叙。加入create_time 使查询结果不需要在…
阅读更多...
阿里云OSS 存储对象的注册与使用

阿里云OSS 存储对象的注册与使用

目录 一、什么是阿里云OSS 二、 点击免费试用 2.1 选择第一个&#xff0c;点击免费试用 ​编辑 2.2 登录管理控制台 2.3 进入Bucket 2.4、在阿里云网站上的个人中心配置Accesskey,查询accessKeyId和accessKeySecret。 2.5、进入AccssKey管理页面应该会出现下图提示&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站