translate front-end npm

[译] npm 初学者教程

Posted by Deadline on August 19, 2016

本文由 伯乐在线 - 光光头去打酱油 翻译，sunshinebuel 校稿。未经许可，禁止转载！ 英文出处：sitepoint。欢迎加入翻译组。

Node.js 让 JavaScript 编写服务器端应用程序成为可能。它建立在 JavaScript V8（C++ 编写的） 运行时之上，所以它很快。最初，它旨在为应用程序提供服务器环境，但是开发人员开始利用它来创建工具，帮助他们本地的任务自动化。此后，一个全新基于 Node 工具（如 Grunt 和 Gulp）的生态系统，使得前端开发改头换面。</span>

要使用 Node.js 中的这些工具（或包），我们需要一种有效的方式来安装和管理它们。这就要用到node 包管理器： npm 了。它能够安装你想要的包，而且提供一个强大接口来使用它们。在使用 npm 之前，首先得在系统上安装 Node.js。

安装 Node.js

先去 Node.js 的下载页面，然后选择你需要的版本。有 Windows 和 Mac 版的安装程序可以用，还有预编译的 Linux 二进制文件和源代码。对于 Linux ，也可以用包管理器来安装 Node，下面将详细介绍。

这篇教程中使用的是 v.5.7.0 稳定版。

先看看 node 被安装到哪了，然后确认下版本。

$ which node
/usr/local/bin/node
$ node --version
v5.7.0

验证下安装是否成功，试试 Node REPL 。

$ node
> console.log('Node is running');
Node is running
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.exit  Exit the repl
.help  Show repl options
.load  Load JS from a file into the REPL session
.save  Save all evaluated commands in this REPL session to a file
> .exit

安装的 Node.js 工作了，那么把注意力集中到 npm 上吧，安装 Node.js 过程中也安装了 npm 。

$ which npm
/usr/local/bin/npm
$ npm --version
3.6.0

Node 包模块

npm 有两种模式安装包，local（本地） 和 global（全球） 。在 local 模式下，它会安装 node_modules 文件夹（在工作目录的父目录）中的包。这个位置是属于当前用户的。Global 包安装在 root 用户下 {prefix}/lib/node_modules/ （{prefix} 通常是 /usr/ 或者 /usr/local）。这就意味需要使用 sudo 命令来安装 global 包，否则当解析第三方包依赖时，出于安全考虑可能会出现权限错误。 让我们来修改下：

是时候来管理这些包了

看看 npm config 输出了些啥。

$ npm config list
; cli configs
user-agent = "npm/3.6.0 node/v5.7.0 linux x64"

; node bin location = /usr/local/bin/node
; cwd = /home/sitepoint
; HOME = /home/sitepoint
; 'npm config ls -l' to show all defaults.

输出了一些安装信息。现在获取当前 global 位置是很重要的。

$ npm config get prefix
/usr/local

这是我们想要改变的前缀，那样就能把 global 包安装到我们的 home 目录中。在你的 home 文件夹中创建一个新的目录。

$ cd && mkdir .node_modules_global
$ npm config set prefix=$HOME/.node_modules_global

简单的修改下配置，就把 Node global 包的安装位置改变了。这个操作也会在我们的 home 目录中生成一个 .npmrc 文件。

$ npm config get prefix
/home/sitepoint/.node_modules_global
$ cat .npmrc
prefix=/home/sitepoint/.node_modules_global

npm 安装位置仍然在 root 用户的目录中。但因为改变了 global 包的位置，所以可以利用这一点。我们需要重新安装 npm，但这次安装在新用户自备的位置。这次也是安装最新版本的 npm。

$ npm install npm --global
/home/sitepoint/.node_modules_global/bin/npm -> /home/sitepoint/.node_modules_global/lib/node_modules/npm/bin/npm-cli.js
/home/sitepoint/.node_modules_global/lib
└── [email protected]

最后，需要将 .node_modules_global/bin 添加到环境变量 $PATH 中，这样就可以在命令行中运行 global 包命令。将下面这行命令追加到 .profile 或 .bash_profile 中，然后重启终端。

  export PATH="$HOME/.node_modules_global/bin:$PATH"

现在就会先发现 .node_modules_global/bin，然后使用正确版本的 npm。

$ which npm
/home/sitepoint/.node_modules_global/bin/npm
$ npm --version
3.7.5

Global 模式下安装包

目前只安装了一个 global 包，那就是 npm 本身。所以让我们来试试其他的，安装 UglifyJS（一个 JavaScript 压缩工具 ）。我们将使用 –global 标识，可以简写成 -g。

$ npm install uglify-js --global
/home/sitepoint/.node_modules_global/lib
└─┬ [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]
  └─┬ [email protected]
    ├── [email protected]
    ├─┬ [email protected]
    │ ├─┬ [email protected]
    │ │ ├─┬ [email protected]
    │ │ │ ├─┬ [email protected]
    │ │ │ │ └── [email protected]
    │ │ │ ├── [email protected]
    │ │ │ └── [email protected]
    │ │ └── [email protected]
    │ ├── [email protected]
    │ └── [email protected]
    ├─┬ [email protected]
    │ └── [email protected]
    └── [email protected]

正如从输出中所看到的，额外的一些包也被安装了，这些都是 uglify.js 所依赖的其他包。

列出所有 global 包

可以用 npm list 命令列出所有我们安装的 global 包。

$ npm list --global
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
....................
└─┬ [email protected]
  ├── [email protected]
  ├── [email protected]
  ├── [email protected]

不过输出太冗长了。可以使用 –depth=0 参数来控制输出。

