[JavaScript知识库] 脚手架的基本知识

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 脚手架的基本知识 -> 正文阅读

[JavaScript知识库]脚手架的基本知识

脚手架的基本原理

点击查看脚手架系列文章总览【正在更新】

个人网站：www.dengzhanyong.com

关注公众号【前端筱园】，不错过每一篇文章

什么是脚手架

可以理解为是用来提高项目整个流程的工具，从初始化到开发，再到构建部署等。在整个过程中会帮我们完成一些比较复杂，且与实际业务并不太相关的工作。

脚手架的作用或必要性

自动化：创建项目，运行，构建，部署；这些事情都可以用过一句简单的命令完成。
标准化：模板标准化；开发规范标准化；发布流程标准化；
数据化：

安装原理

以 vue-cli 为例

npm install -g @vue/cli

其实安装脚手架的本质就是将一个 npm 下载安装到全局。这里的 @vue/cli 就是脚手架的包名， -g 表示在全局安装。

全局安装会将这个包安装到 C:\Users\用户名\AppData\Roaming\npm\node_modules 目录下。在全局的 node_modules 下就是所有全局安装的包。

命令执行过程

为什么安装的是 @vue/cli ，执行的时候使用的命令的 vue

? 在全局安装 @vue/cli ，系统会自动创建一个软连接，软连接指向 @vue/cli 的入口文件。

? 软链接的名字在 package.json 中定义，打开 vue-cli 的源码，在 package.json 中可以找到 bin 属性：

"bin": {
   "vue": "bin/vue.js"
}

? 其中的 vue 属性名就是软连接的名称，它的值就是入口文件。

运行js文件的多种方式

一般我们通过 node index.js 的方式去运行一个 .js 文件，其实还有其他方式运行，下面这几种方式是等价的：

node index.js
/use/bin/env node index.js
./index.js

/use/bin/env node index.js ：表示在环境变量中找到 node ,然后再使用 node 去运行 index.js

这就是为什么我们在开发脚手架的时候，第一行的代码是 #!/use/bin/env node 的原因。还有一个很重要的有点，就是系统会自己去找 node ，解决了不同用户的 node 路径不同的问题。

**执行过程 **

使用 vue-cli 创建一个项目都经历了什么？

输入 vue create myproject 命令
在环境变量中查找 vue
找到 vue 软连接的位置
找到软连接指向的真实路径 C:\Users\DZY26\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
加载 vue.js 文件，第一行为 #!/usr/bin/nev node ，表示使用 node 去执行此文件
在环境变量中查找 node
使用 node 去执行此文件，并将参数 myproject 作为参数传入【可以通过 process.argv 获取到传入的参数】

开发流程

创建项目【 mkdir my-cli cd my-cli】
初始化 npm 【npm init --yes】
创建入口文件 bin/index.js，在起始处加上 #!/usr/bin/env node

在 package.json 中指定入口文件及执行命令名称

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

在 bin/index.js 中开发脚手架内容
发布到 npm 【npm publish】（如果没有登录的话需要 npm login 进行登录）
在 npm 官网中就可以搜索到我们才上传的包了【一般更新会有点延迟】
全局安装使用【npm install my-cli -g】（注意这里的 my-cli 是你的包名，不是文件夹的名称，包名在 package,json 中定义）
```
{
    "name": "my-cli",
}
```

本地调试

添加本地软连接

npm link

# C:\Users\DZY26\AppData\Roaming\npm\mycli -> C:\Users\DZY26\AppData\Roaming\npm\node_modules\my-cli\bin\index.js
# C:\Users\DZY26\AppData\Roaming\npm\node_modules\my-cli -> C:\Users\DZY26\Desktop\my-cli

执行 npm link 后，会创建两个软连接，其中一个与安装线上包一样，指向 node_modules 下的 my-cli。

如果是本地创建的软连接，则 node_modules\my-cli 本质上也是一个软连接，指向我们本地开发的项目的路径。

移除软连接