NPM(包管理工具)

最新推荐文章于 2024-03-04 14:42:53 发布

佛耶_

最新推荐文章于 2024-03-04 14:42:53 发布

阅读量4.4k

点赞数 1

分类专栏： web前端技术文章标签：前端 vscode npm

本文链接：https://blog.csdn.net/A13526_/article/details/123918994

版权

web前端技术专栏收录该内容

39 篇文章 6 订阅

订阅专栏

课程说明

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的优点
在这里插入图片描述

佛耶_

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
NPM(包管理工具)

课程说明NPM ---- 包管理器认识一下什么是NPM类似于手机里的APP Store全称*(Node Package Manager),即node包管理器是Node.js默认的、以JavaScript编写的软件包管理系统npm来分享和使用代码已经成了前端的标配官网npm被全球超过1100万开发人员所依赖拥有超过一百万个软件包，是世界上最大的软件注册表总结：拥有了NPM，相当于拥有了超过一百万个软件包，一旦学完npm，后面都用npm来管理包NPM的安装npm是Node,js默认
复制链接

扫一扫