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表示全局安装找到想要安装的项目的目录,然后进去安装,就安装在当前目录的文件夹中

NPM(包管理工具)_第1张图片
查看下载的时候是由哪一个镜像下载而来的,也可以将一个镜像地址进行相应变换
在这里插入图片描述
NPM(包管理工具)_第2张图片
淘宝镜像地址 https://registry.npm.taobao.org–global

如果切换没有成功的话,可以使用nrm工具切换淘宝源,加快下载速度
NPM(包管理工具)_第3张图片

  • 这样下载的速度会变得非常快!

在这里插入图片描述

NPM的基本使用

NPM(包管理工具)_第4张图片

  • 因为一开始npm我们是安装在全局变量当中的。

找到项目所在的路径
NPM(包管理工具)_第5张图片
在这里插入图片描述
NPM(包管理工具)_第6张图片

  • 更新到最新的jquery版本

NPM(包管理工具)_第7张图片

  • 也可以删除一个包
    NPM(包管理工具)_第8张图片
    jquery是运行时依赖

  • babel-cli 运行的时候是用不上的,具体在配置文件中体现
    NPM(包管理工具)_第9张图片

package.json文件属性详解

  • 学习npm最主要是要学会配置,生成配置文件

NPM(包管理工具)_第10张图片

  • 任何事件都可以使用Ctrl + C来进行退出,
  • 在vscode中终端打开

NPM(包管理工具)_第11张图片

  • 在接着安装一个开发时依赖
    NPM(包管理工具)_第12张图片
    **如果把自己写得代码(不包含安装配置目录发送给别人),接受到代码文件的人可以使用命令 npm install **获取原有的配置文件
    在这里插入图片描述
  • 这个符号表示更新后面两位,波浪线表示更新后面两位,什么符号都没有表示固定的

新安装的内容都会重写这里面的两个内容
在这里插入图片描述
Package.json属性说明
NPM(包管理工具)_第13张图片

  • 版本其实很重要,拿到别人的项目最好使用别人的项目开发版本

NPM安装的包的使用

npm常用的命令
NPM(包管理工具)_第14张图片
NPM(包管理工具)_第15张图片
js中想要调用jquery包,使用的方式

// js中想要调用jquery,
const $ = require('jquery')
console.log($)

运行js文件的时候,邮件打开终端,执行命令即可
NPM(包管理工具)_第16张图片
NPM(包管理工具)_第17张图片
NPM(包管理工具)_第18张图片
模块操作

// 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语法兼容性问题

NPM(包管理工具)_第19张图片

因为有一些老一点的浏览器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>

提前编译
NPM(包管理工具)_第20张图片
NPM(包管理工具)_第21张图片
检查是否安装成功,在程序运行的时候,如果出现无法加载文件 C:\Users\HK\AppData\Roaming\npm\babel.ps1,因为在此系统上禁止运行脚本,我们要运行管理员命令:
在这里插入图片描述
项目下新建一个文件
NPM(包管理工具)_第22张图片
上面转换成es2015以后,继续安装我们需要的库
npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 --save-dev
NPM(包管理工具)_第23张图片
观察package.json文件,可以发现我们想要的都安装好了
NPM(包管理工具)_第24张图片
为了不用每次执行文件代码的时候书写命令,可以将命令写在全局package.json文件当中
NPM(包管理工具)_第25张图片

接着在终端运行下面命令
NPM(包管理工具)_第26张图片
转换以后,在index.js中就有转换以后的代码

NPM的竞品yarm的安装和使用

Yarm是什么:为了弥补npm的一些缺陷
NPM(包管理工具)_第27张图片

Yarm的安装
NPM(包管理工具)_第28张图片
在这里插入图片描述
在这里插入图片描述
yarn的基本使用
NPM(包管理工具)_第29张图片
生成相应的文件配置,添加一个项目和npm操作时候是一样的

Yarn的优点
NPM(包管理工具)_第30张图片
NPM(包管理工具)_第31张图片

你可能感兴趣的:(web前端技术,前端,vscode,npm)