百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

深入了解Npm

ztj100 2025-01-13 19:17 15 浏览 0 评论

1、npm 是什么?

  1. npm(node package manager):node.js 的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) ,npm 是随同 node.js 一起安装的包管理工具,能解决 node.js 代码部署上的很多问题,常见的使用场景有以下几种:
  • 允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
  • 允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。
  1. npm是一个包管理器,它让 javascript 开发者分享、复用代码更方便.在程序开发中我们常常需要依赖别人提供的框架,写js 也不例外。这些可以重复的框架代码被称作包(package)或者模块(module),一个包可以是一个文件夹里放着几个文件,同时有一个叫做 package.json的文件.
  2. 一个网站里通常有几十甚至上百个package,分散在各处,通常会将这些包按照各自的功能进行划分(类似安卓开发中的划分子模块),但是如果重复造一些轮子,不如上传到一个公共平台,让更多的人一起使用、参与这个特定功能的模块。而npm 的作用就是让我们发布、下载一些JS轮子更加方便。
  3. 可以去官方网站:https://www.npmjs.com/,浏览、搜索想要的轮子,也可以直接在命令行中 search一下。
  • 如:npm中搜索 jQuery
  1. 使用npm后可以非常方便地查看依赖的轮子是否有更新、是否需要下载新版本。现在知道npm是干什么的了。当人们说起“npm”时,可能在说三个东西: 1.一个网站,就是前面提到用于搜索JS模块的网站:https://www.npmjs.com/ 2.一个仓库,保存着人们分享的JS模块的大数据库 3.命令行里的客户端,开发者使用它来管理、安装、发布模块

2、安装 npm

  1. 安装 node.js 的时候会相应地安装 npm,node.js 已经集成了 npm,所以安装 node.js 后 npm 也安装好了。
  • 下载官网:https://nodejs.org/en/
  • 中文学习node API 文档:http://nodejs.cn/
  • 查看本地 node 和 npm 是否安装成功

3、更新 npm

npm 更新的可比 node勤快多了,因此你下载的node附带的 npm 版本可能不是最新的,你可以使用如下命令下载最新 npm:

npm install npm@latest -g    相当于npm install xxx@最新版 -全局

npm install -g npm

其中install不用介绍了,就是安装,后面的

npm@latest

就是@的格式,@后面加上版本号。在下载其他模块时也是这个格式。

-g

代表全局安装。

4、package.json 文件介绍

  • npm 的全称:Node Package Manager,中文意思:node包管理器。
  • 管理本地安装npm包的最好方式就是创建package.json文件。一个 package.json文件可以有以下几点作用:
  1. 作为一个描述文件,描述了你的项目依赖哪些包
  2. 允许使用“语义化版本规则”(后面介绍)指明你项目依赖包的版本
  3. 让你的构建更好地与其他开发者分享,便于重复使用
  • 案例:在新建的空文件夹中 npm 下载 jQuery 包
npm install jquery

而 jQuery 就在 node_module 文件夹下:

5、package.json 如何创建

使用 npm init 即可在当前目录创建一个 package.json 文件:

  • 输入npm init后会弹出一堆问题,可以输入对应内容,也可以使用默认值。在回答一堆问题后输入yes 就会生成图中所示内容的 package.json文件。
  • 如果嫌回答这一大堆问题麻烦,可以直接输入npm init --yes 跳过回答问题步骤,直接生成默认值的 package.json 文件:

6、package.json 的内容

  • package.json文件至少要有两部分内容:
  1. “name”:全部小写,没有空格,可以使用下划线或者横线
  2. “version”: x.x.x 的格式,符合 “语义化版本规则”
  • 如:
"name": "demo-package","version": "1.0.0",

案例:在一个空文件夹下初始化创建 package.json

这些默认生成的都可以去修改

其他内容:

  • description:描述信息,有助于搜索
  • main:入口文件,一般都是 index.js
  • scripts:支持的脚本,默认是一个空的 test
  • keywords:关键字,有助于在人们使用 npm search搜索时发现你的项目author :作者信息
  • license :默认是 MIT
  • bugs:当前项目的一些错误信息,如果有的话
  • 可以为init命令设置一些默认值,比如:
> npm set init.author.email "xxx@gmail.com"> npm set init.author.name "xdr630"> npm set init.license "MIT"

scripts 案例详解:把上面初始化的 package.json 做如下修改

执行

npm run abc

查看

7、dependencies(生产环境)和 devDependencies(开发环境)的区别

  • 就是在项目的开发阶段就是开发环境;项目上线了,开始正式提供对外服务,上线后的阶段就是生产环境。 在生产环境下,一般会关掉错误报告,打开错误日志等操作。
  • devDependencies 配置的是开发环境,安装项目开发时所依赖的模块。比如像webpack工具,只是用来构建项目和打包,这些都是在开发阶段才使用的,等项目上线后就用不到webpack工具了,那么就可以把webpack安装到开发环境中,使用 --save-dev 命令安装到devdependencies下,命令语法:
