发布一个持续集成的npm包并加上装逼小icon-CSDN博客

前言

随着入坑时间的增长，很多小伙伴在使用第三方轮子时不满足于下载xxx.js，script标签引入xxx.js，然后使用轮子的原始方式。想要高大上一点，于是小伙伴们跟npm邂逅了。后来有的小伙伴又想发布自己npm包，但是要怎么做呢？本文就手把手教你发布一个npm包，并加上装逼小icon。什么？你不知道装逼小icon？？？

就这货，现在知道了吧？

这货干嘛的？简单说拥有这个标签证明你的项目基本上是一个靠谱的项目，毕竟是一个持续集成的项目并且经过了测试了（travis中一般都会写测试脚本，通过测试了才会有这个徽章，travis详见后文）。啥？啥是持续集成？怎么弄？不会啊！别急，往后看。

修正： 经读者朋友指正，重新说一下，这个小icon是有名字的，人家叫做 badage !
复制代码

准备工作

你需要安装 node 。你需要有一个 github 账号。并且你的项目已经推送到了github。（不是必须，但是你想用我教你的方法加上小icon就得这么做哦，后面就知道了。）你需要有一个 npm 账号。注册npm 如果没有账号，先去注册吧。哦对了，你还要写好你想要上传的项目。

package.json

package.json里面的一些东西是需要配置好的，本文以注释的形式说明一下


{
  "name": "jq-selector",//你的npm包的名字，你发布成功之后，下载时打的名字
  "version": "1.0.0",//你的版本号，具体规则后面会说
  "description": "",
  "main": "./dist/prod/jq-selector.js",//你的包的主要入口，就是别人安装了你的包，require('jq-selector')时会去这个路径找代码
  "scripts": {//一些你开发时的脚本
    "test":'',//这里是你的测试脚本文件，使用travis持续集成时，默认会跑这里的测试脚本。关于测试脚本，这里不做描述，以后会专门写一篇介绍。
    "lint": "eslint ./src",
    "server": "export type=development&&webpack-dev-server",
    "dev-build": "export type=development&&webpack",
    "prod-build": "export type=production&&webpack"
  },
  "author": "qxchen",
  "license": "ISC",
  //...后面都是项目相关的配置项，此处省略
  }


复制代码

版本号

主版本号：当你做了不兼容的API 修改。次版本号：当你做了向下兼容的功能性新增。修订号：当你做了向下兼容的问题修正。

开始发布

前面你已经注册了npm账号，这里就可以用这个号来发布了。但是npm怎么知道你要用什么号发布呢？需要一条命令来告诉它你的账号和密码。

npm adduser
复制代码

在接下来的几行命令行中输入你的账号密码以及注册时填写的邮箱。

现在我们可以开始发布了，在项目根目录执行命令：

npm publish
复制代码

这时 npm 就会读取你package.json里面的配置来进行发布。

有的小伙伴到这里就报错了。有很大一部分都是 E401 错误。这里我来告诉大家绝大多数的原因都是啥。

踩坑和填坑

回想一下，曾几何时，刚接触npm时，等了几十分钟乃至数个小时也无法安装成功依赖包，然后你是不是做了一件事，把源切换到了淘宝。。。

这里就要切换回来，不建议手动去修改配置文件，不是很智能，这里有一个别人做好的轮子，专门来做源切换这件事。执行命令

npm install -g nrm
复制代码

之后执行 nrm ls

结果是这样的


* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

复制代码

如果你的星号 *在淘宝那里，这可能就是发布失败的原因了，请执行命令：

nrm use npm
复制代码

这时你的源就切回来了。

然后再次执行

npm publish
复制代码

如果同样还是 E401 错误，就干脆全弄干净来一遍。具体操作如下：

1、请删除 .npmrc （后面说一下这个文件在哪）文件的全部内容。

2、执行 nrm use npm

3、执行 npm adduser ，重新填入你的账号密码和邮箱。需要注意的是，上面三个步骤的顺序最好不要改，不然你可能折腾几次就不好使。一定要，先清空，在切源，再添加账号。

