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

开发一个简易版脚手架

  • 将脚手架命名为: 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 里面就看到不是软链,而是一个实实在在的目录了
相关推荐
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727571 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记2 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼3 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo3 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式