学习脚手架第二节：使用原生 Node.js 开发脚手架-CSDN博客

本文链接：https://blog.csdn.net/Varilly/article/details/140910300

使用原生 Node.js 开发脚手架

一、什么是脚手架以及脚手架原理
二、脚手架开发流程
- 流程概述
- 实操
三、使用脚手架
总结

一、什么是脚手架以及脚手架原理

参考学习脚手架第一节：从 vue-cli 探究脚手架原理

这里补充一下：

windows 系统可以用 git bash 执行 which vue 命令。
git bash 模拟 unix 命令行终端，不仅可以进行 git 版本管理，也可以执行 shell 脚本命令

二、脚手架开发流程

流程概述

创建 npm 项目
创建脚手架入口文件，最上方添加 #!/usr/bin/env node。表示用 node.js 执行
配置 package.json，添加 bin 属性。bin 属性用于定义可执行文件的路径，是命令名到本地文件名的映射
编写脚手架代码
发布到 npm

实操

这里我创建的脚手架名称设置为 view-test-cli

具体步骤：

打开 git bash，进入终端
新建文件夹 view-test-cli，进入目录 cd view-test-cli
执行 npm init -y：初始化 package.json 文件
添加 bin/index.js 文件

#!/usr/bin/env node

console.log("hello view-test-cli")

package.json 中加 bin 配置项

{
  "name": "view-cli",
  "version": "1.0.0",
  "description": "",
  "bin":{
    "view-test-cli": "bin/index.js"
  },
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

此时目录结构：

执行 npm login 登录 npm 用户（此处没有账号的可以去 npm官网注册一下）
执行 npm publish，发布成功会给你的邮箱发一封邮件

再去官网，点头像下拉框的 Packages，就可以看到自己刚刚发布的包啦在这里插入图片描述

坑：
自己练习的包名一定要去npm官网上查一下，不要重复，已经发布过的包，我们没有权限去发布 publish，会包 403 forbidden 的错误

三、使用脚手架

以上完成一个简单的脚手架开发，那么如何使用呢？

这就到了大家熟悉的环节
通过 npm install view-test-cli -g 全局安装脚手架，这里的 view-test-cli 换成你自己起的脚手架名称。
这样在全局就可以使用 view-test-cli 命令了
执行 view-test-cli
成功输出 hello view-test-cli

在这里插入图片描述

结合上面分享的脚手架原理，我们可以看到，执行 which view-test-cli 时，会在环境变量中找到 view-test-cli 命令
在这里插入图片描述
进入到这个目录看一看

在这里插入图片描述
可以看到，这里和 vue 一样，也生成了三个脚本文件，打开 view-test-cli shell 脚本文件，内容如下：

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*)
        if command -v cygpath > /dev/null 2>&1; then
            basedir=`cygpath -w "$basedir"`
        fi
    ;;
esac

if [ -x "$basedir/node" ]; then
  exec "$basedir/node"  "$basedir/node_modules/view-test-cli/bin/index.js" "$@"
else 
  exec node  "$basedir/node_modules/view-test-cli/bin/index.js" "$@"
fi

这里使用 exec ，它会用 node 执行 ./node_modules/view-test-cli/bin/index.js，并替换当前的 shell 进程。
说明执行 vue-test-cli，最后执行的是这个文件。
进入 node_modules 下看，不仅有我们的 view-test-cli，还有 @vue，这就是 @vue-cli 脚手架源码。后续我们再看 vue-cli 脚手架源码，先一步一步来。

node_modules目录
注意：
如果用的 nvm 安装的 node.js，会跟这里的路径有些区别，原理还是一样。