本文参加了由公众号@若川视野 发起的每周源码共读活动, 点击了解详情一起参与。
这是源码共读的第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有什么用
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的作用
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 的配置文件合集
.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:
-
修改版本:
- npm version major (较大版本更新)
- npm version minor (功能新增)
- npm version patch (修复问题)
-
npm run build
-
npm publish
-
git push