摘要：是的默認(rèn)模塊管理器，一個(gè)命令行下的軟件，用來安裝和管理模塊，同時(shí)也可以管理其他開放式的模塊代碼。的包管理器可以查看所有可使用的命令。發(fā)布記得在推之前先登錄要不然會(huì)報(bào)錯(cuò)。最后需要把文件里面的刪除掉要不然上傳時(shí)會(huì)忽略掉打包的文件。

本文主要介紹npm的常用命令，以及如何發(fā)布一些常用的js模塊化代碼到npm上面方便日后的使用，和舉例如何把一個(gè)vue組件打包發(fā)布到npm到最后下載到本地使用的過程。

npm(Node Package Manager)是node的默認(rèn)模塊管理器，一個(gè)命令行下的軟件，用來安裝和管理node模塊，同時(shí)也可以管理其他開放式的js模塊代碼。npm有一個(gè)好處是除了下載需要的模塊外還會(huì)幫我們解決依賴關(guān)系，同時(shí)下載所依賴的模塊。

    access, adduser, bin, bugs, c, cache, completion, config,
    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
    explore, get, help, help-search, i, init, install,
    install-test, it, link, list, ln, login, logout, ls,
    outdated, owner, pack, ping, prefix, prune, publish, rb,
    rebuild, repo, restart, root, run, run-script, s, se,
    search, set, shrinkwrap, star, stars, start, stop, t, team,
    test, tst, un, uninstall, unpublish, unstar, up, update, v,
    version, view, whoami

npm help 可以查看所有可使用的命令。

npm install 名字      //該命令用于安裝模塊
npm uninstall 名字    //該命令用于卸載模塊
npm run 名字          //該命令用于執(zhí)行腳本

我們所有下載以及發(fā)布的包是存放在這個(gè)地址：https://www.npmjs.com/
我們發(fā)布一個(gè)東西，得要有自己的標(biāo)識(shí)吧，所以得先注冊(cè)賬號(hào)。

npm adduser
運(yùn)行該命令后會(huì)需要你依次輸入
Username:
Password:
Email:

接下來是需要檢查一下有沒有注冊(cè)成功

npm whoami

npm init
//一路回車
name: (dateFormat) datechange
version: (1.0.0) 
description: change date format
entry point: (index.js) 
test command: 
git repository: https://github.com/shuangmuyingzi/dateFormat.git
keywords: dateformat date datechange
author: lingzi
license: (ISC) 
About to write to /Users/linziying/Downloads/npm/dateFormat/package.json:

{
  "name": "datechange",
  "version": "1.0.0",
  "description": "change date format",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/shuangmuyingzi/dateFormat.git"
  },
  "keywords": [
    "dateformat",
    "date",
    "datechange"
  ],
  "author": "lingzi",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/shuangmuyingzi/dateFormat/issues"
  },
  "homepage": "https://github.com/shuangmuyingzi/dateFormat#readme"
}


Is this ok? (yes) 

然后會(huì)在該目錄下多了個(gè)package.json文件

每次后臺(tái)數(shù)據(jù)接口返回的基本是時(shí)間戳，往往需要轉(zhuǎn)換成常用的日期格式。那我就以一個(gè)簡單的日期轉(zhuǎn)換格式小插件為例。把下面代碼放到package.json文件同級(jí)目錄里。

date.js

(function(global) {
    var datechange = (function() {
      
      return function (date) {
  
        date = date || new Date;
  
        if(!(date instanceof Date)) {
          date = new Date(date);
        }
  
        if (isNaN(date)) {
          throw TypeError("Invalid date");
        }
        let re = date.getFullYear() + "." + (date.getMonth()+1) + "." + date.getDate();
        return re
  
      }
  })()

  if (typeof define === "function" && define.amd) {
    define(function () {
      return datechange;
    });
  } else if (typeof exports === "object") {
    module.exports = datechange;
  } else {
    global.datechange = datechange;
  }

})(this);

npm publish
記得在推之前先登錄npm要不然會(huì)報(bào)錯(cuò)。如果是再次推送同一個(gè)項(xiàng)目記得修改版本號(hào)。

npm install --save-dev datechange

var datechange = require("datechange");
var now = new Date();
var timeStamp = datechange(now);

OR

先安裝后使用，包的名稱為package.json里的name屬性。
具體代碼看github:
https://github.com/shuangmuyi...

用webpack把項(xiàng)目打包成JS文件，然后在package.json的 main導(dǎo)出該JS文件。

創(chuàng)建

vue-cli創(chuàng)建vue簡單項(xiàng)目

vue init webpack-simple load-ling-zi

修改package.json

修改"private": false

npm默認(rèn)創(chuàng)建的項(xiàng)目是私有的，如果要發(fā)布至npm必須將其公開

添加"main": "dist/build.js"

通過`import loading from "load-ling-zi"`引用該組件時(shí)，項(xiàng)目會(huì)自動(dòng)找到`node_modules/load-ling-zi/dist/build.js`

在src加入組件代碼App.vue， 并創(chuàng)建我們的導(dǎo)出文件index.js。
在index.js中添加：

import load from "./App.vue"
export default load
//global 情況下 自動(dòng)安裝
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.component("load", load);
}

因?yàn)樽詈笪覀兪谴虬梢粋€(gè)js文件，所以需要修改一下配置文件webpack.config.js

因?yàn)椴皇撬惺褂媚憬M件的人都是通過npm按住和impor的很多人是通過 方式二

在main里直接導(dǎo)出Vue組件（.vue文件）
具體代碼看這里：
https://github.com/shuangmuyi...