若川说"可能是历史上最简单的一期omit.js"源码共读,但我学到了这些

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

image.png


前言


本文实践所有代码已上传,源码地址: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


image.png


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


2、查看package.json中的依赖


2.1、 father依赖包


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


image.png


2.2、@umijs/fabric依赖包


也是umijs家族中的


image.png


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


image.png

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命令前执行


"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


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


image.png


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


"test": "jest",
// 之前是
father test


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


image.png


这里主要是因为我没有配置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


image.png


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


image.png


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


collectCoverage: true,
  coverageDirectory: "coverage",


image.png


同时也会生成一个文件coverage


image.png


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;


查看测试文件后有报错


image.png


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


npm i -D @types/jest


安装完毕后,执行npm run test


image.png


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


7、发布到npm


  • 修改package.json中的name,防止跟原作者冲突了


"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…

目录
相关文章
|
1月前
|
JavaScript
JS实现简单的打地鼠小游戏源码
这是一款基于JS实现简单的打地鼠小游戏源码。画面中的九宫格中随机出现一个地鼠,玩家移动并点击鼠标控制画面中的锤子打地鼠。打中地鼠会出现卡通爆破效果。同时左上角统计打地鼠获得的分数
89 1
|
17天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
59 2
|
1月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
25 1
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
136 1
|
1月前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
35 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
42 4
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
27 2
|
1月前
|
JavaScript
JS实现的虚化雪景动态背景特效源码
JS实现的虚化雪景动态背景特效源码是一段基于JS实现的虚化雪景动态背景动画效果代码,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
44 4
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
60 0
html5+three.js公路开车小游戏源码
|
1月前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
38 0
JS趣味打字金鱼小游戏特效源码