NPM简介

NPM

NPM(Node Package Manager)是Node.js的包管理工具,用于管理和分享JavaScript代码库。它是世界上最大的开源库生态系统之一。

安装node.js

这里的安装不做详细赘述,你只需要访问官方的网站,下载好安装包,然后进行安装就好了,相信这你一定能解决;

  • 如何验证你的node环境有没有安装好呢?
js 复制代码
node -v

如果输入上面返回版本号,说明你就安装成功了;

NPM的使用

  • 一般呢,我们会使用npm init去初始化node.js项目
  • 之后叫我们输入包名,这里使用默认的,后面的我们也全部默认,之后我们的当前目录就会生成一个package.json

这里node.js文件生成了所有关于这个项目的配置文件;

  • 我们也可以尝试安装一下其他的包,比如之前学习地图类demo的leaflet
js 复制代码
//国内使用npm install非常的慢,可以切换国内源
npm config set registry https://registry.npmmirror.com
//然后再安装leaflet会很快
npm config set registry https://registry.npmmirror.com
  • 安装成功后会发现package.json会多出一个字段,并且项目文件夹中会多出一个node_modules文件,里面包含leaflet的JavaScript代码库
  • 这里我们只是演示一下如何安装,并不去实际的使用他, 这里我们安装一个lodash-es ,注意我们需要安装ES版本,以便于我们去ES6模块的方式去使用它
js 复制代码
npm i lodash-es 

lodash-es 是 Lodash 库的 ES6 模块版本,它提供了一系列实用的工具函数,用于简化 JavaScript 编程的常见任务,如数组操作、对象操作、函数操作等。

  • 我们能看到它里面包含了很多很多的方法
  • 这里我们简单的使用它的模块,cloneDeep,这个是用于深度克隆对象或数组的方法
js 复制代码
import cloneDeep from './node_modules/lodash-es/cloneDeep.js';
const state = {
  cart: [
    { product: '面包', quantity: 5 },
    { product: '香蕉', quantity: 10 },
  ],
  user: { loggedIn: true },
};
const stateClone = Object.assign({}, state);
console.log(stateClone);
  • 我们简单的原数据也会副本也会立马生效
js 复制代码
import cloneDeep from './node_modules/lodash-es/cloneDeep.js';
const state = {
  cart: [
    { product: '面包', quantity: 5 },
    { product: '香蕉', quantity: 10 },
  ],
  user: { loggedIn: true },
};
const stateClone = Object.assign({}, state);
console.log(stateClone);

我们可以简单调用这个函数就可以直接实现对象或数组的深度克隆,如果自己去实现深度克隆,需要不小的代码量,以及需要自己去测试或者考虑其他的方面;

package.json非常重要

想象一个,一个中型的项目中,你需要将你的代码转交给其他人;如果你将所有的依赖都打包发给它,这可能会特别特别慢;所以通过package.json就能很简单的看出项目依赖哪些从而从npm中获取它,因为你也是从npm安装它,所以这很简单;

如果你的依赖包丢失,npm也可以帮助你快速的找回你所需要的所有的依赖

  • 这里将node_modules删除
  • 这时项目肯定是无法运行的,我们可以输入npm -i来安装你所需的依赖
相关推荐
FeelTouch Labs9 小时前
Nginx核心架构设计
运维·前端·nginx
雪球工程师团队9 小时前
别再“苦力”写后台,Spec Coding “跑” 起来
前端·ai编程
m0_471199639 小时前
【场景】前端怎么解决离线收银、数据同步异常等场景问题
前端·javascript
Curvatureflight9 小时前
前端性能优化实战:从3秒到300ms的加载速度提升
前端·人工智能·性能优化
用户99045017780099 小时前
ruoyi集成dmn规则引擎
前端
袋鱼不重10 小时前
AI入门知识点:什么是 AIGC、多模态、RAG、Function Call、Agent、MCP?
前端·aigc·ai编程
小胖霞10 小时前
企业级全栈项目(14) winston记录所有日志
vue.js·前端框架·node.js
NuLL10 小时前
空值检测工具函数-统一规范且允许自定义配置的空值检测方案
前端
栀秋66610 小时前
“无重复字符的最长子串”:从O(n²)哈希优化到滑动窗口封神,再到DP降维打击!
前端·javascript·算法
鹿鹿鹿鹿isNotDefined10 小时前
Antd5.x 在 Next.js14.x 项目中,初次渲染样式丢失
前端·react.js·next.js