【转】npm包管理器那些事

原文链接：http://www.cnblogs.com/shuoer/p/7782125.html

npm包管理器那些事！

今天和朋友针对npm包全局安装和本地项目安装这个梗展开的激烈的讨论，故此做一个总结！

什么是包管理器？

我最早接触这个概念的时候是在linux上（redhat小红帽），记得当时要编译安装一个apache，安装的过程坎坷到了极点，不是缺少这个包就是这个包依赖那个包，更有甚是你明明所有的包都有，唯独安装顺序颠倒了也会报错，所以当时接触了yum包管理器（神器啊）一条命令yum install apache 完活。（后续有时间详细介绍）

从此时我对linux产生了浓厚的兴趣，后来慢慢接触了ubuntu不管是从界面还是操作上比redhat上升了不是一个台阶啊（个人见解），故此我接触了第二个包管理器 apt-get（后续有时间详细介绍）

自从开始做前端开发之后学习node接触了node的包管理器npm，淘宝的cnpm以及FaceBook开发的yarn

说了这么多它们能干什么有什么用呢它们有什么区别呢？

所有的包管理器都有一个共同的目标，安装、管理、解决你的安装包依赖

它们的特点

yum和apt-get这里不做介绍，主要针对npm、cnpm、yarn

yarn

yarn是FaceBook开发的包管理器-- 解决npm历史遗留的痛点
特点

• 极速，Yarn 会缓存它下载的每个包，所以不需要重复下载
• 安全，Yarn 在每个安装包的代码执行前使用校验码验证包的完整性。
  具体的使用请移驾Yarn官网手册

npm

npm全称Node Package Manager，他是node包管理和分发工具
由于npm的软件源地址在国外，所以会出现速度慢很多包安装不上时候

解决方案一

//通过config命令：先运行以下命令，再安装node包即可
npm config set registry http://registry.cnpmjs.org
npm install webpack

通过上面的命令实际的意识是告诉npm你下载包的时候给我从这个地址下载

解决方案二 cnpm

cnpm只不过是npm在国内的镜像

//cnpm方式安装：先安装cnpm，再利用cnpm安装，例如webpack等
npm install -g cnpm
cnpm install -g webpack

npm和cnpm的区别

npm install 本地安装与全局安装的区别

npm的包安装分为本地安装(local)、全局安装(global)两种，比如：

//安装在本地
npm install webpack 
//安装在本地并添加进package.json版本依赖中
npm install webpack --save-dev
//全局安装
npm install -g webpack

• 本地安装
  • 将安装包放在./node_modules/
  • 可以通过require()来引入本地安装的包

  例如：

  npm install karma --save-dev

  安装成功之后会在你当前目录中的node_modules/karma
  我们使用的时候直接require('karma')就可以使用
  此时全局没有安装karma那么命令行怎么办？

  //搞定
  node_modules/karma/bin/karma init

• 全局安装
  • 将安装包放在/usr/local下

  • 可以直接在命令行中直接使用
    例如：

    //安装全局的karma
    npm install -g karma
    //全局安装之后记得在本地安装下并添加进版本依赖中
    npm install katma --save-dev
    //全局安装完成之后就可以在命令行中直接执行
    karma init

    ok到这里问题都出来了

全局安装报错

如果您是linux或者Mac Os 系统并且非root用户会出现如下报错

这是因为全局安装的模块是安装在了/usr/local/下，您当前的用户没有对/usr/local目录的写入权限导致的，解决办法：

//意思就是要用管理员的身份去执行
//super user do npm install -g karma
sudo npm install -g karma
//此时输入您的登陆密码就可以了

使用npm脚本

首先先说一下何为全局？又何为本地安装？
抛开package.json的版本依赖先不说，这两种安装方式只不过是安装的位置不同罢了！咱们翻译下全局安装和本地安装这两条命令

//上面说了全局安装的是/usr/local/其实全局安装只不过是给你添加了一个环境变而已
//karma="/usr/loacl/bin/node_modules/karma/bin/karma"

karma init --> /usr/loacl/bin/node_modules/karma/bin/karma init

//翻译下本地安装,就是安装在你的当前项目中的node_modules
./node_modules/karma/bin/karma init

什么是npm脚本？
npm 允许在package.json文件里面，使用scripts字段定义脚本命令。

"scripts": {
    "start": "node server.js",
    "karma":"karma start"
}

执行的时候npm run karma
这些定义在package.json里面的脚本，就称为 npm 脚本。
npm run在执行的时候会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。
所以咱们没有必要写成下面这样

"scripts": {
    "karma":"node_modules/karma/bin/karma start"
}

npm脚本的钩子

npm 脚本有pre和post两个钩子，比如：

"scripts": {
    "pretest":"karma start",
    "test":"karma start",
    "posttest":"opener http://localhost:9090"
}

当执行npm run test的时候它们会一次执行

npm run pretest && npm run test && posttest

如何利用npm脚本去优雅的装逼

咱们可以利用npm脚本钩子的特性可以这么玩

{
  "name": "karmademo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "karma start",//提供一个单独的单元测试脚本
    "prestart": "npm install && karma start",//start开始前先下载所有的依赖包并且跑一边单元测试
    "start": "pm2 serve ",//用pm2去启动一个简单的服务器
    "poststart": "opener http://localhost:8080",//用opener打开浏览器并打开项目网址
    "stop": "pm2 stop all",//提供一个停止服务的脚本
    "restart": "pm2 stop all && npm start"//提供一个重启服务器的脚本
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jasmine-core": "^2.8.0",
    "jquery": "^3.2.1",
    "karma": "^1.7.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "opener": "^1.4.3",
    "pm2": "^2.7.2",
    "serve": "^6.4.0",
    "systemjs": "^0.20.19",
    "systemjs-plugin-babel": "0.0.25"
  }
}

在命令行中的执行结果是这个样子的

npm start

npm stop

npm restart

github项目地址：https://github.com/zhaoshuoer/praiseButton

本文参考地址：https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/