打造属于自己的脚手架工具并发布到npm仓库

admin2024-07-07  12

一、创建项目

  1. 使用 npm init -y 创建项目
  2. 创建项目入口文件 index.js
  3. package.json 中添加 bin 字段
  4. 使用 npm link 命令将文件映射至全局,使可以在本地测试 zp 命令
// "zp" 为用于全局执行脚手架的命令,vue-cli中使用的是vue命令
"bin": {
    "zp": "index.js",
},

打造属于自己的脚手架工具并发布到npm仓库,image.png,第1张

打造属于自己的脚手架工具并发布到npm仓库,image.png,第2张

打造属于自己的脚手架工具并发布到npm仓库,image.png,第3张

二、入口文件编码

index.js文件头部需要加上#!/usr/bin/env node(用于指定这个脚本的解释程序是node)

1.使用commander加上命令行参数
npm i commander
#!/usr/bin/env node
const { program } = require("commander");

program.version("0.1.0");

program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    console.log("创建项目:" + project);
  });

program
  .command("help")
  .description("查看所有可用的模板帮助")
  .action(function () {
    console.log(`这是关于项目帮助信息`);
  });

program.parse(process.argv);

打造属于自己的脚手架工具并发布到npm仓库,image.png,第4张

2.准备一个GitHub模板,使用download-git-repo下载模板
npm i download-git-repo
program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        console.log("下载失败");
      } else {
        console.log("下载成功");
      }
    });
  });
3.用ora增加下载中的loading效果
npm i ora@3.4.0
const ora = require("ora");
program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    // 下载前提示
    const spinner = ora("正在下载模板中").start();

    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        spinner.fail();
      } else {
        spinner.succeed();
      }
    });
  });
4.使用chalk 和 logSymbols增加文本样式
npm i chalk@2.4.2 log-symbols@4.0.0
const chalk = require("chalk");
const logSymbols = require("log-symbols");
program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    // 下载前提示
    const spinner = ora("正在下载模板中").start();

    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        spinner.fail();
        return console.log(
          logSymbols.error,
          chalk.red("下载失败,失败原因:" + err)
        );
      } else {
        spinner.succeed();
        return console.log(logSymbols.success, chalk.yellow("下载成功"));
      }
    });
  });

index.js文件完整代码为:

#!/usr/bin/env node
const { program } = require("commander");
const download = require("download-git-repo");
const ora = require("ora");
const chalk = require("chalk");
const logSymbols = require("log-symbols");

program.version("0.1.0");

program
  .command("create <project>")
  .description("初始化项目模板")
  .action(function (project) {
    // 下载前提示
    const spinner = ora("正在下载模板中").start();

    const downloadURL =
      "direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";

    download(downloadURL, project, { clone: true }, (err) => {
      if (err) {
        spinner.fail();
        return console.log(
          logSymbols.error,
          chalk.red("下载失败,失败原因:" + err)
        );
      } else {
        spinner.succeed();
        return console.log(logSymbols.success, chalk.yellow("下载成功"));
      }
    });
  });

program
  .command("help")
  .description("查看所有可用的模板帮助")
  .action(function () {
    console.log(`这是关于项目帮助信息`);
  });

program.parse(process.argv);

使用zp create 项目名即可下载项目模板代码创建项目

5.将项目发布至npm仓库
  1. 打开npm官网
  2. 注册一个npm账号
  3. 在npm中检索是否有重复的包名
  4. 将package.json中的name改为发布到npm上的包名
  5. 打开控制台,执行npm login
  6. 登陆成功后,在项目下执行npm publish 发布
  7. 发布成功后即可通过npm i命令下载

打造属于自己的脚手架工具并发布到npm仓库,image.png,第5张

打造属于自己的脚手架工具并发布到npm仓库,image.png,第6张

注意事项:因为网络问题可能导致download-git-repo插件下载时报128错误,可通过科学上网方式解决

写在最后:欢迎关注扫码作者微信公众号fever code,获取一手技术分享⛽️
打造属于自己的脚手架工具并发布到npm仓库,在这里插入图片描述,第7张

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!