前言

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

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

准备

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

准备源码

# clone 项目
git clone git@github.com:benjycui/omit.js.git

# 进入项目
cd omit.js

# 安装依赖
npm install
or
cnpm install

用VsCode打开项目

omit.js介绍

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

# 安装
npm install -S omit.js
or
cnpm install -S omit.js

在项目中使用

# 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，这里会有项目的一些描述信息比如版本、作者、入口文件、命令、依赖等信息。

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

{
...
"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" // 生成测试报告
},
...
}

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

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

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

export default {
entry: ['src/index.js'],
cjs: 'babel',
esm: { type: 'babel', importLibToEs: true },
doc: { base: '/switch' },
preCommit: {
eslint: true,
prettier: true,
},
};

我们来看一下源码

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文件中，我们可以看到这么几个字段

{
...
"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目录结构。

然来是项目在运行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

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

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

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

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

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栏点击运行，就可以看到进入了断点当中。

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

总结

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

文章版权归作者所有，未经允许请勿转载。

THE END

资讯

如何学习github上的项目

前言

准备

omit.js介绍

源码阅读

代码如何运行

如何调试代码

总结

时钟