【转】npm包管理器那些事

时间：2023-12-04 12:14:38

原文链接：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包管理器那些事

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包管理器那些事
这是因为全局安装的模块是安装在了/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 stop

【转】npm包管理器那些事

npm restart

【转】npm包管理器那些事

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

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

相关文章