Ethan | 博客

npm 作为前端包管理工具的王者，其重要性相比不用多说，前端的发展朝着去中心化的方向发展，社区的第三方不再是大而全，更多的是关注解决某一个问题，因此项目中可能需要依赖很多第三方库，难道我们需要每个库去各自官网下载，还要自己管理版本？聪明的程序员肯定不会让这种事情发生，npm 很好的帮助我们管理项目的依赖问题。

简介

在做前端开发的时候，我们经常会用到构建工具，例如 gulp，webpack 等，为了让别人也可以参与进来，我们需要告诉别人项目有些什么依赖包，然后让别人也安装同样的依赖包，而 npm init 产生的 package.json 就是用来记录我们项目中的依赖的。

npm init
npm init –y

在终端输入 npm init 会询问 package.json 的各种信息，从而确认。如果全部使用默认值，可以直接在终端输入 npm init --y 快速生成 package.json。

这样一来可以不将 node_modules 模块不上传到 github，其他人 clone 使用时直接使用 npm install 将会自动安装所有依赖，初始化一个空项目是一个好的习惯。

安装依赖包

$ npm install <package name> <package name> ...
$ npm install <package name> -g
$ npm install <package name> --save
$ npm install <package name> --save-dev
$ npm install <pacakage name>  --O //--save-optional  -B: --save-bundle  -E: --save-exact

npm install -g 表示全局安装，需要注意的是全局模式并不是将一个模块安装包安装为一个全局包的意思，它并不意味着可以从任何地方通过 require() 来引用，-g 的含义是将一个包安装为全局可用的可执行命令。这意味着，所有通过 -g 安装的包都可以在终端以命令方式运行，例如 gulp，webpack 等。

--save 与 --save-dev 的区别在于前者是生产环境中项目运行需要的依赖，安装后被记录在 package.json 中的 dependencies 关键字下；而后者是开发时候需要的依赖，安装后被记录在 devDependencies 关键字下。

npm install：默认会安装两种依赖，如果你只是单纯的使用这个包而不需要进行一些改动测试之类的，可以使用 npm install --production：只安装 dependencie s而不安装 devDependencies。

锁定版本号

使用 --save 或 --save-dev 保存的版本号是一个范围，而不是准确的版本号

npm i express --save --save-exact (安装 express，同时将 "express": "4.14.0" 写入 dependencies )，将固定版本号写入 dependencies。
# 如果项目中严格要求锁定版本号，可以直接修改配置
npm config set save-exact true，npm i xxx --save 的时候会锁定依赖的版本号，相当于加了 --save-exact

小提示：npm config set 命令将配置写到了 ~/.npmrc 文件，运行 npm config list 查看。

npm shrinkwrap：前面说过要锁定依赖的版本，但这并不能完全防止意外情况的发生，因为锁定的只是最外一层的依赖，而里层依赖的模块的 package.json 有可能写的是 "mongoose": "*"。为了彻底锁定依赖的版本，让你的应用在任何机器上安装的都是同样版本的模块（不管嵌套多少层），通过运行 npm shrinkwrap，会在当前目录下产生一个 npm-shrinkwrap.json，里面包含了通过 node_modules 计算出的模块的依赖树及版本。只要目录下有 npm-shrinkwrap.json 则运行 npm install 的时候会优先使用 npm-shrinkwrap.json 进行安装，没有则使用 package.json 进行安装。

更新依赖包

$ npm update
$ npm update  -g
$ npm outdated
$ npm outdated -g

在项目目录下运行 npm update 可以升级项目中所用依赖到最新版本，而 npm update -g 则可以升级全局安装的依赖包到最新版。

npm outdated 用于检查模块是否过时并列出。

卸载依赖包

$ npm uninstall <package name> <package name> ...
$ npm uninstall <package name> -g
$ npm uninstall <package name> --save
$ npm uninstall <package name> --save-dev

使用 npm uninstall 可以卸载依赖，但是卸载后，在 package.json 中的纪录并不会被删除，要想在卸载依赖的同时删除在 package.json 中的纪录，需要在卸载的时候使用安装时的所用的选项，例如，如果安装时候使用了 npm install --save 则卸载的时候，同样使用 npm uninstall --save，而如果使用了 --save-dev，卸载时候也需要加相同的选项。

自定义命令

在 package.json 中，有一个 scripts 关键字，只需要在该关键字内写入自定义命令。

bower 基础用法

有了 npm 后，似乎都不需要这只母鸡了

为什么使用

为什么使用 bower，因为它可以节省掉你去 git 或是网上找 js 的时间。

用法

使用 npm 安装 bower

# 全局安装 bower 
npm install -g bower

试着在项目文件夹下，下载 jquery 和 underscore
```
bower install jquery underscore
```
然后就可以看到项目文件夹下多了一个app文件，里面有 bower_components，再就去就是两个插件了包了，修改默认路径和文件夹名称。
app/bower_components 这个目录有点让人不习惯，我想把东西下载到我习惯的目录里。需要加一个 .bowerrc 文件。注意，不需要名字什么的，只要新增一个 .bowerrc 就行了。里面用可以定义下载目录：
```
{  "directory": "app/vendor"}
```
如果已经下载了很多必要的 js，然后又不小心 vendor 文件夹删了，或者说另一个项目也需要类似的配置，难道还要一个一个输入命令吗？为了方便我们还要再加一个 bower.json 配置文件，可以自己用文本编辑器新增一个，也可以用 bower.init 初始化，bower.init 后，它会问你很多问题，一路默认就行了，此时会自动下载 bower.json 下的依赖库。
bower install --save handlebars 后就会看到 handlebar 在 bower.json 的 dependencies 里，如果不加 --save 就不会有。
接下来删了 app/vendor 下的所有内容，然后 bower install，他会把 bower.json 中的 dependencies 重新下载

优雅使用脚手架（22.12.23新增）

在之前，我们要使用脚手架时，通过会全局装一个 cli 工具，比如 vue-cli，然后通过执行它提供的命令进行项目创建。这种方式存在的最大问题是，脚手架对比我们而言使用频率是比较低的，全局安装后，当我们下一次需要新建项目时，就很容易使用一个较老的版本新建了一个项目。

现在我们有更优雅的解决方案

npx
npm init/create

npx 全称 Node Package Executor，表示包的执行器，例如执行如下命令，它会保证每次使用最新版本的 create-react-app 新建项目。

npx create-react-app my-react-app

npm init/create 则是利用了 create-* 前缀的方式，如执行如下命令

npm create react-app my-app

等同于

npm install -g create-react-app
create-react-app my-app

Better

npm 基础使用

简介