文档章节

如何自己写一个公用的NPM包

 钌子_rawbin
发布于 2017/08/05 23:22
字数 901
阅读 4
收藏 0

markdown-clear,创建过程为例,讲解整个NPM包创建和发布流程

1 如何创建一个包

1.1 创建并使用一个工程

  • 在GitHub上新建一个仓库,其名markdown-clear
  • clone 这个工程到本地

1.2 添加LICENCELICENSE文件, 说明对应的开源协议

MIT License
Copyright (c) <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

1.3 添加README或者ReadMe.md或者README.md文件

  • 说明项目的一些信息
  • 给出详细参考资料的链接
  • 给读者一个整体的导航内容

1.4 添加.gitignore 文件,忽略不需要提交的文件变更

1.5 初始化NPM包

  • 使用npm init 初始化工程
  • 按照提示填入相应的内容

1.6 到这里的目录结构

  • 工程三大件以及npm包配置文件都有了
markdown-clear
------------- .gitignore
------------- LICENCE
------------- README.md
------------- package.json

1.7 EditorConfig

跨编辑器的编辑器设置,网站挂了,EditorConfig

1.8 ESLint

新一代JavaScript代码质量检测工具ESLint

2 代码结构组织

2.1 加入代码相关的目录

markdown-clear
-------------- src     // 源代码目录 比如coffee,typescript,es6+等代码的目录
-------------- lib     // 转义生成的代码目录,比如babel转义后的es5代码的目录
-------------- docs    // 代码相关的设计和使用文档
-------------- tests   // 相关的测试目录

2.2 代码实现

  • 写代码 src 目录
  • 转换后的代码 lib 目录
2.2.1 使用babel 转换代码
{
  "presets":["es2015","stage-0"]
}
  • 添加 npm 命令
  "scripts": {
    "build": "babel src -d lib",
   }
2.2.2 实现一个可以全局安装的npm包
  • 添加package.json的配置
  "bin": {
    "markdown-clear": "./lib/cli.js"
  }
  • cli.js文件第一行添加
#!/usr/bin/env node

2.3 测试

  • 写测试用例 tests 目录
  • 调用最终生成的 lib 下面的目录
  • 可以考虑使用测试框架 mocha, jasmine, karma...
2.3.1 安装测试
  • 使用npm 安装本地文件 作为本地包
npm install path/to/markdown-clear
  • 使用npm 安装本地文件 作为全局包
npm install path/to/markdown-clear -g

2.4 文档输出

  • 写文档 docs 目录
  • 写代码相关的设计和使用文档,没有自然可以不用写
  • 这里的文档应该在README.md 中会有入口。

3 发布NPM包

npm adduser USERNAME
  • 如果没有登录
npm login
  • 登录后发布包,在工程目录下执行
npm publish

© 著作权归作者所有

粉丝 1
博文 7
码字总数 7658
作品 0
西城
程序员
私信 提问
使用verdaccio搭建npm私有仓库 - Better’s study fairyland

使用verdaccio搭建npm私有仓库 使用verdaccio搭建npm私有仓库 需求背景:平时在项目工作中可能会用到很多通用性的代码,比如,框架类、工具类以及公用的业务逻辑代码等等,通过打包发布到npm...

Better
02/14
0
0
如何在多Node版本的情况下公用一个npm

1、就是修改npm 的默存贮路径 2、在新的目录中 执行npm install -g 自己安装自己, 3、配置环境变量,把心的npm包的路径 查看全局包安装路径 npm root -g 修改全局包安装路径 npm config set...

龙马行空
2016/01/30
139
1
手把手教你创建你的第一个 NPM 包

1.npm是什么? npm 是Node 的模块管理器,功能极其强大。 它是Node 获得成功的重要原因之一。 正因为有了npm,我们只要一行命令,就能安装别人写好的模块。 npm的基础知识这边就不做表述的,...

小钱钱阿圣
2017/07/21
0
0
使用React构建Chrome扩展

  这篇文章是一个使用反应构建简单的Chrome扩展的指南。有了这个,您将有一个继续并构建您自己的扩展功能的起点。      上周,我为一位客户完成了chrome扩展。这个扩展是作为一个视图引...

爱码农
2018/02/03
0
0
使用Kissy Pie快速构建—kissy1.2最佳实践探索

kissy1.2模块文件打包问题 来看个第一次使用kissy1.2来构建项目时,需要进行的步骤: 从上图来看,构建的成本主要在构建的环境搭建和build.xml上。 从环境上,需要安装ant以及知道ant的基本使...

青铜骑士
2013/12/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Storm+Hbase广告实时统计

本文主要讲述使用Kafka+Strom+Hbase搭建的一套广告实时计算系统。其中服务器显示使用的是SpringBoot+Vue+ElementUI+EChats. 主要内容: 1.需求 2.日志格式 3.Hbase表格设计 4.编写Storm程序 ...

飓风2000
14分钟前
3
0
android,ContentProvider+ContentObserver+ContentResolver,用法。

这个是传智播客老师讲android开发时的一个图。 一、 PersonProvider继承ContentProvider,实现ContentProvider中的数据操作类。 ContentObserver——内容观察者,目的是观察(捕捉)特定Uri引起...

天王盖地虎626
19分钟前
2
0
解决markdown中的不换行问题

没有解决我的格式显示问题 https://blog.csdn.net/qq_23483671/article/details/79017609

南桥北木
24分钟前
2
0
产品上新|ZStack3.5.0正式发布啦!

海量产品资料传送门~ 一、ZStack全线产品下载通道汇总 社区版(免费): https://www.zstack.io/product/zstack_open_source/ 企业版下载: https://www.zstack.io/product/zstack_enterpris...

ZStack社区版
27分钟前
2
0
mysql 大表分页查询 翻页 优化方案

mysql分页查询是先查询出来所有数据,然后跳过offset,取limit条记录,造成了越往后的页数,查询时间越长 一般优化思路是转换offset,让offset尽可能的小,最好能每次查询都是第一页,也就是...

花树堆雪
30分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部