arrify 转数组 --学会调试源码

本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。

arrify 的功能就是把一个值转换为一个数组。通过这个简单的库，学习调试源码的流程，这是这个笔记的重点

前期准备工作：

将源码克隆下来，并安装好依赖

首先来到项目目录，找到package.json文件

查看pagkage.json文件

devDependencies字段

        "devDependencies": {
		"ava": "^3.15.0",   //ava 是一个单元测试的类库，
		"tsd": "^0.14.0",   //tsd: 通过index.test-d.ts文件测试index.d.ts定义
		"xo": "^0.39.1"     //xo是一个代码检查工具
	}

看到有依赖，先下载下来，执行

npm install

安装之后呢，最好大概了解一下这些依赖的作用是什么，他们大概的用法等等。。。不需要太深入了解

exports字段

    "exports": "./index.js",

exports 定义的内容就是该npm包的真实和全部的导出，优先级会高于main和file等字段

scripts字段

	"scripts": {
		"test": "xo && ava && tsd"
	},

scripts 定义一组可以运行的脚本。"xo && ava && tsd" 的意思是先执行xo 再执行 ava 再执行tsd

我们调试也是从这里开始的

开始调试

在看目录的时候，可以发现有一个test.js文件，在了解ava这个类库的时候就可以知道这个test.js文件是测试文件

我们先在测试文件中写上debugger再进行下一步

在pagkage.json文件中找到scripts字段，会发现有调试的字样，点击调试

我们就会进入调试界面

注意：点击后，如果返现有报错，那就把

"test": "xo && ava && tsd" 改成 "test": "ava && tsd"  //这里感谢若川大佬的指导

保存，重新点击调试就可以接续了

然后可以发现我们刚才debugger的地方变成了这样子

接下来就是正式进入调试时间啦，

简单的调试

来自若川大佬的文章

juejin.cn/post/703058…

觉得好用的方法，1.鼠标放在变量上面，会跳出变量的值。（这里因为截图的原因，鼠标的样子没有截下来）

2. 在监视这里可以观察表达式的值

总结：

1. 克隆源码到本地，并安装依赖
2. 执行npm install
3. 看pagkage.json文件，了解入口文件，开发依赖等信息
4. 哪里不懂debugger哪里（调试之前，在不懂的地方打上debugger）

我都收获:迈出我的第一步，之前早就想参见这个互动了，一直拖延。

虽然这次的源码大部分很简单，但是就这20代码我都有不懂的地方，比如ts部分的内容、Symbol、iterator等等。还需要继续学习