Vue3学习笔记- NPM包管理工具
导语
这篇分享是关于Vue3 系列的学习知识的整理的开始,能够对大家学习带来帮助。也是对自己能力的一种提升。
学习大纲
- 认识NPM
- 安装NPM
- 使用NPM
- NPM中级用法
- 了解package.json文件
- package.json 文件详解
- NPM包使用
- 模块的基本应用
- NPM 和yarn的对比和迁移
认识NPM
NPM (全称Node Package Manager也就是Node包管理器)是Node.js默认的、以JavaScript 编写的软件包管理系统。通过NPM来分享和使用代码已经成了前端的标配,它的官网是 https://www.npmjs.com。类似于Maven 是世界上最大的软件注册列表系统。
在编写程序的时候,有很多相同的重复功能,也就是说天下代码一大抄,既然出现了这种情况,就可以通过一种统一的管理工具将这些重复的内容高质量的管理起来。类似于Maven,为Java开发者和Android开发者提供了很多的公共的使用的高质量的代码管理。
安装NPM
NPM是Node.js 默认的软件包管理系统,安装Node.js完毕之后,会默认的进行安装NPM,NPM本身也是基于Node.js 开发的软件。
Node 下载地址 https://nodejs.org/en/
关于NPM在不同操作环境上的安装方式,可以通过搜索引擎找到对应的安装方式
使用NPM
安装完成NPM之后如何去使用它呢?加入需要在项目中安装一个JQuery就到NPM官网上去进行查找。
安装
在使用安装的时候,我们需要知道在哪个项目目录下使用,首先需要知道对应的项目路径,在哪个路径下面执行了命令,就会默认把那个目录当做是项目路径来使用
npm install jquery -g
执行完成之后可以查看当前的安装路径中的内容。会发现路径里面是空的,这里为什么会没有呢,是因为使用了-g,将内容安装到了全局。这里如果将-g 去掉之后就会在默认的项目中进行安装。
npm install jquery
这个时候会发现这个路径下面会有一些不一样的东西出现,这里出现了三个文件,一个是文件夹内容,剩余的两个是包管理的JSON文件。
查看安装镜像
npm config get registry
设置镜像
npm config set registry [指定的安装镜像路径] --global 全局安装npm config set registry https://registry.npm.taobao.orgnpm config set registry https://registry.npm.taobao.org
npm i -g express
使用nrm工具切换淘宝源
npx nrm use taobao
NPM中级用法
- npm -v 通过查看版本,看npm是否安装成功
- npm install < Module Name > 使用npm 命令安装模块 可以使用 @ 符来指定版本号
- npm install < Module Name > -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节点写入依赖
- devDependencies:开发时的依赖,里面的模块是开发的时候进行使用的,发布的时候用不到它,例如项目中使用gulp,压缩css、js的模块,这些模块在项目部署之后是不需要的。
了解package.json文件
{"name": "npminstall", // 项目名"version": "1.0.0", // 版本号"description": "test", // 包描述"main": "index.js", // 主入口文件"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "",// 开发者"license": "ISC"
}
package.json 文件详解
使用了npm install juery -save 命令之后,会在目录中产生一个package-lock.json 的文件,内容如下。这个被称为是锁文件,它是根据package.json文件生成的
{"name": "npminstall","version": "1.0.0","lockfileVersion": 2,"requires": true,"packages": {"": {"version": "1.0.0","license": "ISC","dependencies": {"jquery": "^3.6.0"}},"node_modules/jquery": {"version": "3.6.0","resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.6.0.tgz","integrity": "sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA="}},"dependencies": {"jquery": {"version": "3.6.0","resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.6.0.tgz","integrity": "sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA="}}
}
package.json 文件内容如下
{"name": "npminstall","version": "1.0.0","description": "test","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"jquery": "^3.6.0"}
}
package.json 文件中的版本号的说明,安装的时候代表不同的含义:
- “5.0.3” 表示安装指定的 5.0.3 版本
- “~5.0.3” 表示安装5.0.x中最新的版本
- “^ 5.0.3” 表示安装5.x.x 中最新的版本
NPM包使用
在项目路径下创建index.html 文件进行使用如下
在index.html文件中引入对应的jquery的依赖,内容如下,在没有webpack都是通过这样的方式来添加到对应的HTML文件中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body><script>$(function () {alert("hello")})
</script>
</body>
</html>
const $ = require('jquery')let num = require("./foo")console.log(num)
模块的基本应用
babel的使用
- 使用NPM全局安装babel-cli包。
- 找一个目录,用npm来初始化一个项目,用来搭建环境
- babel 提供了一个编译工具babel-node,也可以通过这个工具执行js代码
- 在项目路径下新建 .babelrc 文件
{
“presets”:[“es2015”,“stage-2”],
“plugins”:[“transform-runtime”]
}
- 安装需要的库
npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime bable-preset-stage2 -save-dev
- 编写运行脚本 build : babel src -w -d lilb
- 新建src目录和lib目录,不然编译的时候回报错
- 命令行输入npm run build
NPM 和yarn的对比和迁移
Yarn是什么
"Yarn 是由Facebook、Google、Exponent 和Tilde"联合推出的一个新的JS包管理工具,Yarn 是为了弥补npm 的一些缺陷而出现的,因为NPM5以前会出现下面的问题
- npm install 的时候很慢,
- 同一个项目多人开发的时候,由于安装的版本不一致出现bug
Yarn 的安装
下载node.js 使用npm 安装
npm install -g yarn
安装node.js 下载yarn的安装程序
Yarn淘宝源安装
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
yarn 使用
yarn add < Module Name > 添加模块
yarn add < Module Name > -dev 开发依赖
yarn remove < Module Name> 移除依赖
- yarn init //初始化项目执行输入信息后,会生成package.json文件
- yarn install // 安装package.json 里所有包,并将包及它的所有依赖项保存进yarn.lock
- yarn install --flat // 安装一个包的单一版本
- yarn install --force //强制重新下载所有包
- yarn install --production //只安装dependencies里的包
- yarn install --no-lockfile // 不读取或生成yarn.lock
- yarn iinstall --pure-lockfile //不生成 yarn.lock
- yarn add [package] //安装包
- yarn add [package]@[version] //指定版本安装
- yarn add [package]@[tag] // 安装某个tag
- yarn add --dev/-D //添加不同的依赖项
- yarn add --peer/-P
- yarn add --optional/-O
- yarn add --exact/-E //安装包的精确版本
- yarn add --tilde/-T // 安装包的次要版本里的最新版本
- yarn publish //发布包
- yarn remove 移除一个包
- yarn upgrade 更新一个依赖
- yarn run 运行脚本
- yarn info 查询包信息
- yarn cache 缓存
- yarn cache list 列出已缓存的每个包
- yarn cache dir 返回全局缓存位置
- yarn cache clean 清除缓存
Yarn的优点
- 速度快
- 安装版本统一
- 更简洁的输出
- 多注册来源处理
- 更好的语义化
Vue3学习笔记- NPM包管理工具相关推荐
- Node.js学习之路--npm包管理工具操作汇总
因为在学习使用Express(第三方Web开发框架)时需要下载这个包,所以使用npm包管理工具这个相关的操作,现在将其相关的操作进行汇总. npm命令在cmd或者powershell中进行;注意:使用 ...
- (18) Node.js npm包管理工具
一.npm概述 npm (Node Package Manager)是 Node.js 的包管理工具. 什么是包?包就是一坨代码,就是 Node.js 的第三方模块. 例如:JQuery模块,Boot ...
- node.js中npm包管理工具
现在安装node.js,默认就会帮我们装上了npm包管理工具,npm主要用来下载,安装,管理第三方模块. 创建一个包描述文件: npm init [-y] 查看包的信息 npm info <pa ...
- 现代化程序开发笔记(4)——包管理工具
本系列文章以我的个人博客的搭建为线索(GitHub 仓库:Evian-Zhang/evian-blog),记录我在现代化程序设计中的一些笔记.在这篇文章中,我会就项目构建工具和包管理工具做一些讨论,先 ...
- npm包管理工具与ES6官方模块化规范
npm介绍 npm有两种含义 : 第一种: 包管理工具node package manager 第二种:npm网站代码托管平台 1.npm 全称node package manager 官方推出的包管 ...
- RedHat学习笔记28--防火墙管理工具及iptables
本系列博客是笔者在学习刘遄的<Linux就该这样学>的笔记,个人觉得这是一本很好的书,很值得我们去学习.因为笔者是自学,可能有些问题了解的层面没有那么深,各位大牛在看到笔者写的内容有错漏, ...
- npm 切换源_nrm:npm包管理工具
一.简介:nrm(npm registry manager )是npm的镜像源管理工具,可以方便的更换npm的包源.可解决问题: 1.更换国内镜像包源(如淘宝npm镜像)解决国内npm国外包慢的问题: ...
- npm包管理工具的安装及配置使用
1.什么是npm npm(Node Package Manager,即:node包管理器)是nodeJS的一个程序包管理和分发的管理工具,npm完全用JavaScript写成,它可以让全世界与Web前 ...
- Node js npm 包管理工具的基本使用
初始化一个node项目 npm initnpm init -y 没有 -y 参数表示自定义一些参数 -y 参数表示默认选项 初始化项目之后就会多出一个 package.json 的文件 查找需要的包 ...
最新文章
- 如何为linux服务器配置DNS解析?
- 使用 Gitlab 进行嵌入式软件开发技巧
- 独家 | 一个好的事件跟踪字典是什么样的?
- python求三个整数最大值_怎么用python比较三个数大小
- visual studio code配置项
- C# 中科学计数法转成正常值
- 【BZOJ 1096】[ZJOI2007]仓库建设
- 谈谈微服务中的 API 网关(API Gateway)
- js for in 遍历对象与数组
- 织梦(DEDECMS)首页调用相关投票的方法(自动更新)
- [转载] java中数组的反射的探究
- android shareUID
- xdebug调试时出错 --mxp
- 百行代码带你入门 vue-router!
- 【机器人】机械臂与动捕Nokov的深入了解
- qt调用仪器驱动库dll实现程控
- 一句批处理快速把优酷KUX转MP4
- 星际争霸2Beta测试版单机模式已经破解
- Essay-编程语言排行榜2013年10月:Groovy首次闯入前二十
- java list 模糊查询_如何在java List中进行模糊查询(示例代码)