【转】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/