若川说"可能是历史上最简单的一期omitjs"源码共读,但

发表于

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

【若川视野 x 源码共读】第36期 | 可能是历史上最简单的一期 omit.js 剔除对象中的属性点击了解本期详情一起参与。

前言

本文实践所有代码已上传，源码地址：github.com/aehyok/omit…

从不同的视角出发，来学习源码知识，通过本文可以了解到以下知识：

1
2
3
4
5
6
7
go复制代码1、准备源代码
2、了解package.json依赖
3、omit方法解析
4、将原来的单元测试修改为jest
5、让项目支持typescript
6、npm publish实践
7、总结

1、 准备源码

1
2
3
4
5
6
7
8
9
10
11
javascript复制代码// 浏览器打开源码地址
https://github.com/benjycui/omit.js

//点击`fork`，复制一份代码到自己的仓库
git clone git@github.com:aehyok/omit.js.git

//通过vscode打开项目后，安装依赖
npm i

// 安装完依赖后，执行测试用例
npm run test

image.png

可以发现一个测试集合，两个测试方法。

2、查看package.json中的依赖

2.1、 father依赖包

万万没想到原来是umijs家族中的，功能如此强大，细节我就不说了，直接看如下官网描述。

image.png

2.2、@umijs/fabric依赖包

也是umijs家族中的

image.png

看了它的官方文档，通过安装依赖后，里面包含了 eslint、prettier、stylelint的基础配置。

image.png

看了这里的配置，通过require.resolve将封装的配置加载进来，这个思路也非常的不错。

这里之前刚好学习过另外一个开源仓库 如何为前端项目一键自动添加eslint和prettier的支持,它这里是通过封装然后运行指令，直接将eslint和prettier的配置文件在项目中生成了。而@umijs/fabric这里是引用了封装的配置文件。

两种思路的碰撞，没有谁比谁更好，只是说场景的适用性，对我学习来说，又多了一个思路。紧接着我又去看了一下**@umijs/fabric**的源代码，看着有点迷，但还是看明白了大致的逻辑，如有时间，等有空捞一捞。

2.3、assert

原来这也是一个写单元测试的npm包，周下载量为10,421,399，github上的star274
我顺手查了一下jest的周下载量，16,359,268，但github上的star却达到了39,5k，大趋势来说还是要用jest,毕竟功能更强大。但是一些比较老的项目，确实都使用了assert,比如lodash,大部分前端应该都熟悉或者使用很广泛的一个npm库。

2.4、np

A better npm publish

通过官网的第一句便可以看出来，这个np对于发包，也就是发布到npmjs上，非常有用的一个工具。

2.5、 prepublishOnly

scripts中的一个指令，在npm publish命令前执行

1
2
javascript复制代码"compile": "father build",
"prepublishOnly": "npm run compile && np --yolo --no-publish",

3、查看omit方法

1
2
3
4
5
6
7
8
9
10
11
javascript复制代码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()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

通过Object.assign浅拷贝一份对象，因为源对象用了一个{}空的对象。然后对循环传入的fileds数组,将存在于对象上的key进行移除，这样移除的时候不会对传入的obj对象产生影响。
但是这里单层的循环，对于嵌套的对象就不起作用了。

同时你也可以去查看lodash，也有同样的方法，链接地址 www.lodashjs.com/docs/lodash…

4、jest重写测试用例

  • 安装依赖
1
javascript复制代码npm i jest -D
  • 添加jest.config.js配置文件
1
javascript复制代码npx jest --init

然后根据选择提示进行如下选择

image.png

执行完成后，在根目录下生成了jest.config.js文件。
以及重写了package.json中的scripts

1
2
3
4
javascript复制代码"test": "jest",

// 之前是
father test

现在可以执行一下命令npm run test,发现报错了，如下图所示

image.png

这里主要是因为我没有配置babel进行转换，可以通过如下命令进行安装并配置

1
javascript复制代码npm i babel-jest @babel/core @babel/preset-env -D

安装完毕后，在根目录配置好babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
javascript复制代码 // babel.config.js
 module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',  //针对当前node版本进行编译，删除该行可能导致`npm start`报错
        },
      },
    ],
  ],
};

配置完毕后，再次运行命令npm run test,执行成功

将assert改为jest的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
javascript复制代码// import assert from 'assert';
import omit from '../src';

describe('omit', () => {
  it('should create a shallow copy', () => {
    const benjy = { name: 'Benjy' };
    const copy = omit(benjy, []);
    expect(copy).toEqual(benjy)
  });

  it('should drop fields which are passed in', () => {
    const benjy = { name: 'Benjy', age: 18 };
    const target1 = omit(benjy, ['age'])
    const target2 = omit(benjy, ['age', 'name'])
    expect(target1).toEqual({ name: "Benjy"})

    expect(target2).toEqual({})
  });
});

主要就是将原来的assert改为了jest。

image.png

2.3、新增一个方法
在src/index.js添加一个求和方法

1
2
3
javascript复制代码export const sum = (x, y) => {
  return x + y;
}

然后在测试用例文件中添加单元测试

1
2
3
4
5
6
7
javascript复制代码import omit, { sum } from '../src';

describe('sum', () => {
  it('两数字之和', () => {
    expect(sum(3,4)).toEqual(7)
  })
})

最后通过命令检测单元测试npm run test

image.png

通过修改jest.config.js,还可以查看到单元测试覆盖率，看一下效果

1
2
javascript复制代码  collectCoverage: true,
  coverageDirectory: "coverage",

image.png

同时也会生成一个文件coverage

image.png

5、支持TypeScript改写

安装typescript依赖

1
javascript复制代码npm i -D typescript

安装tsc,并初始化typescript配置

1
javascript复制代码npx tsc --init

执行完毕后，在根目录下会生成tsconfig.json

再来安装ts-jest

1
javascript复制代码npm i -D ts-jest

在jest.config.js中添加一行配置

1
2
3
4
5
javascript复制代码
module.exports = {
  preset: 'ts-jest',
  // ...
};

现在可以将src,以及test文件夹下的index.js文件名修改为index.ts文件

src下的文件同时要修改文件中的方法，来支持ts类型的支持

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

export const sum = (x: number, y: number) => {
  return x + y;
};
export default omit;

查看测试文件后有报错

image.png

此时需要安装ts的jest type 的支持

1
javascript复制代码npm i -D @types/jest

安装完毕后，执行npm run test

image.png

ts文件的测试用例执行成功，说明typescript配置生效了。

7、发布到npm

  • 修改package.json中的name，防止跟原作者冲突了
1
javascript复制代码  "name": "aehyok.omit.js",
  • npmjs注册账号
    记得还要设置邮箱，登录和发布时都需要
  • npm login 或者npm adduser
  • npm publish

image.png

  • 查看npmjs

image.png

8、总结

  • 了解Object.assign用法，以及浅克隆，还可以去了解实践一下浅克隆和深克隆
  • npm内置指令 prepublishOnly，发布之前执行的
  • omit方法学习
  • 修改源码支持jest单元测试
  • 修改源码支持typescript
  • 实践npm publish

本文实践所有代码已上传，源码地址：github.com/aehyok/omit…

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%