NPM — JavaScript 的包管理器

本文主要介紹npm的常用命令，以及如何釋出一些常用的js模組化程式碼到npm上面方便日後的使用，和舉例如何把一個vue元件打包釋出到npm到最後下載到本地使用的過程。

npm(Node Package Manager)是node的預設模組管理器，一個命令列下的軟體，用來安裝和管理node模組，同時也可以管理其他開放式的js模組程式碼。npm有一個好處是除了下載需要的模組外還會幫我們解決依賴關係，同時下載所依賴的模組。

NPM —— JavaScript 的包管理器

npm help

    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常用指令

npm install 名字      //該命令用於安裝模組
npm uninstall 名字    //該命令用於解除安裝模組
npm run 名字          //該命令用於執行指令碼
複製程式碼

如何用npm釋出自己的模組

我們所有下載以及釋出的包是存放在這個地址：https://www.npmjs.com/ 我們釋出一個東西，得要有自己的標識吧，所以得先註冊賬號。

1.註冊使用者

npm adduser
執行該命令後會需要你依次輸入
Username:
Password:
Email:
複製程式碼

2.檢查

接下來是需要檢查一下有沒有註冊成功

npm whoami
複製程式碼

3.建立package

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) 

複製程式碼

然後會在該目錄下多了個package.json檔案

新增簡單的日期轉換格式外掛

每次後臺資料介面返回的基本是時間戳，往往需要轉換成常用的日期格式。那我就以一個簡單的日期轉換格式小外掛為例。把下面程式碼放到package.json檔案同級目錄裡。

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);
複製程式碼

4.釋出

npm publish 記得在推之前先登入npm要不然會報錯。如果是再次推送同一個專案記得修改版本號。

使用

npm install --save-dev datechange
複製程式碼

var datechange = require('datechange');
var now = new Date();
var timeStamp = datechange(now);
複製程式碼

OR

<script type="text/javascript" src='date.js'></script>
	<script type="text/javascript">
		var now = new Date();
		var timeStamp = datechange(1511350834583);
		alert(timeStamp)
	</script>
複製程式碼

先安裝後使用，包的名稱為package.json裡的name屬性。具體程式碼看github: https://github.com/shuangmuyingzi/dateFormat

Vue元件如何上傳到NPM

方式一

用webpack把專案打包成JS檔案，然後在package.json的 main匯出該JS檔案。

建立

vue-cli建立vue簡單專案

vue init webpack-simple load-ling-zi
修改package.json
1. 修改"private": false
  
  npm預設建立的專案是私有的，如果要釋出至npm必須將其公開
2. 新增"main": "dist/build.js"
  
  通過import loading from 'load-ling-zi'引用該元件時，專案會自動找到node_modules/load-ling-zi/dist/build.js

在src加入元件程式碼App.vue，並建立我們的匯出檔案index.js。在index.js中新增：

import load from './App.vue'
export default load
//global 情況下 自動安裝
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.component('load', load);
}
複製程式碼

因為最後我們是打包成一個js檔案，所以需要修改一下配置檔案webpack.config.js

因為不是所有使用你元件的人都是通過npm按住和impor的很多人是通過<script>直接引入的,我們要將libraryTarget改為umd,以及修改入口檔案與設定匯出檔案目錄以及名稱。
```
     entry: './src/index.js',
     output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
     filename: 'build.js',
     library: 'load',
     libraryTarget: 'umd',
     umdNamedDefine: true
     },
複製程式碼
```
最後需要把.gitignore檔案裡面的/dist刪除掉要不然上傳時會忽略掉dist打包的檔案。

具體程式碼已放到github： https://github.com/shuangmuyingzi/loadingModule/tree/master/load/load-ling-zi

釋出

npm publish，具體參考上面步驟。

應用

Installation

# install dependencies
npm install load-ling-zi -D
複製程式碼

Usage

<loading v-if="loading.isShow">
    <span>{{ loading.text }}</span>
</loading>

<script>
    import loading from 'load-ling-zi'
    export default {
        components: {
            loading:loading
        },
        data () {
            return {
                loading:{
                    isShow:true,
                    text:"載入中"
                },   
            }
        }
    }
</script>
複製程式碼

方式二

在main裡直接匯出Vue元件（.vue檔案）具體程式碼看這裡： https://github.com/shuangmuyingzi/loadingModule/tree/master/loading

寫在最後

關於vue元件、外掛的實現方式估計還有很多的辦法,本文權當拋磚引玉，水平有限，舉的例子也是比較簡單，一個好的元件也要考慮更多的可配置性以及通用性，資料的可配置，結構的可配置，樣式的可配置等等，es裡面模組化的寫法也是很多，還有一些直接在<script>引入，所以要考慮如何匯出程式碼能夠滿足更多場景的使用。

NPM — JavaScript 的包管理器