npm包管理工具

什么是npm

• npm（Node Package Manager，即node包管理器）
• 是Node.js默认的，以JavaScript编写的软件包管理系统
• npm 来分享和使用代码已经成了前端的标配
• 官网：https://www.npmjs.com
• npm被全球超过1100万开发人员所依赖
• 拥有超过一百万个软件包，是世界上最大的软件注册表

安装npm工具

npm是Node.js默认的软件包管理系统，安装完毕node后，会默认安装好npm，npm本身也是基于Node.js开发的软件。
下载Node：http://nodejs.cn

查看是否安装成功
node -v
npm -v
全局安装npm
npm install npm -g
卸载
npm uninstall

• 安装淘宝镜像
  访问国内网站，下载速度更快
  npm config set registry https://registry.npm.taobao.org --global
• 设置当前地址（设置默认地址）
  npm config set registry https://registry.npmjs.org/
• 查看当前镜像设置
  npm config get registry
• 使用npm工具切换淘宝源
  npm nrm taobao
• 淘宝源切换回官方源
  npm nrm npm

npm的使用

npm -v 通过查看版本，看是否安装成功
npm install 使用npm命令安装模块
npm install -g 可直接在命令行使用
npm list -g查看所有全局安装模块
npm list vue 查看某个模块版本号
npm -g install npm @5.9.1 (@后面跟版本号)可以跟新npm版本
npm install -save moduleName # -save在package文件的dependencies（运行时的依赖，发布后生产环境下还需要使用的模块）节点写入依赖
npm install -save-dev moduleName # -save-dev 在package文件的devDependencies（开发是的依赖，发布后用不到，比如项目中的gulp，压缩css，js模块）节点下写入依赖

Package.json 属性说明

• name 包名
• version 包版本号
• description 包的描述
• homepage 包的官网url
• author 包的作者姓名
• contributors 包的其他贡献者姓名
• dependencies 依赖包列表
• repository 包代码存放地方的类型 可以是git或svn ，git可以在Github上
• main 指定了程序的主入口文件，require（‘moduleName’）就会加载这个文件，这个字段默认根目录下面的index.js
• keywords 关键字

1. package.json文件中版本号说明
2. “5.0.3” 表示安装指定5.0.3版本
3. “~5.0.3” 表示安装指定5.0.X最新版本
4. “^5.0.3” 表示安装指定5.X.X最新版本

下载的包的使用

• 没有webpack之前定位每个包的路径，手动添加到HTML文件中（不方便）
• CommonJS
• 使用require语句导入包
• 新的ES6可以使用import导入包

es6兼容性解决

现在ie10+，Chrome，Firefox，移动端，NodeJS都支持
兼容性低版本浏览器不支持
两种方式解决：
1.在线转换（编译加大页面渲染时间）
2.提前编译（推荐，不影响浏览器渲染时间）
（通用工具方案babel，jsx，traceur，es6-shim等）
实验步骤：
1.使用npm全局安装babel-cli包（babel -v）
2.项目目录上新建文件 .babelrc
{
" presets":[“es2015”,“stage-2” ]//设置转译规则
“plugins”:[“transform-runtime”]//设置插件
}
3.再安装其他需要插件
4.假设编译整个src目录输出到lib目录，-w即watch，监听文件实时编译输出
“scripts”:{“build”:“babel src -w -d lib”}
5.启动babel工程，命令输入npm run build

拓展yarn

yarn是有facebook，Google，exponent和tidle联合推出的新的js包管理工具，yarn弥补了npm 的一些缺陷（npm install的时候巨慢，同一个项目多人开发，由于安装版本不一致出现的bug）
官网：www.yarnpkg.com

• 下载node.js 使用npm 安装（方式一）
  npm intall -g yarn
  查看版本：yarn --version
• 安装node.js ,下载yarn安装程序（方式二）
  提供.msi文件，在运行的时引导window安装yarn
• yarn 淘宝源安装
  yarn config set registry https://registry.npm.taobao.org -g

yarn的使用

yarn的优点
1、速度快
2、安装版本统一
3、更简洁的输出
4、多注册来源处理
5、更好的语义化