前端工程化——脚手架

项目的开发过程中，通常使用的脚手架工具，vue-cli,create-react-app等脚手架。给我们提高开发效率。

疑问:

1.全局安装脚手架，在cmd执行命令时，为什么会解析这条命令？（例如安装vue-cli,在命令行可执行vue）
2.脚手架工作原理是怎么样子？
3.如何搭建脚手架？

一、npm安装的路径

npm全局安装脚手架，通常各个系统默认会保存在以下位置：
1、Windows
C:\Users\username\AppData\Roaming\npm\node_modules
2、Mac
/usr/local/lib/node_modules/sprites-cli下
3、Linux

也可以，通过命令npm root -g 进行查询。而保存的目录，要确保已经挂载到我们的系统环境变量当中。

image.png

在我们挂载环境变量的目录，可以发现到脚手架的软链接文件，但执行安装的脚手架的命令的时，就能解析到这条命令了。

image.png

而执行的命令，会直接运行脚手架下js文件，而运行这个js文件，这是由于文件中代码。

#!/usr/bin/env node
//相当node (运行的文件名)

vue-cli为例

二、搭建脚手架

1、创建demo目录 并目录下npm init -y 初始化安装，以及创建目录bin

demo文件

2、在目录bin文件下，创建index.js文件。

image.png

并且在pageage.json文件中，添加bin的路径。

image.png

3、通过npm login进行npm的登录。

image.png

4、npm publish对文件包的发布。(ps：文件包名，在npm没被其他人使用过)

5、npm i -g 进行的全局的安装

image.png

6、npm link 对本地的脚手架创建软链接，进行本地调试开发。

image.png

7、关联本地的库
1.搭建库的基本结构

demo-lib项目结构

2.如果是库，需要对main进行指定入口文件

demo-lib 编辑main

3、脚手架pageage.json，对dependencies声明。

demo 脚手架