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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5228
来自专栏杨龙飞前端

scrollto 到指定位置

2944
来自专栏魂祭心

原 canvas绘制clock

5104
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

5908
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3005
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7156
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3702
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2997
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3278
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8668

扫码关注云+社区