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/