前言
本文实践所有代码已上传,源码地址:github.com/aehyok/omit…
从不同的视角出发,来学习源码知识,通过本文可以了解到以下知识:
1、准备源代码 2、了解package.json依赖 3、omit方法解析 4、将原来的单元测试修改为jest 5、让项目支持typescript 6、npm publish实践 7、总结
1、 准备源码
// 浏览器打开源码地址 https://github.com/benjycui/omit.js //点击`fork`,复制一份代码到自己的仓库 git clone git@github.com:aehyok/omit.js.git //通过vscode打开项目后,安装依赖 npm i // 安装完依赖后,执行测试用例 npm run test
可以发现一个测试集合,两个测试方法。
2、查看package.json中的依赖
2.1、 father依赖包
万万没想到原来是umijs家族中的,功能如此强大,细节我就不说了,直接看如下官网描述。
2.2、@umijs/fabric依赖包
也是umijs家族中的
看了它的官方文档,通过安装依赖后,里面包含了 eslint、prettier、stylelint的基础配置。
看了这里的配置,通过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
命令前执行
"compile": "father build", "prepublishOnly": "npm run compile && np --yolo --no-publish",
3、查看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; } export default omit;
其中Object.assign()
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
通过Object.assign
浅拷贝一份对象,因为源对象用了一个{}
空的对象。然后对循环传入的fileds
数组,将存在于对象上的key进行移除,这样移除的时候不会对传入的obj对象产生影响。 但是这里单层的循环,对于嵌套的对象就不起作用了。
同时你也可以去查看lodash,也有同样的方法,链接地址 www.lodashjs.com/docs/lodash…
4、jest重写测试用例
- 安装依赖
npm i jest -D
- 添加jest.config.js配置文件
npx jest --init
然后根据选择提示进行如下选择
执行完成后,在根目录下生成了jest.config.js文件。 以及重写了package.json
中的scripts
"test": "jest", // 之前是 father test
现在可以执行一下命令npm run test
,发现报错了,如下图所示
这里主要是因为我没有配置babel
进行转换,可以通过如下命令进行安装并配置
npm i babel-jest @babel/core @babel/preset-env -D
安装完毕后,在根目录配置好babel.config.js
// babel.config.js module.exports = { presets: [ [ '@babel/preset-env', { targets: { node: 'current', //针对当前node版本进行编译,删除该行可能导致`npm start`报错 }, }, ], ], };
配置完毕后,再次运行命令npm run test
,执行成功
将assert改为jest的方法
// 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
。
2.3、新增一个方法 在src/index.js添加一个求和方法
export const sum = (x, y) => { return x + y; }
然后在测试用例文件中添加单元测试
import omit, { sum } from '../src'; describe('sum', () => { it('两数字之和', () => { expect(sum(3,4)).toEqual(7) }) })
最后通过命令检测单元测试npm run test
通过修改jest.config.js,还可以查看到单元测试覆盖率,看一下效果
collectCoverage: true, coverageDirectory: "coverage",
同时也会生成一个文件coverage
5、支持TypeScript改写
安装typescript依赖
npm i -D typescript
安装tsc,并初始化typescript配置
npx tsc --init
执行完毕后,在根目录下会生成tsconfig.json
再来安装ts-jest
npm i -D ts-jest
在jest.config.js
中添加一行配置
module.exports = { preset: 'ts-jest', // ... };
现在可以将src,以及test文件夹下的index.js文件名修改为index.ts文件
src下的文件同时要修改文件中的方法,来支持ts类型的支持
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;
查看测试文件后有报错
此时需要安装ts的jest type 的支持
npm i -D @types/jest
安装完毕后,执行npm run test
ts文件的测试用例执行成功,说明typescript配置生效了。
7、发布到npm
- 修改package.json中的name,防止跟原作者冲突了
"name": "aehyok.omit.js",
- npmjs注册账号 记得还要设置邮箱,登录和发布时都需要
- npm login 或者npm adduser
- npm publish
- 查看npmjs
8、总结
- 了解Object.assign用法,以及浅克隆,还可以去了解实践一下浅克隆和深克隆
- npm内置指令 prepublishOnly,发布之前执行的
- omit方法学习
- 修改源码支持jest单元测试
- 修改源码支持typescript
- 实践npm publish
本文实践所有代码已上传,源码地址:github.com/aehyok/omit…