关于.npmrc 的路径。macOS系统在 ~/.npmrc 。你可以 vi ~/.npmrc ，如果不会用vim的小伙伴可以 open ~/.npmrc ，或者查一下vim基本操作。只做编辑和删除的话还是很简单的，学习成本五分钟。其他系统该文件的路径小伙伴们百度一下吧~

回归正题，再次发布，npm publish ，终于没有 E401 啦，不过有的小伙伴又出现了新的错误！还是 E401 。

怎么这么多坑？！是的就是这么多坑！不过仔细想一想，也不是坑，人家都说的很清楚了。原因很大可能是你注册npm账号的时候忘记了验证自己的邮箱。回到npm网站，登录你的账号，页面最顶部会有醒目的黄黄的提示，你需要验证你的邮件。验证完了再发布吧！这下应该就木有问题了！

持续集成与装逼小icon

啥？啥是持续集成？百度一下啦。一搜索一坨，不过他们的答案都是一模一样的，互相复制而已。我先给大家看一下复制的内容然后再大白话简单说一下它是个什么玩意。

广为流传的复制内容

开源项目多如牛毛，从中找出靠谱的项目需要花费一定的精力，开发者都会对持续更新，并且经过测试（很多公司采用）的项目更加的信赖，对于刚上线并且用户数量很少的项目开发者都会有个疑虑：这项目靠谱吗？所以你需要对自己的项目打上一个标识：老子的项目靠谱。如何做？持续集成。

目前Github已经整合了持续集成服务travis，我们只需要在项目中添加.travis.yml文件，在下一次push之后，travis就会定时执行npm test来测试你的项目，并且会在测试失败的时候通知到你，你也可以把项目当前的状态显示在README.md中，让人一目了然，比如：

大白话

上面那段话在我搜索'如何发布npm'的时候至少在四篇文章里面看到了同样的版本。但是我理解能力比较差，根本不懂，后来寻思半天才弄明白。其实就是给你项目打上一个标签，告诉别人，我的项目时经过构建测试的，是持续更新的。如果有其他标签，也是告诉别人，我的项目在这些标签所指的系统、环境、语言等等下面都是经过测试的木有问题的。

那 经过测试的 这件事上哪里去做呢？怎么做呢？你可以手动测试，然后告诉别人我测了，并给自己做一张图，当做标签贴在上面，说：我真的测了，而且通过了。当然这样显然是不行的，科学的，你应该写一些单元测试，使用一些测试框架什么的。

但是即使你这样做了，流程还是很麻烦。因为你每次部署代码，都要手动去跑测试。你的工作流程大概是这样的：

写完代码 -> 构建打包 -> 跑测试 -> 测试通过 -> 部署

如果你项目迭代频率非常高，那么上面的五个步骤你要反复做。这里你就可以用到持续集成这个概念了：

~~能不能找个人来帮我做后面四个步骤。我只需要写代码就行了？~~

能不能找个人来帮我做后面四个步骤。我只需要写代码、写测试就行了？

经读者指正，这里再准确地说明一下。
travis 只是帮忙构建，帮忙执行测试命令。但是测试还是需要你自己写的哦！以后我会写一篇前端测试的入门，详细说一下！
复制代码

谁来做这件事呢？有很多，不过有一个大家公认的并且已经整合到github的帮手可以帮你做这件事，它叫：

travis
复制代码

网址： travis-ci.org/

travis

上面已经知道了这个装逼小icon是啥了，持续集成是啥了，现在该学一下怎么做了。伙伴们不用怕，这里只说最简单的，很快就学会。就可以加上装逼小icon了。

首先，在你的项目里创建一个文件叫做 .travis.yml 带点儿的哦，别忘记打点儿。

啥？啥是yml？其实就是一种文件格式，这种格式文件对应 YAML 语言，这个语言专门用来写配置文件的。完全用缩进来进行父子级包含，省略了json的大括号冒号和双引号，语法非常简洁。想要深入了解的可以去阮大大的博客看一下 YAML 语言教程

