如何学习github上的项目

Git►DeBug , 评论

前言

「我正在参与掘金会员专属活动-源码共读第一期，点击参与」

作为一个合格的前端（摸鱼）工程师，经常在github上看到很多优秀的项目，但都是只知道如何去使用。本文将以omit.js为例，一起看看怎样学习阅读查看github上项目代码，使用VsCode来调试项目，一步步的查看代码是这么运行的。

准备

在官网下载安装最新版本 VSCode。

准备源码

1
2
3
4
5
6
7
8
9
10
# clone 项目
git clone git@github.com:benjycui/omit.js.git

# 进入项目
cd omit.js

# 安装依赖
npm install
or
cnpm install

用VsCode打开项目

omit.js介绍

我们要学习一个项目，就需要带着问题去学习，在学习的时候要知道这个项目提供了什么？怎样去使用？一般在项目的README.md文件中都会有项目的一些介绍。以omit为例，它主要是提供了一个对象剔除的功能，可以将对象中指定的属性删除，返回剔除后的对象。

1
2
3
4
# 安装
npm install -S omit.js
or
cnpm install -S omit.js

在项目中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# ESM
import omit from 'omit.js' 
or
# CommonJS
const omit = require('omit.js')

const user = {
	name: 'zhangsan',
	age: '18',
	gender: '1'
}
const result = omit(user, ['name'])
console.log(result)

result ===> {
	age: '18',
	gender: '1'
}

user ====> {
	name: 'zhangsan',
	age: '18',
	gender: '1'
}

知道的了omit.js主要功能后，来看一下它是如何实现的。

源码阅读

我们用VsCode打开项目，我们要学习一个项目，最先查看的文件就是package.json，这里会有项目的一些描述信息比如版本、作者、入口文件、命令、依赖等信息。

我们可以看到它有这么几个命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
...
	"scripts": {
	"start": "father doc dev --storybook", // 项目生成html doc文档
	"build": "father doc build --storybook", // 打包 doc文档
	"compile": "father build", // 项目编译打包
	"gh-pages": "father doc deploy", // 部署 doc文档
	"prepublishOnly": "npm run compile && np --yolo --no-publish", // 打包 发布
	"lint": "eslint .", // eslint 校验
	"test": "father test", // 单元测试
	"coverage": "father test --coverage" // 生成测试报告
	},
...
}

这几个命令都和、np`有关，而我们也看到项目有安装这几个依赖包，有兴趣的可以去了解一下，这里做一下简单的介绍。

  • father：一款 NPM 包研发工具，能够帮助开发者更高效、高质量地研发 NPM 包、生成构建产物、再完成发布。
  • np：一款交互式命令发布工具，可以快捷的将包发布到npm上。

我们着重关注一下compile命令，它通过.fatherrc.js配置来编译项目，在这里我们可以看到项目的入口路径在src/index.js。

1
2
3
4
5
6
7
8
9
10
export default {
	entry: ['src/index.js'],
	cjs: 'babel',
	esm: { type: 'babel', importLibToEs: true },
	doc: { base: '/switch' },
	preCommit: {
		eslint: true,
		prettier: true,
	},
};

我们来看一下源码

1
2
3
4
5
6
7
8
9
10
11
function omit(obj, fields) {
  // eslint-disable-next-line prefer-object-spread
  const shallowCopy = Object.assign({}, obj);
  for (let i = 0; i < fields.length; i += 1) {
    const key = fields[i];
    delete shallowCopy[key];
  }
  return shallowCopy;
}

export default omit;

代码很好理解，先是通过Object.assign拷贝一下目标对象，为了是不影响到原对象。然后便利fields数组，通过上面的例子我们知道，这里传入的是需要剔除的对象属性，是一个数组，每一项为string。现获取到需要删除的key，在通过delete关键字删除拷贝对象里的属性，最后将拷贝的对象返回出去。

这里有一个问题是，只用了一层的循环。如果我对象嵌套很深的话，是无法进行处理的。

代码如何运行

看完源码后，来看一下它是如何在我们项目中运行的？

在package.json文件中，我们可以看到这么几个字段

1
2
3
4
5
6
7
8
9
10
11
12
13
{
...
	"main": "lib/index.js", // 包的主要入口文件
	"module": "es/index.js", // 包的 ESM 规范的入口文件
	"types": "index.d.ts", // ts声明文件
	"files": [ // 推送到npm上的文件列表
	    "lib",
	    "es",
	    "dist",
	    "index.d.ts"
	],
...
}

执行一下compile命令后发现会多es、lib文件，再看一下安装包后node_modules文件下的omit.js目录结构。
image.png

然来是项目在compile后会生成es、lib两个文件，其中es为源码，lib为经过bale处理后的代码。我们在安装完包后，在项目require()引入项目的时候，其实就是将package.json中的main路径下的代码引入进来，也就是node_modules/moit.js/lib/index.js里的代码。

如何调试代码

我之前都不会调试代码，直接一行console.log()走遍天下，遇到一些负责的代码根本都弄不清逻辑循序，而且还不优雅。后来慢慢学会了通过VsCode调试代码，这里就先简单介绍一些如何通过VsCode debuger来调试Node代码，还是以omit.js为例。

我们打开VsCode左侧插件栏中的运行和调试，也就是debug功能，然后为项目创建一个launch.js文件来配置debug，然后选择Node.js
Kapture 2022-12-04 at 19.33.51.gif

将配置文件中program参数修改为omit函数的位置

1
"program": "${workspaceFolder}/src/index.js",

${workspaceFolder}只的是项目的根目录

我们在src/index.js下直接调用一下omit方法

1
2
3
4
5
6
7
8
9
10
11
12
function omit(obj, fields) {
  // eslint-disable-next-line prefer-object-spread
  const shallowCopy = Object.assign({}, obj);
  for (let i = 0; i < fields.length; i += 1) {
    const key = fields[i];
    delete shallowCopy[key];
  }
  return shallowCopy;
}
omit({name: '1', age: 18}, ['name'])
// export default omit;

然后在function omit(obj, fields)这行打上断点，看一下函数的具体执行步骤。然后在debug栏点击运行，就可以看到进入了断点当中。

Kapture 2022-12-04 at 20.03.08.gif

这里就可以看到每一行执行的结果，更方便的去调试理解代码。

总结

这里只是用omit.js项目作为示例，该如何去学习一个github项目代码，如何去看懂一些项目结构，知道它怎么运行。也可以更好的帮助我们自己去成长，学习优秀项目，在以后的工作日常中得以运用。比如我就看到该项目中使用了fabric包，将一些[[1-blog/工程化/Eslint | eslint]]，[[…/…/5-project/project-builder/eslint & prettire & typescript#Prettier | prettier]]等配置通过require方式引入进来，可以统一封装使用。np`可以进行自动发包。文中提到的如何调试代码也是我最近入手前端调试通关秘籍 这本小册才学会的，而且调试的方法也还不止一种。希望能借用【源码共读】活动，能让我培养起学习其他项目的习惯。

wakaka378a Vuer

我很懒，啥也没有