【转】npm包管理器那些事 npm包管理器那些事! 什么是包管理器? 它们的特点 npm install 本地安装与全局安装的区别 如何利用npm脚本去优雅的装逼

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

今天和朋友针对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包管理器那些事
npm包管理器那些事!
什么是包管理器?
它们的特点
npm install 本地安装与全局安装的区别
如何利用npm脚本去优雅的装逼

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用户会出现如下报错

【转】npm包管理器那些事
npm包管理器那些事!
什么是包管理器?
它们的特点
npm install 本地安装与全局安装的区别
如何利用npm脚本去优雅的装逼
这是因为全局安装的模块是安装在了/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包管理器那些事
npm包管理器那些事!
什么是包管理器?
它们的特点
npm install 本地安装与全局安装的区别
如何利用npm脚本去优雅的装逼

npm stop

【转】npm包管理器那些事
npm包管理器那些事!
什么是包管理器?
它们的特点
npm install 本地安装与全局安装的区别
如何利用npm脚本去优雅的装逼

npm restart

【转】npm包管理器那些事
npm包管理器那些事!
什么是包管理器?
它们的特点
npm install 本地安装与全局安装的区别
如何利用npm脚本去优雅的装逼

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

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