前言

本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
这是源码共读的第36期，链接： juejin.cn/post/707970… 。

1. omit.js功能介绍

github仓库 github.com/benjycui/om…
npm www.npmjs.com/package/omi…

在Typescript3.5中新增了一个辅助类型Omit，它的作用主要是：以一个类型为基础支持剔除某些属性，然后返回一个新类型。

而在js中日常开发中，也会遇到以一个对象为基础剔除某些属性，然后返回一个新对象。obmitjs的主要功能则是将这段逻辑封装起来并且发布成npm工具包。omit.js是功能简单，源码阅读难度小，但是通过学习我了解到了业内是封装一个npm包的过程。

2. omit.js核心逻辑

omit.js的核心内容：

声明个浅拷贝对象
剔除对应属性

关于这个逻辑我第一时间想到的是es6的结构方法

// 解构方法
let obj = {a: 1, b: 2, c:3, d:4 }
let {a, b, c, ...newObj} = obj  // newObj = {d: 4}

但对比源码仔细想想这种写法虽然简单，但是存在缺陷：

声明了多余的变量，容易污染作用域
没想到合适的方法以参数的形式向解构赋值的表达式中传入排除的属性名

omit.js的方法则是更好的实践

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;

// 调用
let obj = {a: 1, b: 2, c:3, d:4 }
let newObj = omit(obj, ['a', 'b', 'c']) // newObj = {d: 4}

3. omit.js的npm包发布

3.1 创建并上传npm包

要创建并上传一个npm包其实不难，只需要走过以下路径，你就能在npm中找到你上传的包了：

初始化npm项目
写入核心功能
登录npm账号
发布npm包

但要维护一个可靠的npm包往往不止于此。一方面要保证代码的可靠性，另外一方面要方便不同代码贡献者继承代码时保持统一风格。从omitjs中我们可以看到维护者做了很多事情让这个纯JavaScript的项目变得可靠起来：

创建github开源仓库，并配上对应文档描述
使用eslint规范代码风格
引入测试模块，编写测试单元
引入ts，对方法类型进行约束
使用np工具包辅助创建和维护npm

从package.json看到omitjs引入几个实用的npm包，这些npm的引入只在开发环境起作用，主要是用于实现上述的部分功能：

{
  ...
  "devDependencies": {
    "@umijs/fabric": "^2.2.2",
    "assert": "^1.4.1",
    "eslint": "^7.4.0",
    "father": "^2.29.5",
    "np": "^6.3.1",
    "rc-tools": "^6.3.3"
  }
}

3.2 @umijs/fabric

@umijs/fabric 一个包含 prettier，eslint，stylelint 的配置文件合集

prettier，eslint，stylelint往往会有繁琐的配置文件，这个包主要为项目提供基础且可扩展的配置。

const base = require('@umijs/fabric/dist/eslint');

module.exports = {
  ...base,
  rules: {
    ...base.rules,
    'no-template-curly-in-string': 0,
    'prefer-promise-reject-errors': 0,
    'react/no-array-index-key': 0,
    'react/sort-comp': 0,
    'import/no-named-as-default': 0,
    'import/no-named-as-default-member': 0,
  },
};

同样的方法也适用于快速生成.prettierrc.js配置和.stylintrc.js配置

3.3 father

是一个基于rollup, docz, storybook, jest, prettier and eslint的工具集合。

omit.js引入father包主要作用：

引入jest用于项目的单元测试，npm run test时会运行father test
引入docz用于构建项目的文档，father doc build 或 father doc dev
引入eslint用于检查代码风格
引入rollup、babel等服务于项目打包

3.4 np

np包官方介绍是“a better npm publish”

常规发布npm包涉及很多步骤。至少需要经历：

运行测试用例（如果有的话）
根据Semantic versioning修改package.json更新版本号
根据Semantic versioning创建git tag
发布包到 Github
发布包到 NPM
为每次更新创建 release notes

np工具可以在node中全局安装，通过命令行的方式控制npm包的创建和发布。在np发布流程中你不会错过常规npm包发布流程中的每个步骤。并且在流程的最后，np 会启动浏览器窗口，方便你写入 release notes。

详情可以参考:

3.5 rc-tools

一个便于构建react组件的工具库，但是在omit.js实际源码中似乎没看到调用的地方，做个大概了解。

4.总结

了解omit.js的实现
了解关于发布npm的基本步骤
学习业内如何维护一个小而美的npm
了解几个实用的npm包

其他参考：

从 omit.js 学习封装一个小而美的npm包

前言