文件创建完了？我们要开始写这个配置文件了。我们刚才说了，要找一个人或者工具来帮助你进行构建，我们找到了 travis 。但是他毕竟是个工具，一坨代码，没有脑子，你必须告诉他一个工作流程，他才会根据你的流程去进行构建。这个yml配置文件就是来告诉 travis 工作流程的。

我举个例子，之前自己写了个简单的下拉框插件，放在了github，并且发布了npm，看看我这个里面yml怎么写的你就知道啦~~。


    language: node_js # 你用啥语言？这里node
    node_js:
      - '8' # 你想在哪个版本的node下运行你的代码？这里是node 8
    # 我们这里写一个构建的流程，测试一下我这个项目在node8环境下能否构建成功
    install: # 安装依赖环境
      - npm install
    script: # 你要执行的脚本，构建当然是npm run build啦 
      - npm run build
    branches: #构建哪些分支？master
      only:
        - master

复制代码

更多语法请访问：docs.travis-ci.com/

到这里呢，配置文件已经写完了。然后你登录 travis 的官网 travis-ci.com/ 进去之后你可以注册一个账号，这里建议不要注册了，直接点击右上角 sign in with GitHub 因为这样登陆进去之后你的 travis 这边会直接拉去你github账号下面的项目，你可以直接跑，很方便的。具体操作如下：

当你第一次进入 travis 网站的时候会是类似这样的一堆开关，因为我找不到第一次进入的界面了，所以盗用了阮大大的图：

只要把你想要构建的项目打上勾勾就可以啦~ 好了我们现在回到我们的代码。但是不要关闭网页，一会儿还要回来看它是怎么测试的呢。commit一下然后提交到github。推送成功之后我们回到 travis 的页面，刷新一下。你会发现你刚才push的代码正在跑！如果你会来的快，甚至可以看到构建的log在不断的更新，是不是很神奇？我们来看它都做了些什么。

上面是所有的log。我来提取有用信息，来看一下我们刚才的yml文件里面配置的事情都做了没有。


$ nvm install 8
Downloading and installing node v8.9.4...
Downloading https://nodejs.org/dist/v8.9.4/node-v8.9.4-linux-x64.tar.xz...
Computing checksum with sha256sum
Checksums matched!
Now using node v8.9.4 (npm v5.6.0)
$ node --version
v8.9.4
$ npm --version
5.6.0
$ nvm --version
0.33.8
...

...

$ npm install
3.19s
$ npm run prod-build
复制代码

看，我们制定了node8环境，travis就先安装了node 8 。接着又执行了我们制定的install命令和构建命令。并且最后并没有异常，于是你的项目上面就有了一个小图标。

好了，现在，你可以把这个图标添加到你的 README.md 文件中了。怎么添加？复制地址就可以了，具体操作如下：

在刚才的 travis 网站你构建的项目下，点击名字边上的icon，会出现一个选择框。

把第二个选择框的内容选成 Markdown,之后就会给你一个markdown的代码，直接粘贴到README里面就行啦~。

有小伙伴说，忙活一大顿，这个图标不是很好造假吗，我直接贴一个图进去不也是一样的吗？不是的！这个图片是带连接地址的哦，点击图片可以跳转到你跑测试的页面，是真是假人家点一下就知道了！

补充，tarvis，会默认执行你package.json中 scripts.test中的命令来跑测试，所以就不用手动去做这件事了。只需要写好测试脚本。每次push代码的时候，构建、测试、部署都可以自动进行了！
复制代码

travis 踩坑

有的同学 travis 里面可能会遇到问题，就是拉取不道你github里面的项目，总显示“没有任何可获取的项目”，解决办法是你去你的github，取消对travis的授权，然后重新登录 travis 就好了。

尾声

我也是个菜鸟，有不对的地方请指出。我会积极修正，接受批评。最后，写了这么多，如果对你有帮助，给个喜欢吧。