脚手架(CLI)基本概念以及开发流程

简介

脚手架CLI(Command-Line Interface)是一种命令行工具,用于自动化创建、构建和部署项目。它通常被使用在Web开发、移动应用开发以及其他软件开发领域。

通过CLI可以快速生成项目模板,安装依赖、管理插件、构建打包等操作。脚手架CLI提供了一些预设的命令和选项,使得开发者可以快速创建和部署项目,同时可以根据自己的需求进行自定义配置和扩展。使用脚手架CLI可以帮助开发者加速项目开发的过程,并且可以提高工作效率,减少开发面临的困难。

总之,脚手架CLI是一种强大的命令行工具,它能提高程序员的工作效率,使得开发更加快速、高效和自动化。另外还有一种叫GUI的图形用户界面(Graphical User Interface),GUI使用图形元素代替了文本命令,平时使用的SourceTree就是GUI。

在另外一篇文章中简单介绍了 使用Commander开发脚手架

目录结构

  • bin:包含可执行脚本的目录,用于处理用户在命令行中要运行的命令。
  • lib:包含与应用程序的功能相关的模块或文件,每个模块对应一个命令。例如,对于名为 commandA 的命令,目录包含一个名为 commandA.js 的处理程序文件。
  • src:包含应用程序的源代码。该目录一般包含所有未打包、未编译的 JavaScript、CSS 和 HTML 文件等。
  • test:包含针对应用程序的测试文件和代码。
  • docs:包含应用程序的文档和帮助文件。
  • package.json:Node.js 程序的配置文件,其中包含应用程序的所有依赖项。

脚手架开发初体验

  1. 新建liam-cli文件夹,执行npm init -y生成package.json配置文件
  2. package.json文件中配置bin(命令名到本地文件名的映射)参数,liam-cli就是命令名,后面就是通过liam-cli 使用脚手架
{
  "name": "liam-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "liam-cli": "bin/index.js" // 配置文件映射
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3.在根目录下创建bin文件夹,文件夹下新建index.js
在js文件第一行输入#!/usr/bin/env nodeenv命令将查找当前环境的“node”可执行文件,然后使用nodejs解析执行当前文件。
然后尝试打印一些信息

#!/usr/bin/env node

console.log('welcome to liam-cli')

此时的目录结构

liam-cli
├── bin/
│   └── index.js
├── package.json

到这里已经开发好一个最简单的脚手架,下面开始发布到npm上。

发布脚手架

  1. 打开命令行进入到脚手架项目
  2. 登录npm:npm login,输入npm的账户名、密码、邮箱
  3. 发布到npm:npm publish,执行成功后就已经发布到npm上了
  4. npm install 将脚手架安装下来,命令行执行liam-cli成功打印出’welcome to liam-cli’
    在这里插入图片描述

本地调试脚手架

开发脚手架时需要不断的调试和修复,频繁发版不是一个好的选择,因此需要选择本地调试

  1. 打开命令行进入到脚手架项目,执行npm link会将当前脚手架项目生成链接挂载到全局(注意需要先uninstall这个脚手架包)
  2. 修改index.js中的打印信息,然后执行liam-cli,发现修改生效了
  3. 开发完成后执行npm unlink
    脚手架(CLI)基本概念以及开发流程_第1张图片
    脚手架一般会进行分包,例如会创建一个lib项目存放功能相关的库文件,脚手架项目再引入lib的文件使用,此时应先在lib项目中执行npm link,然后再到脚手架项目中执行npm link liam-cli-lib(lib项目名),脚手架中就能引入lib项目进行本地调试开发

写在最后

本文简单介绍了脚手架的概念,以及开发、调试脚手架的步骤,关于脚手架的注册命令参数解析,以及commander、yargs等开发脚手架的框架,将在其他篇章介绍

你可能感兴趣的:(脚手架CLI,javascript,前端)