本文使用 Zhihu On VSCode 创作并发布

前言： 工作中开发项目，我从来都是使用别人发布的第三方依赖，平时很好用，但是项目做多了偶尔也会遇见小众 npm 包不能满足需求，需要定制化的情况，往往是封装成函数，可能因为工作经历较浅，从没想把方法在定制化一下，提出来发布到 npm 上。昨天终于漫出了勇敢的一步。发布了一个给 React 脚手架 craco 用的 CSS 预处理器全局话插件。 craco-plugin-style-resources-loader

一、注册 npm

注册很简单，常用两种方法：

1. 可以在官网注册npmjs.com
2. 命令行注册: npm adduser

注册流程常规操作，需要注意的是，要想发布 (publish) 包，注册填写的邮箱不需要验证。不过 npm 有个坑爹的地方，设置头像听马房的，不是简单的上传，需要跳转到另一个网站，一顿操作，差点我都给放弃了哈哈哈 。

二、认识 package.json

新建一个项目文件夹，例如名称为 my-test 的项目文件夹，使用 yarn init -y 或 npm init --yes 命令初始化后，在项目目录下会新增一个 package.json 文件，内容如下：

{
    "name": "my-test", // 项目名称
    "version": "1.0.0", // 项目版本（格式：大版本.次要版本.小版本）
    "description": "", // 项目描述
    "main": "index.js", // 入口文件开发者在 import 的时候，会引入 main 字段指定文件中 export 的内容。
    "scripts": { // 指定运行脚本命令的 npm 命令行缩写
        "test": "echo "Error: no test specified" && exit 1"
    },
    "keywords": [], // 关键词
    "author": "", // 作者
    "license": "ISC" // 许可证
}

以上截取：重新认识 package.json

补充：

1. author 和 contributors 的用法

"author": "name email url",
"contributors": [{
	"name": "name",
	"email": "email",
	"url": "url"
}]

author 和 contributors 字段的功能类似。author 适用于个人开发者，contributors 适用于多人协作开发。

1. peerDependencies 偶尔看项目会遇到这个，它主要是解决兼容的问题，例如：我们通过这个属性可以告诉要使用我们这个模块的人，如果你要使用我， 最好把 xxx1, xxx2 也带上， 不然我可能会给你带来麻烦的。

"peerDependencies": {
        "xxx1": "1.0.0",
        "xxx2": "1.0.0",
    }

这样在装包的时候同时也会， 带上 xxx1 和 xxx2 这两个包。

参考：探讨npm依赖管理之peerDependencies

1. 拿到 package.json 里面的变量：

这个很有用，模仿 cross-env，可以用来指定开发环境为 dev 或 prod，例如：

package.json：How npm handles the "scripts" field

{
	"name": "redis_study",
	"version": "1.0.0",
	"scripts": {
		"test": "node app.js"
	}
}

npm run test 运行，在 app.js 可以通过：

console.log(process.env.npm_package_name, process.env.npm_package_version);

1. 聊聊 package.json 文件中的 module 字段 很重要的一篇文章，里面有一个特重要的知识点 tree-shaking 的原理，讲的简单明了。
2. bugs | homepage | repository

• bugs github issues 页面地址
• homepage github 库地址，这个链接会被放在 npm 页面和很多其他地方。
• repository 源码地址，字符穿类型，如果是开源的项目，可以加上 git clone 地址，例如：

"repository": {
    "type": "git",
    "url": "git+https://github.com/condorheroblog/craco-plugin-style-resources-loader.git"
}

以上全面了解之后，package.json 里面其他的字段可以在这里速查 NPM Package.json 字段列表(包括非官方字段)

三、项目徽章的添加和设置

一般项目的 README.md 是使用 markdown 语法写的，当然 github 还比较特殊一点，他还支持简单的 html，所以你会看到 github 页面 README.md 视觉效果比纯 markdown 写的丰富点。但是有个东西还是很值得研究的，就是项目徽章的添加和设置，看一下 Vue 的项目 badge。

这东西的本质：就是一个 svg 式的图片（前端都懂哈 ），还可以点击，点击效果是使用 markdown 语法写的超链接。当然在github 你还可以使用 a 标签配合 img 标签实现。类似这样：

