NPM(包管理工具)
课程说明
NPM ---- 包管理器
认识一下什么是NPM
类似于手机里的APP Store
- 全称*(Node Package Manager),即node包管理器
- 是Node.js默认的、以JavaScript编写的软件包管理系统
- npm来分享和使用代码已经成了前端的标配
- 官网
- npm被全球超过1100万开发人员所依赖
- 拥有超过一百万个软件包，是世界上最大的软件注册表
总结：拥有了NPM，相当于拥有了超过一百万个软件包，一旦学完npm，后面都用npm来管理包
NPM的安装
- npm是Node,js默认的软件包管理系统
- 安装完毕node后，会默认安装好npm
- npm本身也是基于Node.js开发的软件
- 下载node
下载安装以后，使用在命令行中使用node -v观察是否，
安装node以后，npm其实就自然而然的安装好了，使用npm -v观察版本
也可以使用npm install npm -g安装最新版本的npm
更新以后的版本
-g表示全局安装找到想要安装的项目的目录，然后进去安装，就安装在当前目录的文件夹中
查看下载的时候是由哪一个镜像下载而来的，也可以将一个镜像地址进行相应变换
淘宝镜像地址 https://registry.npm.taobao.org–global
如果切换没有成功的话，可以使用nrm工具切换淘宝源，加快下载速度
- 这样下载的速度会变得非常快！
NPM的基本使用
- 因为一开始npm我们是安装在全局变量当中的。
找到项目所在的路径
- 更新到最新的jquery版本
-
也可以删除一个包
jquery是运行时依赖 -
babel-cli 运行的时候是用不上的，具体在配置文件中体现
package.json文件属性详解
- 学习npm最主要是要学会配置，生成配置文件
- 任何事件都可以使用Ctrl + C来进行退出，
- 在vscode中终端打开
- 在接着安装一个开发时依赖
**如果把自己写得代码（不包含安装配置目录发送给别人），接受到代码文件的人可以使用命令 npm install **获取原有的配置文件
- 这个符号表示更新后面两位，波浪线表示更新后面两位，什么符号都没有表示固定的
新安装的内容都会重写这里面的两个内容
Package.json属性说明
- 版本其实很重要，拿到别人的项目最好使用别人的项目开发版本
NPM安装的包的使用
npm常用的命令
js中想要调用jquery包，使用的方式
// js中想要调用jquery，
const $ = require('jquery')
console.log($)
运行js文件的时候，邮件打开终端，执行命令即可
模块操作
// foo.js
// module.exports = 100
module.exports = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// func.js
module.exports = function (args) {
let sum = 0
for (let i = 0; i < args.length; i++) {
sum += i
}
return sum
}
// index.js
// js中想要调用jquery，
const $ = require('jquery')
// console.log($)
let num = require('./foo.js')
// console.log(num);
const fun = require('./func')
console.log(fun(num))
运行的时候还是在终端运行即可
练习通过npm安装包来解决ES6语法兼容性问题
因为有一些老一点的浏览器ES6语法是不支持的，所以我们可以使用相应的工具进行语法转换 - 可以在代码中添加一些转换操作
前端常用的CDN
在线转换演示(用的较少)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-core/6.1.9/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
const name = "学习猿地"
console.log(name)
</script>
</body>
</html>
提前编译
检查是否安装成功，在程序运行的时候，如果出现无法加载文件 C:\Users\HK\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本，。我们要运行管理员命令：
项目下新建一个文件
上面转换成es2015以后，继续安装我们需要的库
npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 --save-dev
观察package.json文件，可以发现我们想要的都安装好了
为了不用每次执行文件代码的时候书写命令，可以将命令写在全局package.json文件当中
接着在终端运行下面命令
转换以后，在index.js中就有转换以后的代码
NPM的竞品yarm的安装和使用
Yarm是什么：为了弥补npm的一些缺陷
Yarm的安装
yarn的基本使用
生成相应的文件配置，添加一个项目和npm操作时候是一样的
Yarn的优点
