npm环境搭建

npm是什么

npm是前端的包管理工具,类似于后端的maven。现在npm已经集成到nodeJs中,安装好nodeJs就可以安装好npm了。

npm初始配置

一般下载好nodeJs后要对npm进行一些初始化配置。

修改npm的镜像源

npm默认的镜像源是https://registry.npmjs.org/,这个服务器是在国外的,网速一般会比较慢,所以可以修改成我们国内的npm镜像源。

shell 复制代码
# 查看npm当前镜像源
npm config get registry
# 设置npm的镜像源
npm config set registry https://registry.npmjs.org/

# 国内的镜像源
# 腾讯
npm config set registry http://mirrors.cloud.tencent.com/npm/
# 华为
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

修改npm本地仓库的位置

npm在本地有两个仓库,一个是npm-cache,另一个是npm-local

npm-cache 本地缓存

npm-cache是npm的缓存路径,用于存储已经下载的包文件。当您使用npm install安装包时,npm会将下载的包存储在npm-cache中,以便在之后的安装过程中重复使用,避免重复下载。这有助于加快安装速度并减少网络流量。
npm-local 本地全局仓库

npm-local是npm的全局仓库路径,即安装一些通用的工具类,如vue、typescript。用npm install vue -g安装,-g表示global,安装到npm-local中。通常要把该路径加入到环境变量中,这样就可以在命令行直接使用安装好的命令。

shell 复制代码
# npm本地仓库默认在C盘,这很不友好
# 修改npm-local本地路径
npm config set prefix D:\npm_repository\npm-local
npm config get prefix
# 修改npm-cache本地路径
npm config set cache prefix D:\npm_repository\npm-cache
npm config get cache

# 或者通过下面命令查看npm的所有配置
npm config list

npm install、npm install --save与npm install --save-dev区别

npm5.0.0之前,npm install X

npm install:会把X包安装到node_modules目录中;不会修改package.json,所以之后别人拉取最新的代码后运行npm install,不会安装X

npm install --save:会把X包安装到node_modules目录中,并且修改package.json中的dependencies,所以之后别人拉取最新的代码后运行npm install,会安装X

npm install --save-dev:会把X包安装到node_modules目录中,并且修改package.json中的devDependencies,所以之后别人拉取最新的代码后运行npm install,会安装X,但打包的时候不会包含该依赖
npm5.0.0之后(包括npm5.0.0)

npm install和npm install --save是等价的,即默认就是安装依赖并且修改package.json中的dependencies。

shell 复制代码
npm install --save 可以简写为 npm i -S
npm install --save-dev 可以简写为 npm i -D
相关推荐
Predestination王瀞潞10 分钟前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛20 分钟前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
zabr21 分钟前
花了 100+ 篇笔记,我整理出 了一套 AI Agent 工程完全指南
前端·后端·agent
软弹34 分钟前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang37 分钟前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术1 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
爱学习的程序媛1 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
han_1 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式
x***r1511 小时前
Notepad++ 8.6 安装教程:详细步骤+自定义安装路径(附注意事项)
linux·前端·javascript
Hilaku1 小时前
为什么很多工作 5 年的前端,身价反而卡住了?🤷‍♂️
前端·javascript·面试