npm包的發佈和管理

npm包管理

npm其實是Node.js的包管理工具（node package manager）。

爲啥我們需要一個包管理工具呢？因爲我們在Node.js上開發時，會用到很多別人寫的JavaScript代碼。如果我們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用，非常繁瑣。於是一個集中管理的工具應運而生：大家都把自己開發的模塊打包後放到npm官網上，如果要使用，直接通過npm安裝就可以直接用，不用管代碼存在哪，應該從哪下載。

更重要的是，如果我們要使用模塊A，而模塊A又依賴於模塊B，模塊B又依賴於模塊C和模塊D，npm可以根據依賴關係，把所有依賴的包都下載下來並管理起來。否則，靠我們自己手動管理，肯定既麻煩又容易出錯。

npm的基礎使用

npm的指令其實常用的並不多官方文檔；列出來如下面：

• access
  Set access level on published packages

• adduser

  Add a registry user account

• audit

  Run a security audit

• bin

  Display npm bin folder

• bugs

  Bugs for a package in a web browser maybe

• build

  Build a package

• bundle

  REMOVED *已刪除*

• cache

  Manipulates packages cache

• ci

  Install a project with a clean slate

• completion

  Tab Completion for npm

• config

  Manage the npm configuration files

• dedupe

  Reduce duplication

• deprecate

  Deprecate a version of a package

• dist-tag

  Modify package distribution tags

• docs

  Docs for a package in a web browser maybe

• doctor

  Check your environments

• edit

  Edit an installed package

• explore

  Browse an installed package

• help-search

  Search npm help documentation

• help

  Get help on npm

• hook

  Manage registry hooks

• init

  create a package.json file

• install-ci-test

  Install a project with a clean slate and run tests

• install-test

  Install package(s) and run tests

• install

  Install a package

• link

  Symlink a package folder

• logout

  Log out of the registry

• ls

  List installed packages

• npm

  javascript package manager

• outdated

  Check for outdated packages

• owner

  Manage package owners

• pack

  Create a tarball from a package

• ping

  Ping npm registry

• prefix

  Display prefix

• profile

  Change settings on your registry profile

• prune

  Remove extraneous packages

• publish

  Publish a package

• rebuild

  Rebuild a package

• repo

  Open package repository page in the browser

• restart

  Restart a package

• root

  Display npm root

• run-script

  Run arbitrary package scripts

• search

  Search for packages

• shrinkwrap

  Lock down dependency versions for publication

• star

  Mark your favorite packages

• stars

  View packages marked as favorites

• start

  Start a package

• stop

  Stop a package

• team

  Manage organization teams and team memberships

• test

  Test a package

• token

  Manage your authentication tokens

• uninstall

  Remove a package

• unpublish

  Remove a package from the registry

• update

  Update a package

• version

  Bump a package version

• view

  View registry info

• whoami

  Display npm username
  

init

初始化創建package.json

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as npx <@scope>/create)
npm init [<@scope>/]<name> (same as npx [<@scope>/]create-<name>)

search

搜索查看遠程npm相關資源包信息

npm search [-l|--long] [--json] [--parseable] [--no-description] [search terms ...]
aliases: s, se, find

install

可以是說是install是最爲常見的命令官方介紹，

npm install (with no args, in package dir)
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>
npm install <git-host>:<git-user>/<repo-name>
npm install <git repo url>
npm install <tarball file>
npm install <tarball url>
npm install <folder>

