了解 npm 的二三事

5 minutes

November 27, 2017

Category:

JavaScript

tags:

JavaScript

nodejs

npm

了解 npm 的二三事

什麼是 NPM

如果你有寫過 python ，你應該會很熟悉 pip ，pip 是一個 python 的套件管理系統。(pip is package management system used to install and manage software packages written in Python. –from Wikipedia) 那什麼是 npm 呢？就是 Node.js 的套件管理系統啦！ (A default package manager for the JavaScript runtime environment Node.js – from Wikipedia) NPM 全名 Node Package Manager。

什麼是"套件管理系統"？
- A package manager is a set of tools that automates and manages computer software. They deal with packages, or collections, of bundled files. Package managers make it easy to install, upgrade, or remove software for a computer’s operating system. – from Wikipedia
- List of package manager:
  - Ubuntu: apt, dpkg
  - macOS: Homebrew
  - Application-level Dependency managers:
    - Java: Maven
    - Python: pip
    - Ruby: RubyGems
    - JavaScript: npm, yarn, Bower
什麼是 Node.js？
- Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side.
- Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 採用Google開發的V8執行程式碼，使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高效能，可優化應用程式的傳輸量和規模。
Three distinct pieces of npm:
- website: serves as the primary tool for users to discover packages
- registry: a large database of information about packages
- CLI: how developers publish their packages on the registry or download packages they wish to install {%youtube x03fjb2VlGY %}

Ref:
[1] https://docs.npmjs.com/getting-started
[2] https://en.wikipedia.org/wiki/Package_manager
[3] https://en.wikipedia.org/wiki/List_of_software_package_management_systems
[4] https://nodejs.org/en/about/
[5] https://github.com/nodejs/node

npm 環境安裝

Installing NVM

NVM: Node Version Manager - Simple bash script to manage multiple active node.js versions 在 Linux 環境

$ cd ~/
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
$ nvm install 4
$ nvm ls
$ . ~/.bashrc 
$ mkdir ~/node_modules

Ref: https://github.com/creationix/nvm

如何使用 npm

CLI Commands

npm install

Install npm packages

用法

$ npm install <package_name> # install package locally
$ npm i <package_name> # 與上面相同
$ npm i -g <package_name> # installs the current package as a global package
$ npm install <url>
$ npm install [<@scope>/]<name>@<version>
...

範例

$ npm install jquery
$ npm install jquery@2.1.1
$ npm i jquery
$ npm i -g glob
$ npm install git+https://isaacs@github.com/npm/npm.git

Ref: https://docs.npmjs.com/cli/install

npm update

(like pip update)
Update all the packages listed to the latest version (specified by the tag config), respecting semver.

用法

$ npm update <package_name> 
$ npm update
$ npm update -g
...

Ref: https://docs.npmjs.com/cli/update

npm test

This runs a package’s “test” script, if one was provided.

用法

$ npm test
$ npm t
...

Ref: https://docs.npmjs.com/cli/test

npm view

shows data about a package and prints it to the stream referenced by the outfd config, which defaults to stdout.

用法

$ npm view [<@scope>/]<name>[@<version>] [<field>[.<subfield>]...]
$ npm v [<@scope>/]<name>[@<version>] [<field>[.<subfield>]...]

範例

$ npm view ronn@0.3.5
$ npm v cta versions
[ '0.1.0', '0.2.0', '0.3.0', '0.3.1', '0.3.2' ]

Ref: https://docs.npmjs.com/cli/view

Using the installed package

via interactive CLI

範例 like $python -> import xxx

$ npm i random-js
$ node
> random = require("random-js")();
Random { engine: [Function] }
> value = random.integer(1, 100);
20
> value = random.integer(1, 100);
9

如同 python 的範例方法

$ python
Python 2.7.14 (default, Sep 23 2017, 22:06:14)
[GCC 7.2.0] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import random
>>> random.randint(1, 10)
8
>>> random.randint(1, 10)
6

via CLI: Using global installed package

範例

$ npm install uglify-js -g
$ uglifyjs [input files] [options]

如同 python 的範例

$ python -m pip install flake8
$ flake8 path/to/code/to/check.py

via programming

Node 範例

index.js

var random = require("random-js")(); // uses the nativeMath engine
var value = random.integer(1, 100);
console.log(value);

$ node index.js
2

如同 Python 的範例

index.py

import random
print random.randint(1, 100)

$ python index.py
65

Ref:
[1] https://github.com/ckknight/random-js
[2] https://github.com/mishoo/UglifyJS2
[3] http://flake8.pycqa.org/en/latest/
https://docs.npmjs.com/files/package.json#dependencies

What is package.json

To manage locally installed npm packages
好處：
1. It serves as documentation for what packages your project depends on.
2. It allows you to specify the versions of a package that your project can use using semantic versioning rules.
3. It makes your build reproducible, which means that it’s much easier to share with other developers.

What is Json

A lightweight data-interchange format
JSON is built on two structures:
- A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
- An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
格式
- Object: An unordered set of name/value pairs.
- array: An ordered collection of values
- value

The requirements of package.json

Create your own package.json

$ npm init
This utility will walk you through creating a package.json file.  
It only covers the most common items, and tries to guess sensible defaults.  
  
See `npm help json` for definitive documentation on these fields  
and exactly what they do.  
  
Use `npm install <pkg> --save` afterwards to install a package and  
save it as a dependency in the package.json file.  

Press ^C at any time to quit.
name: (aaa) my-awesome-package
version: (1.0.0)
description: This is my first awesome package
entry point: (index.js)
test command: echo \"Error: no test specified\" && exit 1
git repository: git+https://github.com/sufuf3/myjson.git
keywords: json, awesome
author: sufuf3
license: (ISC)
About to write to /Users/sufuf3149/node_modules/aaa/package.json:

{
  "name": "my-awesome-package",
  "version": "1.0.0",
  "description": "This is my first awesome package",
  "main": "index.js",
  "scripts": {
    "test": "echo \\\"Error: no test specified\\\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sufuf3/myjson.git"
  },
  "keywords": [
    "json",
    "awesome"
  ],
  "author": "sufuf3",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/sufuf3/myjson/issues"
  },
  "homepage": "https://github.com/sufuf3/myjson#readme"
}


Is this ok? (yes) yes

example

{
  "name": "my_package",
  "description": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/sufuf3/my_package.git"
  },
  "keywords": [
    "video",
    "player",
    "h5",
    "hls",
    "mp4",
    "flv"
  ],
  "author": "sufuf3",
  "license": "ISC",
  "homepage": "https://github.com/ashleygwilliams/my_package"
}

Ref:
[1] https://docs.npmjs.com/getting-started/using-a-package.json
[2] https://docs.npmjs.com/files/package.json
[3] https://www.json.org/

Hi, I'm Samina 👋

This is my Life & Technological Journey

Hi, I'm Samina 👋

This is my Life & Technological Journey

了解 npm 的二三事

了解 npm 的二三事

什麼是 NPM

npm 環境安裝

如何使用 npm

CLI Commands

npm install

npm update

npm test

npm view

Using the installed package

via interactive CLI

via CLI: Using global installed package

via programming

Node 範例

如同 Python 的範例

What is package.json

What is Json

The requirements of package.json