这是我参与更文挑战的第 17 天，活动详情查看： 更文挑战

2021-06-17 总结 TANGJIE 其他 脚手架基础 简易手脚架

前端脚手架开发(三)，实践出真知

开发一个example-test手脚架，做一个简单的东西~

1. 基本开发

1.1 创建一个项目

找一个位置创建一个文件夹example-test

使用npm init初始化项目，然后在其项目下创建一个bin文件夹，写入一个index.js文件,index.js代码如下：

#!/usr/bin/env node

console.log('wecome exaple-test')
复制代码

配置package.json

{
  ...
  "name": "@tangjie123/example-test",
  "version": "1.0.0",
  "description": "test",
  "bin":{
    "example-test":"bin/index.js"
  },
  "main": "index.js",
  ...
}
复制代码

1.2 发布到npm

这里需要注册一个nmp账号
使用npm login去登录，然后用npm whoami去验证是否登录
在使用npm publish或者npm publish --access public 去发布

1.3 npm 全局安装体验

例如我的包名是@tangjie123/example-test,那么就运行npm i @tangjie123/example-test -g

再使用(有没有发现：- 在/c/Users/Administrator/AppData/Roaming/npm下配置vue的软链接（shell脚本)指向同级目录下的node_modules/@vue/cli/bin/vue.js这一步在我们下载安装在全局的时候就已经帮我们做了)
example-test

或者

winpty example-test.cmd

就可以看到打印结果了—— wecome exaple-test

2. 发布npm可能出现的问题

2.1 出现403

npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/hello_test_npm - You do not have permission to publish "xxx". Are you logged in as the correct user
这个问题很不明显

其实很可能是你创建了npm账号没有去验证邮箱，验证一下邮箱就好了

2.2 出现402错误，提示付费

原因是：以@开头，代表的是组织团体，如果直接用npm publish是需要付费的，如果不想付费就要用npm publish --access public这个命令去发布

2.3 其他错误

npm其他错误都有比较好的提示，看着提示搜索吧！！！

3. 本地测试

cli没有分包情况下的本地调试

首先进入cli的入口文件所在的目录下，在上面我的cliexample-test/bin/index.js所在的目录下，启用npm link命令：
运行过程如下

C:\Users\Administrator\AppData\Roaming\npm\example-test -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tangjie123\example-test\bin\index.js
C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tangjie123\example-test -> E:\myproject\Demo\cli\example-test
复制代码

这样就完成了cli的本地调试，除了这种还有另一种，但是这种最大的优点是，本地cli文件变动不用把它发布到npm上去，运行的结果也是最新的结果，方便调试，因此其他方法就不赘述

cli有分包情况下的调试

1. 首先先建立一个分包，我这边的分包名为example-test-lib/lib/index.js,然后用npm init进行项目的初始化
2. 在此index.js文件下写一个简单的加法函数并导出

module.exports = {
	add(a,b){
		return a + b
	}
}
复制代码

3. 进入到主包example-test的目录下面，然后通过npm link example-test-lib,运行此命令后悔报错404,这是因为该分包没有发布到npm上去，于是乎为了本地调试，我们需要去到example-test-lib/lib/index.js，去npm link使得这个文件被链接到,此时还没结束还得去package.json去修改入口文件指向lib/index.js,因为项目初始化默认的入口文件是index.js

...
"main": "lib/index.js"
...
复制代码

然后继续前一步，去到主包example-test的目录下面，然后通过npm link example-test-lib链接到分包，

4. 因为不是通过npm下载的方式，而是通过的链接方式，因此需要我们在主包的package.json去手动添加依赖(这里添加的是生产依赖)

...
"dependencies":{
	"example-test-lib": "^1.0.0"
}
...
复制代码

备注:devDependencies是指开发依赖，dependencies是指生产依赖

5. 本地测试效果

在主包的index.js去引用分包尝试一下吧！！！,完整的主包代码如下

#!/usr/bin/env node
const lib = require('example-test-lib');
console.log('wecome exaple-test link本地测试')
console.log(lib.add(5,7))


function A (){
  this.b = function(c,b){
    return c+b
  }
}

A.prototype.test = ()=>{
  console.log('xxx')
}

const a = new A();
const b = new A();
a.b;
b.b;

a.test === b.test
复制代码

到此一个简易的cli和本地测试就完成了~

3. 总结,手脚架本地link标准流程

3.1 链接本地手脚架

cd 你的cli目录，入口文件所在的位置
npm link
复制代码

3.2 链接本地库文件

cd 你的你的库，入口文件所在的位置
npm link
复制代码

然后，转到主包的入口文件

cd 你的cli目录，入口文件所在的位置
npm link 你的库名
复制代码

3.3 取消链接本地文件

cd 你的cli目录，入口文件所在的位置
npm unlink
复制代码

3.4 取消链接本地库文件

cd 你的你的库，入口文件所在的位置
npm unlink
复制代码

然后，转到主包的入口文件

cd 你的cli目录，入口文件所在的位置
# link存在
npm unlink 你的库名
# link不存在
rm -rf node_modules
npm install
复制代码

3.5 理解npm link

npm link 你的库文件,其意思就是将当前项目中的node_modules下指定的文件链接到node全局的node_modules下面的库文件
npm link 将当前项目链接到node全局node_modules中作为一个库文件，并解析bin并解析bin配置创建可执行文件