因为不熟悉npm基础知识,我被同事笑话了

简介: 【10月更文挑战第17天】因为不熟悉npm基础知识,我被同事笑话了

背景

由于面试的时候甲骨文背的很多,进入公司后,老板一直觉得我能力还可以,于是给我安排了很多活。但是,我实际经验很少,像git、node、npm这些东西都只是了解阶段。

于是,实际工作后就尴尬了。由于接手的是二手项目,项目中很多依赖有问题,需要进行依赖重装升级等操作。但是,好多我都不熟悉,于是被同事diss了:

npm i -g 和-s的区别你都不知道?切换镜像源你都不知道?查看版本你都不知道?

一套diss下来,我都怀疑人生了。没有谁刚工作就啥都会啊!郁闷!

于是,我下去恶补了知识,把这些常见的知识都梳理了一下!

npm核心必备知识

npm介绍

Npm(Node Package Manager,即node包管理器)是node.js的一个程序包管理和分发的管理工具,它可以让全世界与Web前端相关开发者共享代码,非常方便的使用各种插件、库和框架,无需再到处去搜寻需要用到的这些程序。

核心功能

  • npm服务器下载别人编写的第三方包到本地使用(如vue中安装各种插件)。
  • npm服务器下载并安装别人编写的命令行程序到本地使用。
  • 将自己编写的包或命令行程序上传到NPM服务器供别人使用。

npm 安装与升级

由于新版的node.js已经集成了npm,所以安装node即可安装npm。


使用 " npm -v " 可以测试是否成功安装。

Window 系统下,可以使用 npm install npm -g 升级npm版本

注:如果node版本与npm不匹配,可能会导致npm命令无法使用

模块安装与卸载

安装

npm 安装 Node.js 模块语法格式如下:

$ npm install <Module Name>  ||  npm i <Module Name>

npm i命令中的-g -D -S的区别

npm i xx -g

npm install xx --global的简写,对模块进行全局安装。

所谓全局安装,是指把模块安装到操作系统上,全局是指操作系统,全局安装完成后,一般会安装到AppDataAppData\Roaming\npm目录下。

如:npm install webpack -g,就是全局安装webpack,在操作系统的任何一个目录下都可以使用webpack所提供的指令。

如:全局安装vue,就可以vue create 命令

查看全局安装的目录

查看npm 全局安装的根目录

npm root -g

可以打开这个文件夹观察一下

start D:\Program\node\node_modules

里面的文件夹名就是全局安装的指令。

npm i xx -D

npm install xx --save-dev的简写,对模块进行局部安装,模块写入到 devDependencies 对象。

局部的意思是只针对当前项目,模块一般安装到项目文件夹下的node_modules文件夹下。

devDependencies对象,是我们开发的时候需要用到的一些包,只用于开发阶段,真正打包上线的时候并不需要这些包,因为这些工具只是你用来打包代码的,是用来识别特定文件以及代码,帮助我们生产最终文件的。如npm i vue-loader vue-template-complier -D,就是在Vue项目中安装vue模板文件的解析插件,经过配置后即可在项目中解析vue模板

npm i xx -S

npm install xx --save 的简写,同上也是对模块进行局部安装,不同的是模块写入到 dependencies对象。

模块同上一样将安装到项目文件夹下的node_modules文件夹下。

dependencies对象,这个与devDependencies不同,是需要发布到生产环境中的,就比如你要跑一个基于vue的项目,所以需要vue.js来支持,vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中,并一同发布到生产环境。

卸载

npm uninstall

其他重要知识点

npm link项目全局访问

通过 npm i XX -g的项目在命令行可以全局访问,但是没有全局安装的项目是不能全局访问的。但是我们可以通过命令实现

npm link

这么做,相当于给全局目录新建了当前目录的快捷方式

npm pack本地项目打包

本地开发的一个插件,可以本地打包本地使用。

打包

npm pack

安装

npm i 包的绝对路径 -d

其他常用命令

查看镜像源

npm config get registry

切换镜像源

淘宝源

npm config set registry https://registry.npmmirror.com

默认全局镜像

npm config set registry https://registry.npmjs.org

npm 查看命令(以axios为例)

查看项目中依赖所在的目录

npm root

查看全局安装的依赖所在目录

npm root -g

查看已安装依赖的列表

npm list

或者

npm ls

查看axios最新的版本号

npm view axios version

查看全部axios历史版本号

npm view axios versions

查看最新的axios版本的信息

npm view axios

或者

npm info axios

查看本地已安装的axios的详细信息

npm list axios

或者

npm ls axios

清除npm的缓存

npm cache clean

清除项目中没有被使用的依赖

npm prune 

1
相关文章
|
6月前
|
Python
Python高级技巧:你的代码,也可以“撩”得一手好“骚”!
【6月更文挑战第11天】探索Python高级技巧,提升代码简洁与效率:使用列表推导式简化循环,内置`timeit`模块优化性能,装饰器动态修改函数行为,以及面向对象编程增强可维护性。通过不断创新与实践,让代码展现智慧与魅力!
41 0
|
应用服务中间件 PHP nginx
撸了一个一直想撸的 gem,没有框架的世界,送给 Ruby 新手
撸了一个一直想撸的 gem,没有框架的世界,送给 Ruby 新手
|
前端开发 JavaScript Java
前端基础知识备忘(2)
巩固下备忘下前端的基础知识
1348 61
|
人工智能 运维 算法
和想要通过学习 Python 转行的同学聊一聊
来编程教室的求职者大概都想知道:学Python到底适不适合转行?这个问题也不好回答,因为转行成功的案例绝对不少,但是我从没见过有哪个程序员只会一种语言。Python的优点是,它很适合入门。
|
存储 资源调度 Linux
昨晚,我体会了没有 pnpm 的痛(二)
昨晚,我体会了没有 pnpm 的痛(二)
133 0
|
存储 缓存 固态存储
昨晚,我体会了没有 pnpm 的痛(一)
昨晚,我体会了没有 pnpm 的痛(一)
129 0
|
IDE Unix Linux
开心档-软件开发入门之Python 环境搭建
本章节我们将向大家介绍如何在本地搭建Python开发环境。
开心档-软件开发入门之Python 环境搭建
|
存储 前端开发 JavaScript
【Ajax】全面详细了解git的基础操作【万字教学+面试常客】
【Ajax】全面详细了解git的基础操作【万字教学+面试常客】
141 0
【Ajax】全面详细了解git的基础操作【万字教学+面试常客】