npm install --save-dev packageName# 简写npm i -D packageName

dependencies配置的是生产环境,安装项目运行时所依赖的模块。比如jQuery库,等项目上线以后依然是要继续使用的,我们就要安装在生产环境中,如果没有把需要的依赖安装到生产环境中,项目上线运行时就有可能会报错。使用 --save 命令安装到 dependencies 下,命令语法:

npm install --save packageName# 简写npm i -S packageName

总结

  1. 使用npm安装依赖时,–save–save-dev
  • 使用–save安装的依赖,会被写到dependencies区块里面去。
  • 而使用–save-dev安装依赖,则会被写到devDependencies区块里面去
  • 什么都不写,只是本地安装,并非全局。这时候会被写到dependencies区块里面去。
  1. package.json 文件中dependenciesdevDependencies的区别
  • devDependencies 里面的依赖只用于开发环境,不用于生产环境。而 dependencies 依赖的包不仅开发环境能使用,生产环境也能使用。
  • 两种环境的的指定方式是通过配置文件中的NODE_ENV=developementNODE_ENV=production来指定是开发还是生产环境的。
  • 使用的一些构建工具例如glup、webpack这些只是在开发中使用的包,上线以后就和他们没关系了,所以将它写入devDependencies

相关推荐

使用Python编写Ping监测程序(python 测验)

Ping是一种常用的网络诊断工具,它可以测试两台计算机之间的连通性;如果您需要监测某个IP地址的连通情况,可以使用Python编写一个Ping监测程序;本文将介绍如何使用Python编写Ping监测程...

批量ping!有了这个小工具,python再也香不了一点

号主:老杨丨11年资深网络工程师,更多网工提升干货,请关注公众号:网络工程师俱乐部下午好,我的网工朋友。在咱们网工的日常工作中,经常需要检测多个IP地址的连通性。不知道你是否也有这样的经历:对着电脑屏...

python之ping主机(python获取ping结果)

#coding=utf-8frompythonpingimportpingforiinrange(100,255):ip='192.168.1.'+...

网站安全提速秘籍!Nginx配置HTTPS+反向代理实战指南

太好了,你直接问到重点场景了:Nginx+HTTPS+反向代理,这个组合是现代Web架构中最常见的一种部署方式。咱们就从理论原理→实操配置→常见问题排查→高级玩法一层层剖开说,...

Vue开发中使用iframe(vue 使用iframe)

内容:iframe全屏显示...

Vue3项目实践-第五篇(改造登录页-Axios模拟请求数据)

本文将介绍以下内容:项目中的public目录和访问静态资源文件的方法使用json文件代替http模拟请求使用Axios直接访问json文件改造登录页,配合Axios进行登录请求,并...

Vue基础四——Vue-router配置子路由

我们上节课初步了解Vue-router的初步知识,也学会了基本的跳转,那我们这节课学习一下子菜单的路由方式,也叫子路由。子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只...

Vue3.0权限管理实现流程【实践】(vue权限管理系统教程)

作者:lxcan转发链接:https://segmentfault.com/a/1190000022431839一、整体思路...

swiper在vue中正确的使用方法(vue中如何使用swiper)

swiper是网页中非常强大的一款轮播插件,说是轮播插件都不恰当,因为它能做的事情太多了,swiper在vue下也是能用的,需要依赖专门的vue-swiper插件,因为vue是没有操作dom的逻辑的,...

Vue怎么实现权限管理?控制到按钮级别的权限怎么做?

在Vue项目中实现权限管理,尤其是控制到按钮级别的权限控制,通常包括以下几个方面:一、权限管理的层级划分...

【Vue3】保姆级毫无废话的进阶到实战教程 - 01

作为一个React、Vue双修选手,在Vue3逐渐稳定下来之后,是时候摸摸Vue3了。Vue3的变化不可谓不大,所以,本系列主要通过对Vue3中的一些BigChanges做...

Vue3开发极简入门(13):编程式导航路由

前面几节文章,写的都是配置路由。但是在实际项目中,下面这种路由导航的写法才是最常用的:比如登录页面,服务端校验成功后,跳转至系统功能页面;通过浏览器输入URL直接进入系统功能页面后,读取本地存储的To...

vue路由同页面重定向(vue路由重定向到外部url)

在Vue中,可以使用路由的重定向功能来实现同页面的重定向。首先,在路由配置文件(通常是`router/index.js`)中,定义一个新的路由,用于重定向到同一个页面。例如,我们可以定义一个名为`Re...

那个 Vue 的路由,路由是干什么用的?

在Vue里,路由就像“页面导航的指挥官”,专门负责管理页面(组件)的切换和显示逻辑。简单来说,它能让单页应用(SPA)像多页应用一样实现“不同URL对应不同页面”的效果,但整个过程不会刷新网页。一、路...

Vue3项目投屏功能开发!(vue投票功能)

最近接了个大屏项目,产品想在不同的显示器上展示大屏项目不同的页面,做出来的效果图大概长这样...

取消回复欢迎 发表评论: