从0到1手把手开发脚手架

2021-07-22 09:33:11 阅读：161 来源： 互联网

标签：npm bin index 手把手开发 wangs test 脚手架

前面对脚手架和其原理有个初步的认识，本篇将和大家一起实操，从零开始搭建一个简易的脚手架(需要有node环境)~

首先，新建一个文件夹wang-cli-test，在该文件夹下打开终端，初始化项目：npm init -y。

用vs code打开该项目，新建子文件夹bin，bin目录下新建index.js，如图：

接下来配置package.json文件：

 1 {
 2   "name": "wang-cli-test",
 3   "version": "1.0.0",
 4   "description": "",
 5   "bin": {
 6     "wang-test": "bin/index.js"
 7   },
 8   "main": "index.js",
 9   "scripts": {
10     "test": "echo \"Error: no test specified\" && exit 1"
11   },
12   "keywords": [],
13   "author": "",
14   "license": "ISC"
15 }

上面代码中bin中的"wang-test"就是以后脚手架的主命令，会指向bin/index.js文件。

接下来编辑bin/index.js文件：

1 #!/usr/bin/env node
2 
3 console.log('hellow wang')

#!/usr/bin/env node这行代码前文已经介绍用法了，主要是用于声明该文件以node命令来执行。

准备工作都已完成，接下来将该项目发布到npm上，具体怎么发布可以自行百度，不想发布到线上的话，可以继续往下看，后面会介绍如何本地调试npm包~ 线上发布成功后全局安装我们这个脚手架：

输入主命令： wang-test

在bin/index.js中的代码就成功执行，这样我们的第一个脚手架的最简版本已经完成啦。

脚手架的雏形已经完成，但是我们知道脚手架远远不止如此！脚手架的开发过程中需要依赖很多包，下面我们将给我们的脚手架增加一个包，先给大家介绍一个npm包本地调试的方法~

新建一个项目，重复文章开头的操作，不同之处是package.json中的bin不同：

接下来将把这个npm包加入到本地调试，避免发布线上的繁琐操作(比如每次修改之后发布，会要求你修改version...)

在当前项目下,输入 npm link

在node目录中：C:\Users\Administrator\AppData\Roaming\npm会出现以下几个文件：

细心的你肯定会发现，我们之前全局安装我们线上脚手架的时候，也生成了这些命令文件：

wang-test.cmd和wangs-test.cmd文件都会有这行代码：

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\node_modules\wangs-test\bin\index.js" %*z

我们进入到node_modules文件夹下会看到：

wang-cli-test文件夹就是我们开头npm全局安装的脚手架，下面的wangs-test是我们本地脚手架，这里是个快捷方式，会软链接到我们wangs-test这个项目所在地址~

这俩个命令最终都会指向我们项目中的bin\index.js文件！再来测试一下，wangs-test这条命令能不能执行：

这样，本地调试已经实现~ 接下来给脚手架wangs-test增加一个包依赖。

再新建一个项目wangs-test-module,项目结构如下：

index.js:

1 module.exports = {
2   log() {
3     console.log('我是依赖包!!!')
4   }
5 }

package.json:

 1 {
 2   "name": "wangs-test-module",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "keywords": [],
10   "author": "",
11   "license": "ISC"
12 }

怎么将该项目(wangs-test-module)加入到wangs-test的包依赖呢，还是用 npm link!

在wangs-test-module目录下执行npm link将该项目加入本地调试。

在wangs-test下引入分包：npm link wangs-test-module。

小回车标志代表的就是本地软链接的包文件。

继续执行：npm i -S wangs-test-module，此时会报错404，意思是npm没有找到这个包，此时我们需要在wangs-test的package.json中手动增加依赖：

"dependencies": {
    "wangs-test-module": "^1.0.0"
  }

继续执行：npm i -S wangs-test-module就成功啦！接下来使用这个包：

wangs-test项目中的index.js文件：

1 #!/usr/bin/env node
2 
3 console.log('hellow wang')
4 
5 const mod = require("wangs-test-module");
6 
7 console.log(mod);

好的，继续执行脚手架命令，看看有没有引入成功。

这个错误的原因，是我们的分包文件的package.json中的main入口文件有误，将其改为： "main": "src/index.js",

接下来执行wangs-test

成功引入分包！

脚手架本地调试完分包后，一切正常的话，就可以将分包和脚手架一起发布到npm啦~

以上就是从0到1开发一个最基础的脚手架啦，后面还会继续探索脚手架更深层次的原理和更复杂的操作~

脚踏实地行，海阔天空飞~

标签：npm,bin,index,手把手,开发,wangs,test,脚手架
来源： https://www.cnblogs.com/coder--wang/p/15026094.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

从0到1手把手开发脚手架