前言
- 包管理工具npm:
- 如何下载和安装npm工具
- npm管理的包在哪查看
- npm管理的包存放在哪
nvm
- 上面前言里提到过
推荐
,这里我们详细讲解以下如何使用- nvm官网下载地址都是为
Linux和Mac
系统的,我这个windows电脑下载windows版本的。后面有讲如何安装。- 讲node之前,我们先来学学nvm,在公司我们一般不会只有一个前台项目,而不同的项目之间,可能需要node的版本不一致,这时候你切换项目就需要
删除原来的及环境变量等->下载需要的版本然后再配置环境变量
,非常的麻烦,有了nvm之后,我们下载node版本,以及在多个版本之间切换就变得非常简单。- nvm:node版本管理工具,有了它,我们可以很方便的管理node版本,在不同的版本之间切换自如。
- 切换不同项目不同node版本之间的步骤
1、安装nvm
2、nvm常用命令
2.1、list
查看所有下载的node版本
nvm list # 查看安装过的node版本
# 或
nvm ls # 查看安装过的node版本
nvm ls
2.2、install/uninstall
下载
nvm install 16.16.0
nvm ls # 查看是否下载成功
卸载
nvm uninstall 16.16.0
nvm ls # 查看是否卸载成功
2.3、use
使用其他版本的node,软件上的控制台可能执行完毕会报错,原因是没有权限,以管理员身份打开命令提示符,然后再次执行命令即可
nvm use 14.19.1
2.4、current
npm(详细)
通常,我们在项目根目录下,会创建一个名为
package.json
文件,然后npm会根据里面的配置依赖,来下载对应的依赖。
1、package.json
1.1、创建文件
{
"name": "npm-study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
1.2、常见属性配置
(1)、必须填写的属性:name、version
(2)、private属性
(3)、main属性
(4)、scripts属性(重要)
修改前
function test1(){
console.log("我是test1");
}
function test2(name){
console.log("我是" + name);
}
test1()
test2("张三")
修改后
"scripts": {
"start": "node ./src/index.js"
},
终端
(5)、dependencies属性(重要)
(6)devDependencies属性(重要)
(7)、peerDependencies属性
(8)、engines属性
(9)、browserslist属性
1.3、依赖的版本管理
我们的
dependencies
和devDependencies
属性负责记录依赖的版本。
2、npm install命令
安装npm包分两种情况:
全局安装
注意
3、package-lock.json
npm为了让开发者在安全的前提下使用最新的依赖包,在package.json中通常做了锁定大版本的操作,这样在每次npm install的时候都会拉取依赖包大版本下的最新的版本。这种机制最大的一个缺点就是当有依赖包有小版本更新时,可能会出现协同开发者的依赖包不一致的问题。
具体用处,会在下一小节详细讲解
3.1、文件解析
4、npm install原理
- 执行
npm install
它背后帮助我们完成了什么操作- 我们会发现还有一个称之为
package-lock.json
的文件,它的作用是什么- npm5开始,npm支持缓存策略(来自yarn)的压力,缓存有什么用
npm install 原理图
5、npm其他命令
yarn
NPM YARN npm install yarn install npm install [package] yarn add [package] npm install —save [package] yarn add [package] npm install —save-dev [package] yarn add [package] [-dev/-D] npm install [package@x.y.z] yarn add [package@x.y.z] npm i -g [package] yarn global add [package] npm rebuild yarn install –force npm uninstall [package] yarn remove [package] npm uninstall —save [package] yarn remove [package] npm uninstall —save-dev [package] yarn remove [package] npm uninstall —save-optional [package] yarn remove [package] npm cache clean —force yarn cache clean —force rm -rf node_modules && npm install yarn upgrade —latest
cnpm
由于npm或yarn默认仓库的地址为国外的,可能会导致:下载会比较慢,或者下载途中某些文件丢失等问题,我们一般会将仓库地址改为淘宝的镜像仓库地址。
1、下载方式
两种方式
npx
1、讲解
- 下载的所有的依赖中包含的命令,全部在
node_module->.bin
目录下。- 当你在项目目录中执行
webpack -v
的时候,会从你当前项目目录中找命令,并不会智能的去子目录中找- 当在子目录中找不到的时候,就会去全局查找(我们使用npm安装的时候,后面 -g 的命令)
- 当全局和局部都安装了相同的包时,在当前项目下执行命令
yarn -v
,就会执行全局版本的命令。但是当进入.bin目录后,再次执行命令,还是执行全局版本的命令。- 只有执行
npx yarn -v
的时候,才会执行局部版本的命令- 所以当你想执行依赖包中的命令的时候有以下办法
- 下载
webpack
的时候,也需要同时安装webpack-cli
才能执行命令,否则会报错提示安装yarn add webpack webpack-cli -D
2、执行依赖包中的命令的方式
2.1、错误示例
2.2、方法一
cd .node_modules.bin
.webpack -v
2.3、方法二
package.json中的scripts
"scripts": {
"start": "node ./src/index.js",
"webpackV": "webpack -v"
},
命令
npm run webpackV
2.4、方法三
npx webpack -v
上传自己的包
- 上传自己的包,首先我们要注册一个npm的账号,官网:https://www.npmjs.com/
- 然后在
index.js
中随便写几个方法,用于上传包后测试- 然后查看
package.json
文件中是否有private
属性,改为false
,还有其他的配置- 然后在命令行中登录
npm login
- 执行命令
npm publish
,然后等待完成即可将包上传成功- 这时候打开npm包查看官网:https://www.npmjs.com/,然后搜索自己在
package.json
中定义的name
名,即项目名即可搜索到- 然后再创建一个新的目录,初始化,然后下载安装咱们刚刚提交好的包,js中引入,查看是否能使用即可
- 注意:我们一般会把项目使用打包工具,比如webpack,打包后再进行发布,这样可以让使用的人下载的时候,更快一些,减小包的体积
更新包步骤
1、发布包
1.1、index.js中测试方法
export function test1(val){
return "我是test1方法,您的传参为:" + val;
}
export function sum(val1,val2){
return val1 + val2;
}
1.2、修改属性
{
"name": "npm-demo-01-tcc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": false,
"type": "module",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": ["tccc","ycccc"],
"author": "宇辰",
"license": "ISC"
}
1.3、命令行中登录
npm login
1.4、上传包
npm publish
1.5、测试
这时候,我们就上传成功啦
仓库搜索
代码测试
package.json
{
"name": "npm-demo-02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"npm-demo-01-tcc": "^1.0.0"
}
}
index.js
import {test1, sum} from "npm-demo-01-tcc";
console.log(test1(123456));
console.log(sum(100,200))
2、更新包
2.1、修改代码
export function test1(val){
return "我是test1方法,您的传参为:" + val;
}
export function sum(val1,val2){
return val1 + val2;
}
export function sub(val1,val2){
return val1 - val2;
}
2.2、修改版本号
{
"name": "npm-demo-01-tcc",
"version": "1.1.0",
"description": "",
"main": "index.js",
"type": "module",
"private": false,
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": ["tccc","ycccc"],
"author": "宇辰",
"license": "ISC"
}
2.3、重新上传
重新上传需要进入到包的项目目录里,执行命令
npm publish
2.4、测试
import {test1, sum, sub} from "npm-demo-01-tcc";
console.log(test1(123456));
console.log(sum(100,200))
console.log(sub(200,100))
3、卸载包
共有两个命令
pnpm(新东西)
- 出现原因
- 如果工作的话,你的笔记本上,不可能只有一个前台项目,那么每个项目都需要安装
node_modules
依赖,如果你有100个项目,就会装一百个,并且里面很多依赖都相同,非常占用空间资源- 每个新项目下载资源也会非常的耗费时间
- npm5和yarn为了解决依赖的依赖和其他依赖的依赖重复问题,使用了扁平化安装依赖。比如:我们安装axios的时候,可以看到
node_modules
中多了很多依赖包,这些依赖包都是axios
依赖中所拥有的依赖,它们在npm5
版本之前,是会存到各自文件的node_modules
中,但是这样又无法解决一个依赖的依赖和另一个依赖的依赖是一个版本,但是却被下载了两份的问题。所以后面改成和yarn
一样,对node_modules
进行了扁平化管理。- 上面这样的坏处是,由于依赖的依赖被拉出来了,导致我的项目中也能使用这个依赖。但是我的
package.json
并没有记录这个依赖。假如有一天axios
被删除了,那么它的依赖也会跟着删除。如果我项目中使用了这个依赖,就会报错。这样的以来问题称之为:幽灵依赖- pnpm优点
1、软连接和硬链接
1.1、拷贝和硬链接的区别
1.1.1、拷贝
1.1.2、硬链接
2、文件拷贝和硬链接和符号连接命令
#windows
copy index.js index2.js
#macos
cp index.js index2.js
当修改index.js文件的时候,并不影响index2.js
文件的硬链接,使用命令吧
#windows
mklink /H index2.js index.js
#macos
ln index2.js index.js
文件的软连接
然后进入当前测试文件的目录中
#windows
mklink index2.js index.js
#macos
ln -s index2.js index.js
2、下载pnpm
下载的方式有很多种,可以查看官网:https://pnpm.io/zh/installation
我们这里使用 npm 来进行安装
# npm命令
npm install -g pnpm
# yarn命令
yarn global add pnpm
3、使用pnpm命令
我们新创建一个项目来测试使用,里面新建一个
index.js
文件,作为主文件
3.1、init
当我们执行命令的时候,pmpn会直接给我们创建一个
package.json
文件,里面内容和npm
的生成的一致,不过我们可以省略-y
不写
pnpm init
3.2、add/remove
remove:删除指定依赖
add
pnpm add axios # 开发和生产依赖
pnpm add -D axios # 开发依赖
pnpm add -g yarn # 全局依赖
pnpm add axios@x.y.z #安装指定版本依赖
remove
pnpm remove [-D|-g] axios
3.3、install
package.json
{
"name": "pnpm-demo-03",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.3.4"
},
"devDependencies": {
"webpack": "^5.76.3 ",
"webpack-cli": "^5.0.1"
}
}
pnpm install
pnpm i # 简写
3.4、run
4、node_modules讲解
5、存储store
6、下载速度测试
你可以创建两个测试项目
- 上面写的是这么就,我感觉没有这么久,第二次我感觉用了10秒九下载好了
nrm
1、全局安装
上面讲了很多常用工具了,我这里只写了使用npm来全局安装,这样会简单一些==(不需要把其他对应的工具来添加到环境变量,才能正常访问使用别的工具全局安装的工具了)==。
npm i -g nrm@1.0.0 # 下载这个版本之上的可能会有 require() of ES Module 报错,这个版本是没有问题的
nrm --version # 查看版本
2、常用命令
2.1、add/del
nrm add taobao https://registry.npm.taobao.org/ # 添加淘宝镜像
nrm add cnpmjs https://registry.nlark.com/ # cnpmjs镜像
nrm add huawei https://mirrors.huaweicloud.com/repository/npm/ # 华为云镜像
nrm add tengxun https://mirrors.cloud.tencent.com/npm/ # 腾讯云镜像
2.2、ls
nrm ls
2.3、use
npm config get registry # 先查看npm的仓库地址
nrm use taobao # 然后通过nrm修改地址
npm config get registry # 再查看npm的仓库地址,查看是否改变
# 前面有错号小图标的不用管
2.4、test
nrm test
原文地址:https://blog.csdn.net/qq_57404736/article/details/129768276
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_43358.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!