![craco-plugin-style-resources-loader](https://github.com/condorheroblog/craco-plugin-style-resources-loader/blob/master/index.jpg) markdown 语法放置一个简单的图片
[![craco-plugin-style-resources-loader](https://github.com/condorheroblog/craco-plugin-style-resources-loader/blob/master/index.jpg)](https://raw.githubusercontent.com/condorheroblog/craco-plugin-style-resources-loader) markdown 语法给图片加上超链接


a 标签配合 img 标签实现
<a href="https://www.npmjs.com/package/craco-plugin-style-resources-loader"><img src="https://img.shields.io/badge/craco--plugin--style--resources--loader-v1.0.0-brightgreen"></a>

我发现讲这东西的 blog 还真不多，估计大家和我一样都太菜没心思去研究，大 又没那个时间。不过还是有人去写的，我来整合下：

1. 不同的 badge 都有什么作用？

我开始以为 badge 只是好看，研究了下才发现里面还是有点门道的，介绍点常用的。

• 对比图标

和

图标你会发现一个蓝不啦叽的，一个橙不啦叽的。图标表示该库在 npm 的版本号，而不同的颜色，使人一眼就能区分出，哪个是正式版（蓝色图标）哪个是非正式版（橙色图标）。

属于 Analysis 分类即持续集成.

持续集成：频繁的（一天多次）将代码集成到主干。他的目的就是让产品可以快速迭代，同时还能保持高质量。

一个自动化的可持续集成网站：https://travis-ci.org
另外阮老师写过一篇文章介绍： http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html

属于 Code Coverage 分类即代码覆盖率。
代码覆盖率：指在运行测试用例后，一共走过了多少句代码，用走过的这个代码除以测试对象的代码行数，就是这次测试的代码覆盖率了。

好了，难理解的就上面这几个，剩下的一些图标就非常语义化了，一看就懂的就不介绍了，可是试着去 github 搜几个项目看看他们的 README.mk 文件。

1. 如何使用 Shields 网站来制作 badge制作 badge 的网站非常多，但是只有 Shields 备受推荐。

Shields.io 提供了很多定制化徽章的功能，比如持续集成状态，包的上传和分发，社交网络，代码覆盖率等等。

初进这个网站我是懵逼的，网站实在是太简单了， ，隔了一天才算弄明白怎么玩的，熟悉了你就会发现，我咔咔，真香，一起过一遍。先看第一张截图：

search/project URL 这个地方是放 github 项目链接的，比如我的项目地址是 https://github.com/condorheroblog/craco-plugin-style-resources-loader ，地址填写正确会出现 suggest badge 按钮，点击按钮出现下图。

看见没，这下清晰明确了吧，根据 github 动态生成的 badge 链接 。此时如果我们随便点击一个生成的链接，还能更加进行精确的控制生成 badge 的样式，比如我点击 GitHub issues 的链接出现下图：

下面 就是 badge 的分类了，这个是主菜，例如我们发布库的版本，不可能手动去生成静态图片，必须是自动生成滴。如何制作呢，我们需要手动点击 Version 关键字，进入之后看到如下截图内容：

找到，npm 使用样例，进入生成我们的版本号：

我生成的长这样：

。

其他分类的 badge 使用方法类似，不知道你学会了吗。我们继续回到 shields 首页继续往下看 。

生成静态的 badge：

带 logo 的 badge：

好了，到此你已经会制作 github 上出现所有的 badge。

四、发布到 npm

顺便整理了下我常用的 npm 命令：

npm 版本相关的知识：

npm 采用语义化版本 about-semantic-versioning，版本号一共有三位，以 . 隔开，从左至右依次代表：主版本（major）、次要版本（minor）、补丁版本（patch）。

例如：1.0.0 major.minor.patch

关于版本变更规范：

变更版本号的命令：npm version <major | minor | patch>

假如我们本次是补丁版本要发布，除了手动去修改 package.json 文件的 version 字段，我们还以执行命令：

npm version patch 

来自动生成。

好了，来看看如何发布到 npm 上，命令行执行命令：

➜  craco-plugin-style-resources-loader git:(master) npm login # npm login 登陆 npm logout 退出登陆
Username: xxxxx # 输入 npm 用户名
Password: # 输入密码
Email: (this IS public) xxxxxx@gmail.com # 输入邮箱 
Logged in as condorhero on https://registry.npmjs.org/.
➜  craco-plugin-style-resources-loader git:(master) npm publish # 直接发布
npm notice 
npm notice    craco-plugin-style-resources-loader@0.0.2
npm notice === Tarball Contents === 
npm notice 79B    .eslintrc   
npm notice 1.1kB  LICENSE     
npm notice 47.8kB index.jpg   
npm notice 3.3kB  index.js    
npm notice 1.2kB  package.json
npm notice 4.6kB  README.md   
npm notice === Tarball Details === 
npm notice name:          craco-plugin-style-resources-loader     
npm notice version:       0.0.2                                   
npm notice package size:  47.2 kB                                 
npm notice unpacked size: 58.1 kB                                 
npm notice shasum:        0a5df4ffcf83623e19ebe7f68b6333c929f4d081
npm notice integrity:     sha512-FzxI0dpD8H5+/[...]rrQa6yVbYPAjQ==
npm notice total files:   6                                       
npm notice 
+ craco-plugin-style-resources-loader@0.0.2 # 发布成功
npm unpublish packagename --force # 慎用，强制删除已经发布的包，删除之后 24h 才能再次提交，亲历 
npm unpublish 包名@版本号 --force # 慎用，强制删除已经发布的版本

五、最后

明天就是国庆节了，今天是放假前的最后一天班了，放假从来都是假前前一天最凄凉。

更刺激的是老板通知下午三点就可以离开了

完。

当前时间 Wednesday, September 30, 2020 15:38:13