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

最新推荐文章于 2024-07-07 13:28:04 发布

原创最新推荐文章于 2024-07-07 13:28:04 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

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

搭建一个自己的脚手架

准备工作

注册一个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中搜索看是否已有同名