36期 omit.js 剔除对象中的属性及npm使用

64 阅读4分钟

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

这是源码共读的第36期

1.代码分析

使用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;

该代码较为easy

2.npm 包

father有什么用

father

Library toolkit based on rollup, docz, storybook, jest, prettier and eslint.

为组件打包

// package.json
// npm 被替换成 fater
 "scripts": {
        "start": "father doc dev --storybook",
        "build": "father doc build --storybook",
        "compile": "father build",
        "gh-pages": "father doc deploy",
        "prepublishOnly": "npm run compile && np --yolo --no-publish",
        "lint": "eslint .",
        "test": "father test",
        "coverage": "father test --coverage"
    },
// .fatherrc.js
//Library toolkit based on rollup, docz, storybook, jest, prettier and eslint. 为组件打包(常用于 打包配置)
//https://github.com/umijs/father#readme
export default {
    entry: ['src/index.js'], //入口
    // file 指定输出的文件
    cjs: 'babel', //是否输出 cjs 格式,以及指定 cjs 格式的打包方式等。 
    esm: { type: 'babel', importLibToEs: true }, // 输出的格式  
    doc: { base: '/switch' },
    //透传配置给 docz,可以有 title、theme、themeConfig 等。比如要切换默认主题为 dark 模式:
    //umd 格式又是什么
    //autoprefixer 可以解析css文件并且添加前缀到css内容里
    preCommit: {
        eslint: true,
        prettier: true,
    },
};

什么是cjs格式

cjs 格式代表“CommonJS”,旨在在 node.js 中运行。它假设环境包含导出、要求和模块。使用 ECMAScript 模块语法导出的入口点将被转换为一个模块,每个导出名称的导出都有一个 getter。当未指定输出格式、启用捆绑并且平台设置为节点时,将自动启用 cjs 格式。

什么是esm格式

esm 格式代表“ECMAScript 模块”。它假定环境支持导入和导出语法。 CommonJS 模块语法中带有导出的入口点将被转换为 module.exports 值的单个默认导出。

部分文件的意义

.eslintignore //eslint 忽略的文件
.eslintrc.js //配置 eslint文件

.gitignore作用

git忽略的文件或者目录

.gitignore忽略规则

* 空格不匹配任意文件,可作为分隔符,可用反斜杠转义 
* 开头的文件标识注释,可以使用反斜杠进行转义 
* ! 开头的模式标识否定,该文件将会再次被包含,如果排除了该文件的父级目录,则使用 ! 也不会再次被包含。可以使用反斜杠进行转义 
* / 结束的模式只匹配文件夹以及在该文件夹路径下的内容,但是不匹配该文件 
* / 开始的模式匹配项目跟目录 
* 如果一个模式不包含斜杠,则它匹配相对于当前 .gitignore 文件路径的内容,如果该模式不在 .gitignore 文件中,则相对于项目根目录 * ** 匹配多级目录,可在开始,中间,结束 
* ? 通用匹配单个字符 * * 通用匹配零个或多个字符
* [] 通用匹配单个字符列表

常用忽略例子

bin/: 忽略当前路径下的bin文件夹,该文件夹下的所有内容都会被忽略,不忽略 bin 文件
/bin: 忽略根目录下的bin文件 
/*.c: 忽略 cat.c,不忽略 build/cat.c debug
/*.obj: 忽略 debug/io.obj,不忽略 debug/common/io.obj 和 tools/debug/io.obj 
**/foo: 忽略/foo, a/foo, a/b/foo等 
a/**/b: 忽略a/b, a/x/b, a/x/y/b等 
!/bin/run.sh: 不忽略 bin 目录下的 run.sh 文件 
*.log: 忽略所有 .log 文件 config.php: 忽略当前路径的 config.php 文件

np的作用

www.npmjs.com/package/np

A better npm publish

// package.json
"compile": "father build",
"prepublishOnly": "npm run compile && np --yolo --no-publish",
// 先将项目打包再publish

omt.js的发包工具

@umijs/fabric

一个包含 prettier,eslint,stylelint 的配置文件合集

github.com/umijs/fabri…

.eslintrc.js
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,
  },
};

assert

用于测试

// index.test.js
import assert from 'assert';
import omit from '../src';

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

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

也可以使用jest等其他测试工具

Describe 函数

Describe 是Jasmine测试框架中的一个函数。它简单地描述了由“it”函数枚举的测试用例套件。

3.npm发包流程

  • git add .

  • git commit -m ""

  • npm login

  • userName: , pwd:

  • 修改版本:

    1. npm version major (较大版本更新)
    2. npm version minor (功能新增)
    3. npm version patch (修复问题)
  • npm run build

  • npm publish

  • git push