前端架构: 简易版脚手架开发

开发一个简易版脚手架

  • 将脚手架命名为: xyzcli, 这个名称比较随意,截止在目前,我看到npm上没有这个包,尽量避免重名

  • 初始化

    • $ mkdir xyzcli
    • $ cd xyzcli
    • $ npm init -y
  • 新建 bin/index.js

    js 复制代码
    #!/usr/bin/env node
    
    console.log('xyzcli')
  • 回到 package.json 中配置

    js 复制代码
    {
      "bin": {
        "xyzcli": "bin/index.js"
      }
    }
  • 发布到 npm

    • $ npm login
    • $ npm publish
  • 去 npm 网站,我的 packages 下去查看

验证刚刚发布的包

  • 安装 $ npm i -g xyzcli
  • 执行 $ xyzcli
    • 可看到输出 xyzcli
  • 这个命令的原理就是创建一个软链,之前也讨论过:
  • 通过 $ which xyzcli 可看到 命令所在的路径
  • 通过 $ ll 该路径 可看到当前 xyzcli 已经被安装到了 /.../xx/node_modules下了
  • 这个 node_moudles 就是我们最顶层的node_modules, 也就是全局安装的 node_modules
  • cd 到该 node_modules 下,执行 $ ll
  • 可以看到有一个 xyzcli 软链到我们本地项目的 xyzcli 目录下
    • 创建软链的原因,是本地已经有这个代码,它会自动创建这个软链,即使把本地代码删除,也没有问题
    • 因为本地代码已经被发布到 npm 上了
  • 这里的软链指向本地的代码仓库
    • 如果在当前目录下存在一个与安装的cli相同的目录
    • 就会把这个目录作为一个软链直接链过去
    • npm 这样做的方式,提供了一种非常智能化的功能,方便对我们当前开发的脚手架进行一个本地的开发调试
    • 此时,如果我们直接改动本地脚手架项目的代码,是会实时发生变更的,方便全局调试
  • 如果不希望安装这种软链,而是安装远程的版本,则离开当前目录,找不到本地同名的脚手架项目目录即可
  • 重新安装后,还到全局的 node_modules 里面就看到不是软链,而是一个实实在在的目录了
相关推荐
qq_390161774 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test34 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js