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

开发一个简易版脚手架

• 将脚手架命名为: xyzcli, 这个名称比较随意，截止在目前，我看到npm上没有这个包，尽量避免重名
• 初始化
  • $ mkdir xyzcli
  • $ cd xyzcli
  • $ npm init -y
• 新建 bin/index.js

  #!/usr/bin/env node
  
  console.log('xyzcli')
  

• 回到 package.json 中配置

  {
       
    "bin": {
       
      "xyzcli": "bin/index.js"
    }
  }
  

• 发布到 npm
  • $ npm login
  • $ npm publish
• 去 npm 网站，我的 packages 下去查看

验证刚刚发布的包

• 安装 $ npm i -g xyzcli
• 执行 $ xyzcli
  • 可看到输出 xyzcli
• 这个命令的原理就是创建一个软链，之前也讨论过:
  • https://blog.csdn.net/Tyro_java/article/details/136072481
• 通过 $ which xyzcli 可看到 命令所在的路径
• 通过 $ ll 该路径 可看到当前 xyzcli 已经被安装到了 /…/xx/node_modules下了
• 这个 node_moudles 就是我们最顶层的node_modules, 也就是全局安装的 node_modules
• cd 到该 node_modules 下，执行 $ ll
• 可以看到有一个 xyzcli 软链到我们本地项目的 xyzcli 目录下
  • 创建软链的原因，是本地已经有这个代码，它会自动创建这个软链，即使把本地代码删除，也没有问题
  • 因为本地代码已经被发布到 npm 上了
• 这里的软链指向本地的代码仓库
  • 如果在当前目录下存在一个与安装的cli相同的目录
  • 就会把这个目录作为一个软链直接链过去
  • npm 这样做的方式，提供了一种非常智能化的功能，方便对我们当前开发的脚手架进行一个本地的开发调试
  • 此时，如果我们直接改动本地脚手架项目的代码，是会实时发生变更的，方便全局调试
• 如果不希望安装这种软链，而是安装远程的版本，则离开当前目录，找不到本地同名的脚手架项目目录即可
• 重新安装后，还到全局的 node_modules 里面就看到不是软链，而是一个实实在在的目录了