$ npm list -g --depth=0
├── [email protected]
└── [email protected]

这就好多了，只输出安装的包和它们的版本号。

可以在终端中使用 uglifyjs 解析 JavaScript 文件。例如使用下面的命令可以将 example.js 转换成 example.min.js ：

$ uglifyjs example.js -o example.min.js

local 模式安装包

local 模式安装包去掉 –global 参数就行了。包将被安装在父级工作目录中一个 node_modules 文件夹里。在 home 目录中创建一个文件夹：

$ mkdir ~/project && cd ~/project
$ npm install underscore
/home/sitepoint/project
└── [email protected]
$ ls
node_modules
$ ls node_modules
underscore

列出所有 local 包

和 global 包一样，使用 npm list 命令就能列出所有 local 包。

$ npm list
/home/sitepoint/project
└── [email protected]

正如你所见，我们可以把 local 包安装在任何我们想安装的位置。这就意味着可以创建另外一个目录然后安装一个不同版本的 underscore。

卸载 local 包

npm 是一个包管理器，所以它肯定也可以卸载一个包。让我们假设当前版本的 underscore 包存在兼容问题。移除当前的包然后安装一个老版本的，像这样：

$ npm uninstall underscore
- [email protected] node_modules/underscore
$ npm list
/home/sitepoint/project
└── (empty)

安装一个指定版本的包

现在可以安装我们想要的版本的 underscore 包。@ 后面追加版本号就可以了。

$ npm install [email protected]
/home/sitepoint/project
└── [email protected]
$ npm list
/home/sitepoint/project
└── [email protected]

更新包

最新版本的 underscore 修复了一些之前的 bug ，然后我们想要更新包到最新版本。

$ npm update underscore
[email protected] node_modules/underscore
$ npm list
/home/sitepoint/project
└── [email protected]

注意：对于这项操作，underscore 已经在 package.json 中已经被当成依赖列出来了（看看如何管理依赖）。

搜索包

在本教程中多次使用 mkdir 命令。是否有一个 node 包 来做这件事情呢？

$ npm search mkdir
npm WARN Building the local index for the first time, please be patient

有个 mkdirp。安装它。

$ npm install mkdirp
/home/sitepoint/project
└─┬ [email protected]
  └── [email protected]

现在创建一个 mkdir.js 文件。

var mkdirp = require('mkdirp');
mkdirp('foo', function (err) {
    if (err) console.error(err)
    else console.log('Directory created!')
});

然后在终端中运行它：

$ node. mkdir.js
Directory created!

管理缓存

当 npm 安装一个包的时候它会维护一个副本，下次你想再次安装那个包的时候，就不用再去访问网络重新下载了。那些副本会在 home 目录 .npm 文件夹中缓存起来。

$ ls ~/.npm
_locks  minimist  mkdirp  registry.npmjs.org  underscore

随着时间推移，这个目录里会有很多老的包，十分的混乱，所以时常清理下是十分有必要的。

$ npm cache clean

管理依赖

目前在我们的项目目录中只安装了两个包，不过包的数量会增长的非常快。手动安装依赖是非常不明智的，所以可以在项目目录中用 package.json 文件来管理它们。通过 nmp init 命令可以创建。

$ npm init
This utility will walk you through creating a package.json file.
Press ^C at any time to quit.
name: (project) demo
version: (1.0.0)
description: Demo of package.json
entry point: (index.js)
test command:
git repository:
keywords:
author: Sitepoint
license: (ISC)

这会在项目根目录中创建下面的文件

{
  "name": "demo",
  "version": "1.0.0",
  "description": "Demo package.json",
  "main": "main.js",
  "dependencies": {
    "mkdirp": "^0.5.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Sitepoint",
  "license": "ISC"
}

如果你想快速生成一个 package.json 文件的话，使用下面的命令：

$ npm init --yes

会快速创建一个 package.json 文件，你的目录名会被作为 name 属性。

还可以添加参数 private: true 防止私有库不小心被发布，还能消除运行 npm 安装时的各种警告。让我们创建一个新的目录，使用 package.json 文件来安装依赖。

$ mkdir ~/demo && cd ~/demo
$ cp ~/project/package.json ~/demo
$ npm install
$ npm list
[email protected] /home/sitepoint/demo
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

看看基于 package.json 文件在另外一个目录中安装包是多么的简单。但是当安装新包的时候如何让它保持最新呢？我们可以使用 –save 标识。

$ npm install request --save
$ npm list --depth=0
[email protected] /home/sitepoint/demo
├── [email protected]
├── [email protected]
└── [email protected]

然后 package.json 也就被更新了。

"dependencies": {
  "mkdirp": "^0.5.1",
  "request": "^2.53.0",
  "underscore": "^1.8.3"
}

版本管理

有些工具可以帮你在同一台机器上管理不同版本的 Node.js。有个叫 n 的工具。还有个是 nvm（Node Version Manager）。如果你对这些有兴趣的话，不妨看看我们另外一篇教程： 使用 nvm 安装多版本 Node.js。

总结

在这篇教程中，讲解了使用 npm 工作的基本知识。展示了如何从项目下载页面安装 Node.js，如何修改 global 包的位置（避免使用 sudo 命令），还有如何在 local 、 global 模式下安装包。以及删除、更新、安装指定版本的包，最后还有管理项目依赖。

你会在项目中使用 npm 吗？在 npm 仓库有数以千计的包，随着 jQuery 插件也能快速在 npm 仓库发布，包的数量肯定会保持增长。哪些包对你来讲不可或缺？

There are no comments on this post.
FEATURED TAGS
other translate java hadoop web security mysql front-end project travel atom android ios https macos movie jvm