alias: npm i
common options: [-P|--save-prod|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [-B|--save-bundle] [--no-save] [--dry-run]

In global mode (ie, with -g or --global appended to the command), it installs the current package context (ie, the current working directory) as a global package. The -g or --global argument will cause npm to install the package globally rather than locally.

The -f or --force argument will force npm to fetch remote resources even if a local copy exists on disk.

上面的還介紹已經很詳細了，所以這裏只是講一下npm install packageName [|--save |--save-prod|--save-dev]的區別；

• npm install babel
  npm5以前,會把X包安裝到node_modules目錄中，不會修改package.json的dependencies字段，之後運行npm install命令時，不會自動安裝X
• npm install babel
  npm5以後,會把X包安裝到node_modules目錄中，會修改package.json的dependencies字段，之後運行npm install命令時，會自動安裝X, 線上環境時會被安裝
• npm install babel -P
  -P, --save-prod: Package will appear in your dependencies. This is the default unless -D or -O are present. Package will appear in your dependencies, With the --production flag (or when the NODE_ENV environment variable is set to production), npm will install modules listed in dependencies.
• npm install babel -D
  Package will appear in your devDependencies，With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies. 會把X包安裝到node_modules目錄中，會在package.json的devDependencies屬性下添加X，之後運行npm install命令時，會自動安裝X到node_modules目錄中，之後運行npm install –production或者註明NODE_ENV變量值爲production時，不會自動安裝X到node_modules目錄中

update

升級某個資源包或者全部資源包到某一個版本或者匹配的最新版本。

npm update [-g] [<pkg>...]
aliases: up, upgrade

uninstall

移除某個資源包

npm uninstall [<@scope>/]<pkg>[@<version>]... [-S|--save|-D|--save-dev|-O|--save-optional|--no-save]
aliases: remove, rm, r, un, unlink

npm包創建、編寫、測試、維護

Node出現之前，JavaScript是缺少包結構的。CommonJS致力於改變這種現狀，於是定義了包的結構規範。而NPM的出現則是爲了在CommonJS規範的基礎上，實現解決包的安裝卸載，依賴管理，版本管理等問題。require的查找機制明瞭之後，我們來看一下包的細節。
一個符合CommonJS規範的包應該是如下這種結構：

• 一個package.json文件應該存在於包頂級目錄下
• 二進制文件應該包含在bin目錄下(可選)
• JavaScript代碼入庫是index.js，其他包含在lib目錄下
• 文檔應該在doc目錄下(可選)
• 單元測試應該在test目錄下(可選)

初始化包

1. 創建包的根目錄

   mkdir testpackage

2. 初始化

   npm init   // 需要進行一些基本配置

編寫

1. 創建入口文件

   touch index.js

2. 編寫代碼

   const updateQueryString = function(url, key, value) {
       let urlParts = url.split('#'),
           hash = '',
           uri = urlParts.shift(),
           re = new RegExp(`([?&])${key}=.*?(&|$)`, 'i'),
           separator = uri.indexOf('?') !== -1 ? '&' : '?',
           encodeKey = encodeURIComponent(key),
           encodeValue = encodeURIComponent(value);
   
       urlParts.length > 0 && (hash = `#${urlParts.join('#')}`);
   
       if (uri.match(re)) {
           return uri.replace(re, `$1${encodeKey}=${encodeValue}$2`) + hash;
       } else {
           return `${uri}${separator}${encodeKey}=${encodeValue}${hash}`;
       }
   };
   
   // 最後的導出部分
   module.exports = {
       updateQueryString
   };

3. 測試

   1. 創建包的根目錄

      npm i mocha -D    // 安裝測試庫
      npm i chai -D     // 安裝斷言庫
      mkdir test
      cd test
      touch index.test.js

   2. 編寫測試代碼

      const utils = require('./../index.js');
      const expect = require('chai').expect;
      
      let {
          updateQueryString
      } = utils;
      
      describe('updateQueryString函數的測試', function() {
          it('https://test.com/path?test=11 修改test參數爲22 應該等於 https://test.com/path?test=22', function() {
              expect(updateQueryString('https://test.com/path?test=11', 'test', 22)).to.be.equal('https://test.com/path?test=22');
          });
      });

   3. 運行測試

      cd ..
      ./node_modules/mocha/bin/mocha 

npm包的發佈

1. 註冊賬號npm官網
2. 終端執行 npm login,輸入用戶名和密碼 、郵箱
3. npm publish 發佈

Organization包

我們經常可以看到@angular、@ionic他們的包， 都可以以@開頭，那麼我們的可不可以，原來angular、ionic都屬於一個組織（Organization）只有新創建一個Organization組織之後，才能創建@testorg/testpackname這樣的包！！！

那麼我們就可以去官網上創建我們的Organization，命名之後，官方步驟，

1. 初始化

   npm init --scope=<your_org_name>

   npm init foo -> npx create-foo
   npm init @usr/foo -> npx @usr/create-foo
   npm init @usr -> npx @usr/create

2. 修改package.json裏面的name字段爲@your_org_name/<pkg_name>

3. 發佈

   npm publish --access public  // 公開包發佈

npm包支持esmodule