Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

从0开始发布一个无依赖、高质量的npm #12

Open
wusb opened this issue May 20, 2018 · 1 comment
Open

从0开始发布一个无依赖、高质量的npm #12

wusb opened this issue May 20, 2018 · 1 comment
Labels
NPM

Comments

@wusb
Copy link
Owner

wusb commented May 20, 2018 •
edited
Loading

写在前面

没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，我想应该挺难的，就小声说了没有，然后就让我回去了o(╯□╰)o。

其实，在现在的我看来，npm包就是一个我们平时经常写的一个export出来的模块而已，只不过跟其它业务代码耦合性低，具有较高的独立性。

当然，要发布一个npm包，除了写的模块组件外，还需要做一些基础的包装工作。下面我就以最近开发的「DigitalKeyboard 数字键盘 NPM」 为例，一一列出具体步骤：

  1. 写基础模块代码；
  2. 注册npm账号；
  3. 配置package.json；
  4. 配置webpack；
  5. 添加单元测试；
  6. 完善README.md；
  7. 发布

1、2、3足可以完成一个npm，4、5、6是为了开发一个高质量的npm。

开始

具体代码移步github，请反手 给个 ★ Star ^_~。完整目录结构如下：

├── LICENSE
├── README.md
├── build
│   └── Keyboard.js
├── config
│   └── webpack
│       ├── webpack.base.config.js
│       ├── webpack.config.js
│       ├── webpack.dev.config.js
│       └── webpack.prod.config.js
├── index.html
├── package.json
├── src
│   ├── Keyboard.js
│   ├── Keyboard.scss
│   └── main.js
├── test
│   └── Keyboard.test.js
└── yarn.lock

基础模块代码

现在只需要看src目录下的三个文件。其中，main.js 主要是对将要开发模块的引用，只需存在于开发阶段，同时作为此阶段webpack的入口文件，核心代码在Keyboard.js。

这里，主要用的是ES6的class和export default，Keyboard的核心思想就是点击哪个键就对外输出什么内容，实现也比较简单，大家都能看得懂，这里就不展开讲了，具体可以看github 源码。

注册npm账号

这一步也不用说，大家直接去官网注册就好了。

配置package.json

{
  "name": "digital-keyboard",
  "version": "1.0.0",
  "main": "build/Keyboard.js",
  "repository": "https://github.com/simbawus/DigitalKeyboard.git",
  "author": "simbawu <connect@simbawu.com>",
  "description": "DigitalKeyboard Component",
  "keywords": [
    "DigitalKeyboard",
    "Digital",
    "Keyboard",
  ]
}

此时的配置文件也比较简单，只需配置npm包名，准备用的名字现在npm搜索一下，已经存在的就不能用了；版本号version，每次发布版本号都需要更新，不然发布不成功；对外export的文件路径，这里我用的是webpack打包后的文件，如果不用webpack，直接引用src/Keyboard.js也可以，只不过要做模块化方式兼容，这个后面说。也可以放上项目所在github地址及作者名，description和keywords比较利于SEO，不过这些都不是必需项。

到这里，一个npm包就开发完成了，直接发布即可使用。但是，略显粗糙：代码压缩、单元测试、readme都没写，别人不知道怎么用也不敢用。下面一步步完善。

配置webpack

这里用的是最新版的webpack4，官方提供production和development两种开发模式，并分别做了默认压缩处理，非常适合这里。有两点要特别说明下：

  • libraryTarget: 'umd'

    umd有的同学可能不是太熟悉，但是cmd、amd大家应该都知道，分别应用于服务端和浏览器端的模块方案。umd就是前面提到的模块化方式兼容。感兴趣可以参考我的另一篇文章JavaScript Module 设计解析及总结。

  • production和development的entry不一样：

    development的entry是main.js，而production的entry是Keyboard.js。前面说过，开发阶段需要有对模块的引用，但是正式发布就不需要了，所以要分别配置。

其他就不展开讲了，我的webpack配置结构很清晰，欢迎大家直接copy。

├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js

添加单元测试

大家经常看到很多不错的项目都有Build Status，这就像一个证明可用性的证书，给人安全感和信任感，所以添加单元测试，还是很有必要的，同时也可以提高代码质量。先介绍需要用到的几个概念：

mocha：测试框架；

chai：断言库，断言通俗来讲就是判断代码结果对不对；

jsdom：node端是没有js dom对象的，比如window、document等等，所以需要这个库提供；

istanbul：代码覆盖率计算工具；

coveralls：统计上面的代码测试覆盖率工具；

travis-ci：自动集成，比如master代码push到github上之后，travis-ci就会自动进行自动化测试。

这里介绍下jsdom的用法，当时按照几个文档来都跑不通：

const {JSDOM} = require('jsdom');
const {window} = new JSDOM(`<!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
      <meta name="author" content="吴胜斌,simbawu">
      <title>数字键盘</title>
  </head>
  <body>
  <div id="values"></div>
  <div id="app"></div>
  </body>
  </html>`);

propagateToGlobal(window);

function propagateToGlobal(window) {
  for (let key in window) {
    if (!window.hasOwnProperty(key)) continue;
    if (key in global) continue;
    global[key] = window[key];
  }
}

首先引入jsdom，然后构造一个document，并引入其中的window对象然后一一赋值给node的global对象。其实也很简单，只不过第一次接触，而且找的文档写的也不清楚，所以花了点时间。其他几个文档都还不错，可以看看文档再看看我是怎么用的。此时的package.json就很很丰富了，可以执行yarn test和yarn cover看看测试是否通过及测试覆盖率。

完善README.md

一个好的readme是决定用户用不用你项目的关键因素，所以要多花点心思，千万不能忽略。

  • 标题：直观的描述这个项目是干什么的。
  • 徽章：
    Build Status
    Coverage Status
    npm
    npm
    GitHub license
    分别表示是否构建成功、代码测试覆盖率、npm版本号、下载量、开源证书，看起来逼格满满有木有。推荐去shields io 添加，生成一次，之后会自动更新，不过需要等npm发布后才能搜到。
  • 配图：要让用户直观的看到这个组件长什么样，是否满足他的需求。
  • API介绍：不能让用户猜。
  • 使用示例：尽量降低使用门槛。

发布

#先登录NPM账号：
npm login

#会依次让你输入用户名、密码、和邮箱
Username: simbawu        
Password:
Email: (this IS public) wsbin610@163.com

#登录成功会出现以下提示信息：
Logged in as simbawu on https://registry.npmjs.org/.

#执行发布命令：
npm publish

#发布成功后会出现以下提示信息：
+ digital-keyboard@1.0.0
#这里digital-keyboard是我的NPM包名，1.0.0是包的版本号

接下来，我们可以在npm官网，通过搜索包名或者在个人中心看到刚刚发布的包。

欢迎讨论，点个赞再走吧～

本文首发于github，欢迎Follow、Watch 和 Star ｡◕‿◕｡
@wusb wusb added the NPM label May 20, 2018
@wusb wusb changed the title 手把手教你发布一个无依赖多类型高质量的键盘npm包 从0开始发布一个无依赖、高质量的键盘npm包 May 21, 2018
@wusb wusb changed the title 从0开始发布一个无依赖、高质量的键盘npm包 从0开始发布一个无依赖、高质量的npm May 22, 2018
@shuangmianxiaoQ shuangmianxiaoQ mentioned this issue Mar 17, 2019
Open
@yt253284494
Copy link

总结得不错，提一个小建议，如果后续代码越来越多了，babel 配置是不是可以更精细一点？

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
NPM
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@wusb @yt253284494