关于前端:走进开源项目-urlcat

40次阅读

共计 3364 个字符,预计需要花费 9 分钟才能阅读完成。

大部分人都有个参加开源我的项目的梦,可我的项目在前却不知如何下手?今日有幸遇到了能够下手的库 — urlcat

urlcat 只有 267 行代码的开源我的项目,却播种了 1.4 k 的 star,周下载量 1 w 以上,这是我目前遇到过源码起码的开源我的项目,上面就来一探到底,看看每个文件在我的项目中的作用。

.github

从命名上看是 issue 和 pr 模板,这三个模板能够无效升高作者与使用者的沟通老本,高效解决问题,其中:

bug_report.md 形容:

  1. 什么问题
  2. 如何复现该问题
  3. 预期的行为成果是什么
  4. 截图
  5. 桌面环境:什么零碎、什么浏览器、什么版本
  6. 手机环境:什么设施、什么零碎、什么浏览器、什么版本
  7. 问题上下文:作用在于阐明该问题是否与其余问题有关联

fature_request.md 形容:

  1. 你须要的性能是否与某个问题无关
  2. 形容下你想要的计划
  3. 形容你可能思考过的代替计划
  4. 形容预制相干的性能 issue

pull_request_template.md 形容:

  1. PR 的性能概括
  2. PR 的详情形容

docs

用 What、Why、How 精准论述了我的项目的存在的意义。

  • What:是什么?
  • Why:为什么要做?
  • How:怎么用

除此之外,还提供了具体的 api 阐明,以及通知大家如何参加该我的项目,奉献本人的代码。

src

寄存源码的文件夹,之后会独自写一篇对于该源码的文章。

test

都说单元测试很重要,可都感觉写单元测试费时费力,即使是区区几百行代码,该作者仍旧写了如此具体的单元测试,这是一种态度。

.all-contributorsrc

一个我的项目可能放弃生机,继续一直的倒退,须要众人的力量。

.editorconfig

有助于在不同的编辑器和 IDE 中保持一致的编码款式。

# 是否是顶级配置文件,设置为 true 的时候才会进行搜寻.editorconfig 文件
root = true

[*]
# 换行符类型
end_of_line = lf
# 是否让文件以空行完结
insert_final_newline = true
# 缩进形式
indent_style = space
# 缩进大小
indent_size = 2
# 编码格局
charset = utf-8

.eslintignore

通知 eslint 疏忽特定文件和目录,不要对其进行检测。

node_modules
dist
coverage

.eslintrc.js

eslint 配置文件

module.exports = {
  env: {'node': true},
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint',],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {'object-curly-spacing': ['error', 'always'],
    'array-bracket-spacing': ['error', 'never'],
    'quotes': ['error', 'single'],
    'no-console': ['error'],
  }
};

对于 eslint 的配置曾经有不少好文,感兴趣的能够看看这篇文章。

相干文章:

  • ESLint 配置文件.eslintrc 参数阐明

.gitignore

提交代码时,须要疏忽一些文件时,该配置就很有用了

/node_modules
/dist
/dist-test
/.nyc_output
/coverage
.vscode

.npmignore

当须要公布 npm 包时,能够疏忽一些不须要公布到 npm 的文件。

/node_modules
/dist-test
/src
/docs
/test
/.travis.yml
/tsconfig.json
/tsconfig-test.json
/.nyc_output
/coverage

.travis.yml

一个继续集成服务的配置文件

language: node_js
node_js:
  - lts/*
  - 14
  - 13
  - 12
  - 11
  - 10
script:
  - npm run lint
  - npm test
  - npm run coverage

对于继续集成服务,看看阮一峰老师的这篇文章就够了。

相干文章:

  • 继续集成服务 Travis CI 教程

CODE_OF_CONDUCT.md

第一次留神到这个文件,搜了相干材料,原来是行为准则。看了篇博文也理解其作用。行为准则对开源社区的衰弱、可继续倒退有着至关重要的影响。

相干文章:

  • 行为准则

CONTRIBUTING.md

奉献指南,后面已提过。

LICENSE

开源许可证,受权别人与特定权力来应用的产品。避免那些拿来主义。怎么抉择开源许可证,在这里借用下阮一峰老师的一张图。

相干文章:

  • 如何抉择开源许可证?

README.md

该作者的一份 README.md 根本涵盖了之前提到的 docs 的所有内容,很简洁,跟代码一样简洁😄😄

jest.config.js

单元测试配置文件,这也是我所欠缺的,之后会具体学习一下。

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  coverageDirectory: 'coverage',
  collectCoverage: true,
  testMatch: ['**/test/**/*.ts'],
  verbose: true,
  collectCoverageFrom: ['**/src/**/*.ts'],
  testPathIgnorePatterns: ['dist.*\\.ts$']
}

相干文章:

  • Jest 中文文档

package-lock.json

简略了解,为了锁定第三方包的版本号,因为我的项目会依赖大量第三方包,第三方包也会依赖其余第三方包,当包更新了不兼容的 api 时,在执行 npm install 之后,我的项目运行时,可能会产生意想不到的状况。

相干文章:

  • npm 语义化版本控制
  • package-lock.json 和 yarn.lock 的包依赖区别

package.json

作为前端人,都再相熟不过,分享几个不常见,但很要害的配置:

指定 node 版本号:

{
  "engines": {"node": ">=8 <14"}
}

指定 npm 版本:

{
  "engines": {"npm": "~1.0.20"}
}

如果你打算公布一个 npm 包,files 字段可能会有用,指定公布到 npm 中的文件

钩子,npm 脚本有 prepost 两种钩子。其作用执行某些非凡命令是触发自动化脚本,例如:

  • build 之前删除 dist
  • publish 之前跑单元测试并打包我的项目
"scripts": {
    "clean": "shx rm -rf dist",
    "prebuild": "npm run clean",
    "build": "tsc -p .",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "coverage": "cat ./coverage/lcov.info | coveralls",
    "prepublish": "npm test && npm run build",
    "docs": "docsify serve docs --open"
  },

相干文章:

  • package.json 详解
  • 你不晓得的 package.json

renovate.json

一种似曾相识的感觉,是它,就是它。

Renovate 是一个开源工具,用于自动化:

  • 检测存储库中的依赖项(开源和公有 / 闭源)
  • 查看是否有依赖更新
  • 创立提交和合并 / 拉取申请以更新依赖项
  • ……

tsconfig.json

当应用 typescript 开发我的项目时就会用到该配置文件。

相干文章:

  • tsconfig.json 配置详解

总结

除源码和单元测试之外,对其余文件的用处都做了阐明,做开源不易,当咱们信手拈来之时,这些开源我的项目作者付出了太多。一群来自世界各地的人,共同完成一件事,除了专业技能之外,看到更多的是一种态度。

参考文章:

  • ESLint 配置文件.eslintrc 参数阐明
  • 继续集成服务 Travis CI 教程
  • 行为准则
  • 如何抉择开源许可证?
  • npm 语义化版本控制
  • package-lock.json 和 yarn.lock 的包依赖区别
  • package.json 详解
  • 你不晓得的 package.json
  • tsconfig.json 配置详解

正文完
 0