手把手教你发布一个无依赖、高质量的 npm 包「实践篇」(三把手)

手把手教你发布一个无依赖、高质量的 npm 包「实践篇」(三把手)

作者:吴胜斌

转发链接:}

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

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

在这里小编之前也发布过几篇关于Npm和package.json知识点文章:

细品Npm 依赖处理的进化史

npm包如何进行版本管理?

前端工程化 - 深度详解npm的包管理机制「完整版」

深入浅出一张图解析package.json文件

手把手教你重新认识 package.json「干货」

更多的相关学习文档请见本篇文章最底部,小编从不骗人。

当然,要发布一个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(}

├── 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": "}

到这里,一个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的用法,当时按照几个文档来都跑不通:

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是决定用户用不用你项目的关键因素,所以要多花点心思,千万不能忽略。

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

#先登录NPM账号:npm login#会依次让你输入用户名、密码、和邮箱Username: simbawu        Password:Email: (this IS public) wsbin610@163.com#登录成功会出现以下提示信息:Logged in as simbawu on }

推荐Npm、Package.json、Webpack、Vue知识点文章细品Npm 依赖处理的进化史

npm包如何进行版本管理?

前端工程化 - 深度详解npm的包管理机制「完整版」

深入浅出一张图解析package.json文件

手把手教你重新认识 package.json「干货」

「干货」揭秘webpack插件工作流程和原理

手把手教你深入总结Webpack

玩转 webpack,使你的打包速度提升 90%

带你深度解锁Webpack系列(基础篇)

带你深度解锁Webpack系列(优化篇)

带你深度解锁Webpack系列(进阶篇)

Webpack优化总会让你不得不爱

手摸手,带你用合理的姿势使用webpack4(上)

手摸手,带你用合理的姿势使用webpack4(下)

从构建进程间缓存设计 谈 Webpack5 优化和工作原理

教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」

2020年了,再不会webpack敲得代码就不香了(近万字实战)

推荐Vue学习资料文章:《基于vue + element的后台管理系统解决方案》

《Vue仿蘑菇街商城项目(vue+koa+mongodb)》

《基于 electron-vue 开发的音乐播放器「实践」》

《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》

《消息队列助你成为高薪 Node.js 工程师》

《Node.js 中的 stream 模块详解》

《「干货」Deno TCP Echo Server 是怎么运行的?》

《「干货」了不起的 Deno 实战教程》

《「干货」通俗易懂的Deno 入门教程》

《Deno 正式发布,彻底弄明白和 node 的区别》

《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》

《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》

《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》

《深入Vue 必学高阶组件 HOC「进阶篇」》

《深入学习Vue的data、computed、watch来实现最精简响应式系统》

《10个实例小练习,快速入门熟练 Vue3 核心新特性(一)》

《10个实例小练习,快速入门熟练 Vue3 核心新特性(二)》

《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》

《2020前端就业Vue框架篇「实践」》

《详解Vue3中 router 带来了哪些变化?》

《Vue项目部署及性能优化指导篇「实践」》

《Vue高性能渲染大数据Tree组件「实践」》

《尤大大细品VuePress搭建技术网站与个人博客「实践」》

《10个Vue开发技巧「实践」》

《是什么导致尤大大选择放弃Webpack?【vite 原理解析】》

《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》

《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》

《实践Vue 3.0做JSX(TSX)风格的组件开发》

《一篇文章教你并列比较React.js和Vue.js的语法【实践】》

《手拉手带你开启Vue3世界的鬼斧神工【实践】》

《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》

《怎样为你的 Vue.js 单页应用提速》

《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》

《【新消息】Vue 3.0 Beta 版本发布,你还学的动么?》

《Vue真是太好了 壹万多字的Vue知识点 超详细!》

《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》

《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》

《手把手教你深入浅出vue-cli3升级vue-cli4的方法》

《Vue 3.0 Beta 和React 开发者分别杠上了》

《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》

《Vue3 尝鲜》

《总结Vue组件的通信》

《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》

《Vue 开源项目 TOP45》

《2020 年,Vue 受欢迎程度是否会超过 React?》

《尤雨溪:Vue 3.0的设计原则》

《使用vue实现HTML页面生成图片》

《实现全栈收银系统(Node+Vue)(上)》

《实现全栈收银系统(Node+Vue)(下)》

《vue引入原生高德地图》

《Vue合理配置WebSocket并实现群聊》

《多年vue项目实战经验汇总》

《vue之将echart封装为组件》

《基于 Vue 的两层吸顶踩坑总结》

《Vue插件总结【前端开发必备】》

《Vue 开发必须知道的 36 个技巧【近1W字】》

《构建大型 Vue.js 项目的10条建议》

《深入理解vue中的slot与slot-scope》

《手把手教你Vue解析pdf(base64)转图片【实践】》

《使用vue+node搭建前端异常监控系统》

《推荐 8 个漂亮的 vue.js 进度条组件》

《基于Vue实现拖拽升级(九宫格拖拽)》

《手摸手,带你用vue撸后台 系列二(登录权限篇)》

《手摸手,带你用vue撸后台 系列三(实战篇)》

《前端框架用vue还是react?清晰对比两者差异》

《Vue组件间通信几种方式,你用哪种?【实践】》

《浅析 React / Vue 跨端渲染原理与实现》

《10个Vue开发技巧助力成为更好的工程师》

《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》

《1W字长文+多图,带你了解vue的双向数据绑定源码实现》

《深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》

《手把手教你D3.js 实现数据可视化极速上手到Vue应用》

《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】》

《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】》

《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】》

《Vue3.0权限管理实现流程【实践】》

《后台管理系统,前端Vue根据角色动态设置菜单栏和路由》

作者:吴胜斌

转发链接:}

友情链接:南昌在线 厦门新闻网 肇庆新闻网 昆明在线 衡阳新闻网 杭州新闻网 秦皇岛在线 湖北汽车工业专升本 分类目录网站 洛丽塔裙子 知识百科 277游戏盒子 营销软件代理 放置游戏 电脑资讯 红客知识 网站优化 中国企划网 陈繁亮 知识问答 PS软件 福永网站建设 高仿三星手机 黑帽SEO培训 比特币 天津seo培训 高质量外链 VPS推荐 九查网 成都信息港 绍兴新闻网 景德镇新闻网 赣州新闻网 九江新闻网 哈尔滨新闻网 温州在线 沈阳在线 大连新闻网 萍乡新闻网 津门在线 百度权重神器

网站地图