手把手带你开发你的第一个前端脚手架

开发一个简单的脚手架

1.创建 npm 项目

首先创建一个文件夹，然后进入到该文件夹目录下，执行

npm init -y 
1

2.创建脚手架入口文件bin/index.js，在index.js中添加如下代码

#!/usr/bin/env node

console.log('hello cli') 
1
2
3

3.配置 package.json，添加 bin 属性

{"name": "yj-study-create-cli","version": "1.0.1","description": "","bin": {"yj-study-create-cli": "bin/index.js"},"main": "index.js",...
} 
1
2

4.将脚手架发布到 npm

npm publish 
1

当发布到npm之后，通过全局安装来使用下我们上面创建的脚手架：

npm install -g yj-study-create-cli 
1

此时我们会在/**/.nvm/versions/node/v16.14.0/bin下看到该脚手架对应的可执行文件，这个文件就软链接到我们开发的bin/index.js文件。

在命令行输入yj-study-create-cli之后，就会打印出hello cli。

这样我们就完成了一个简单脚手架的开发，是不是非常简单。

脚手架的调试

当我修改了脚手架内容之后，每次都要通过npm publish上传到npm上面，然后在npm install才能看到效果，这样非常繁琐和不方便，那怎么调试脚手架呢？我们可以通过npm link把本地脚手架文件通过软链接的形式链接到全局。

首先进入到脚手架目录，执行：

npm link 
1

可以发现在node/bin目录下面建立了一个可执行文件yj-study-create-cli，它指向了lib/node_modules/bin/index.js

我们进入到这个bin/index.js看下：