前端 搭建一个简单的脚手架

本文介绍如何搭建并发布自己的npm脚手架项目。包括注册npm账号、准备模板项目、配置package.json、创建cli.js及command文件等步骤,并指导如何发布到npm及使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

搭建一个自己的脚手架

准备工作

  • 注册一个npm账号
  • 准备脚手架模板项目(可以挂在在github 或 自己的git服务器上面)

开始

  • 创建一个空文件夹
  • 执行
npm init -y

2 修改package.json中文件

{
  "name": "with-cli",
  "version": "1.2.0",
  "description": "",
  "license": "ISC",
  ...
  "main":"index.js",//  删除
  "scripts": {}, 	//  删除
  "url": "https://github.com/xxxxxx.git", // 添加  自己的项目克隆地址,好管理
  "bin": { 							  // 添加
    "with-cli": "bin/cli.js"
  },
  ...
}

新建 bin/cli.js
为了好管理 这个是统一处理文件,定制化需求代码都按照后面的 create 文件 参照即可

 #!/usr/bin/env node

const { Command } = require("commander");
const { name, version } = require("../package.json");
const commands = require("../command/index.js");
const program = new Command();

program.name(name).version(version);

// 创建命令
Reflect.ownKeys(commands).map((name) => {
  const { params, alias, action, description } = commands[name] || {};
  program
    .command(`${name} ${params || ""}`)
    .alias(alias)
    .description(description)
    .action((...args) => {
      typeof action === "function" && action(...args);
    });
});

program.parse(process.argv);

创建 command/create.js

// create.js
const { exec } = require("child_process");
const { url } = require("../package.json"); // 这是模板项目的仓库地址

function createAction(name) {
  // 克隆项目
  exec(`git clone ${url} ${name}`, (error, stdout, stderr) => {
    if (error) {
      console.log(error);
      process.exit();
    }
    console.log("Success");
    process.exit();
  });
}
const create = {
  alias: "c",
  params: "<project-name>",
  description: "create a new project",
  action: createAction,
};

module.exports = create;

创建 command/index.js 统一导出

// index.js
const create = require("./create.js");
 
module.exports = {
  create, 
};

发布到 npm

npm login   // 按提示完成登录 
npm publish   // 发布

安装并使用

npm i with-cli -g  // 全局安装刚刚发布的脚手架
with-cli -V   // 查看版本   
with-cli create hello-world   // 执行 create

FAQ

  • 发布时注意重名问题,建议先在npm中搜索看是否已有同名
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值