創建項目

npm init

name: (my-npm)
version: (1.0.0)
description: 0.0.1
entry point: (index.js)
test command:
git repository:
keywords:
author: Awe
license: (ISC) MIT
About to write to F:\github\my-npm\package.json:

{
  "name": "my-npm",
  "version": "1.0.0",
  "description": "0.0.1",
  "main": "index.js",
  
 
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Awe",
  "license": "MIT"
}
Is this ok? (yes)

接著就依次填寫, 不想填寫的話也可以一路Enter

• name：
  模塊名，之後發布之後就可以讓用戶npm install xxxx來引用你的開源模塊了
• version：
  版本號，語義版本號分為X.Y.Z三位，分別代表主版本號、次版本號和補丁版本號。當代碼變更時，版本號按以下原則更新。

• 如果只是修復bug，需要更新Z位。

• 如果是新增了功能，但是向下兼容，需要更新Y位。

• 如果有大變動，向下不兼容，需要更新X位。

• description：
  簡單介紹自己的模塊

• main：
  入口文件，必要，當通過require(‘xxx‘)時，是讀取main裏聲明的文件

• test command：
  測試命令

• git repository：
  git倉庫地址

• keywords：
  關鍵詞，可以通過npm搜索你填寫的關鍵詞找到你的模塊

• author：
  作者信息，可以之後編輯更詳細一些

• license（ISC）：
  代碼授權許可 可以參考這裏

以上放心可以大膽寫，因為之後反正要改。

初始化項目完成，可以看到目錄中出現了一個叫 package.json 的文件

{
  "name": "my-npm",
  "version": "1.0.0",
  "description": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Awe",
  "license": "MIT"
}

更多配置信息可以參考一下vue的package.json的https://github.com/vuejs/vue/blob/dev/package.json

編寫代碼

比如我最近寫的這個粒子庫

class Qarticles {
constructor(canvas, options = {}) {
  this.canvas = canvas
  this.width = options.width || 100
  }
  ...
}

 module.exports = Qarticles

搞定

但是作為一個簡單的粒子庫，還需要考慮一下標簽引入的需求
那麽可以在引入的時候判斷一下當前被引入的方式
於是我們來構造一個兼容多種引入方式的方法

(function (global, factory) {
typeof exports === ‘object‘ && typeof module !== ‘undefined‘ ? module.exports = factory() :
typeof define === ‘function‘ && define.amd ? define(factory) : (global.Qarticles = factory());

})(this, function () {
  class Qarticles {
    constructor(canvas, options = {}) {
      this.canvas = canvas
      this.width = options.width || 100
    }
    ...
    }
  return Qarticles
})

發布模塊

1.在npm 註冊用戶
2.在本地登錄自己的npm賬號

npm login  

3.發布模塊

npm publish 
//返回下面的信息就是發布成功了 
+ [email protected]

還可以給自己的模塊的來個圖片徽章，可以放在github倉庫的README.md裏可以讓訪問到這項目的人看到項目的狀態
http://shields.io/
https://nodei.co/

附贈：

npm update <package>
//可以把當前目錄下node_modules子目錄裏邊的對應模塊更新至最新版本。

npm cache clear
//可以清空NPM本地緩存，用於對付使用相同版本號發布新版本代碼的人。

npm unpublish <package>@<version>

//可以撤銷發布自己發布過的某個版本代碼。

轉載：
作者：Awe
鏈接：https://www.jianshu.com/p/f5d4c891830f

如何發布自己模塊到NPM