We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
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
没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，我想应该挺难的，就小声说了没有，然后就让我回去了o(╯□╰)o。
其实，在现在的我看来，npm包就是一个我们平时经常写的一个export出来的模块而已，只不过跟其它业务代码耦合性低，具有较高的独立性。
export
当然，要发布一个npm包，除了写的模块组件外，还需要做一些基础的包装工作。下面我就以最近开发的「DigitalKeyboard 数字键盘 NPM」 为例，一一列出具体步骤：
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 源码。
class
export default
这一步也不用说，大家直接去官网注册就好了。
{ "name": "digital-keyboard", "version": "1.0.0", "main": "build/Keyboard.js", "repository": "https://github.com/simbawus/DigitalKeyboard.git", "author": "simbawu <[email protected]>", "description": "DigitalKeyboard Component", "keywords": [ "DigitalKeyboard", "Digital", "Keyboard", ] }
此时的配置文件也比较简单，只需配置npm包名，准备用的名字现在npm搜索一下，已经存在的就不能用了；版本号version，每次发布版本号都需要更新，不然发布不成功；对外export的文件路径，这里我用的是webpack打包后的文件，如果不用webpack，直接引用src/Keyboard.js也可以，只不过要做模块化方式兼容，这个后面说。也可以放上项目所在github地址及作者名，description和keywords比较利于SEO，不过这些都不是必需项。
到这里，一个npm包就开发完成了，直接发布即可使用。但是，略显粗糙：代码压缩、单元测试、readme都没写，别人不知道怎么用也不敢用。下面一步步完善。
这里用的是最新版的webpack4，官方提供production和development两种开发模式，并分别做了默认压缩处理，非常适合这里。有两点要特别说明下：
libraryTarget: 'umd'
umd有的同学可能不是太熟悉，但是cmd、amd大家应该都知道，分别应用于服务端和浏览器端的模块方案。umd就是前面提到的模块化方式兼容。感兴趣可以参考我的另一篇文章JavaScript Module 设计解析及总结。
umd
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
大家经常看到很多不错的项目都有，这就像一个证明可用性的证书，给人安全感和信任感，所以添加单元测试，还是很有必要的，同时也可以提高代码质量。先介绍需要用到的几个概念：
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看看测试是否通过及测试覆盖率。
yarn test
yarn cover
一个好的readme是决定用户用不用你项目的关键因素，所以要多花点心思，千万不能忽略。
#先登录NPM账号： npm login #会依次让你输入用户名、密码、和邮箱 Username: simbawu Password: Email: (this IS public) [email protected] #登录成功会出现以下提示信息： Logged in as simbawu on https://registry.npmjs.org/. #执行发布命令： npm publish #发布成功后会出现以下提示信息： + [email protected] #这里digital-keyboard是我的NPM包名，1.0.0是包的版本号
接下来，我们可以在npm官网，通过搜索包名或者在个人中心看到刚刚发布的包。
本文发布于薄荷前端周刊，欢迎Watch & Star ★，转载请注明出处。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
写在前面
没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，我想应该挺难的，就小声说了没有，然后就让我回去了o(╯□╰)o。
其实，在现在的我看来，npm包就是一个我们平时经常写的一个
export出来的模块而已，只不过跟其它业务代码耦合性低，具有较高的独立性。当然，要发布一个npm包，除了写的模块组件外，还需要做一些基础的包装工作。下面我就以最近开发的「DigitalKeyboard 数字键盘 NPM」 为例，一一列出具体步骤：
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 <[email protected]>", "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
添加单元测试
大家经常看到很多不错的项目都有
，这就像一个证明可用性的证书，给人安全感和信任感，所以添加单元测试，还是很有必要的，同时也可以提高代码质量。先介绍需要用到的几个概念：
mocha：测试框架；
chai：断言库，断言通俗来讲就是判断代码结果对不对；
jsdom：node端是没有js dom对象的，比如window、document等等，所以需要这个库提供；
istanbul：代码覆盖率计算工具；
coveralls：统计上面的代码测试覆盖率工具；
travis-ci：自动集成，比如master代码push到github上之后，travis-ci就会自动进行自动化测试。
这里介绍下jsdom的用法，当时按照几个文档来都跑不通：
首先引入jsdom，然后构造一个document，并引入其中的window对象然后一一赋值给node的global对象。其实也很简单，只不过第一次接触，而且找的文档写的也不清楚，所以花了点时间。其他几个文档都还不错，可以看看文档再看看我是怎么用的。此时的package.json就很很丰富了，可以执行
yarn test和yarn cover看看测试是否通过及测试覆盖率。完善README.md
一个好的readme是决定用户用不用你项目的关键因素，所以要多花点心思，千万不能忽略。
分别表示是否构建成功、代码测试覆盖率、npm版本号、下载量、开源证书，看起来逼格满满有木有。推荐去shields io 添加，生成一次，之后会自动更新，不过需要等npm发布后才能搜到。
发布
接下来，我们可以在npm官网，通过搜索包名或者在个人中心看到刚刚发布的包。
广而告之
本文发布于薄荷前端周刊，欢迎Watch & Star ★，转载请注明出处。
欢迎讨论，点个赞再走吧 ｡◕‿◕｡ ～
The text was updated successfully, but these errors were encountered: