2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

最新推荐文章于 2024-09-28 19:02:04 发布
最新推荐文章于 2024-09-28 19:02:04 发布
阅读量928 收藏 11
点赞数 14
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84616292/article/details/138803990
版权

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1”

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“dependencies”: {

“md5”: “^2.3.0”

},

“devDependencies”: {

}

}

  • dependencies -> 配置当前程序所依赖的其他包

  • devDependencie -> 配置当前程序所依赖的其他包，比如一些工具之类的配置在这里

在这里插入图片描述

dependencies 与 devDependencies 之间的区别？

  • 使用 npm install node_module --save 会自动更新 dependencies 字段值

  • 使用 npm install node_module --save -dev 会自动更新 devDependencies 字段值

1.1、package.json

  • package.json 是项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。

  • 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题

  • 加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

  • 每次创建新项目，记得先 npm init 生成package.json

1.2、package.json常见属性

必须填写的属性：name、version

  • name 是项目的名称

  • version 是当前项目的版本号

  • description是描述信息，很多时候是作为项目的基本描述

  • author是作者相关信息（发布时用到）

  • license是开源协议（发布时用到）

private 属性：

  • private属性记录当前的项目是否是私有的

  • 当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式

main 属性：

  • 设置程序的入口。

scripts 属性：

  • scripts 属性用于配置一些脚本命令，以键值对的形式存在

  • 配置后我们可以通过 npm run 命令的key来执行这个命令

  • npm start和npm run start的区别是什么?

  • 它们是等价的

  • 对于常用的start、test、stop、restart可以省略掉run直接通过npm start等方式运行

dependencies 属性：项目依赖

  • dependencies 属性是指定无论开发环境还是生成环境都需要依赖的包

  • 使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

  • 与之对应的是devDependencies

devDependencies 属性：开发依赖

  • 一些包在生成环境是不需要的，比如webpack、babel等

  • 这个时候我们会通过npm install webpack --save-dev，将它安装到devDependencies属性中

  • 那么在生成环境如何保证不安装这些包呢？

  • 生成环境不需要安装时，我们需要通过npm install --production 来安装文件的依赖

1.3、版本管理的问题

我们会发现安装的依赖版本出现：^2.0.3或~2.0.3，这是什么意思呢？

我们这里解释一下^和~的区别：

  • ^x.y.z：表示x是保持不变的，y和z永远安装最新的版本

  • ~x.y.z：表示x和y保持不变的，z永远安装最新的版本

1.4、npm install 命令

安装npm包分两种情况：

  • 全局安装（global install）： npm install ModuleName -g

  • 项目（局部）安装（local install）： npm install

全局安装：

  • 全局安装是直接将某个包安装到全局

但是很多人对全局安装有一些误会：

  • 通常使用npm全局安装的包都是一些工具包：yarn、webpack等

  • 并不是类似于axios、express、koa等库文件

  • 所以全局安装了之后并不能让我们在所有的项目中使用axios等库

  1. npm -v 查看 npm 版本

  2. 使用 npm 命令安装模块 npm install ModuleName

我们推荐安装模块后面加上 --save，这样可以安装模块并把模块写入 package.json

// 如安装 jq 模块

npm install jquery --save

  1. 卸载模块 npm uninstall moduleName

  2. 查看当前目录下已安装的 node 包 npm list

  3. 查看 模块 的版本 npm info 模块

// 如查看 jquery 的版本

npm info 模块

  1. 指定版本安装 npm install jquery@1.8.0 --save 🔥

1.5、项目安装

项目安装会在当前目录下生产一个node_modules 文件夹

局部安装分为开发时依赖和生产时依赖

在这里插入图片描述

1.6、npm install 原理

执行npm install它背后帮助我们完成了什么操作？

我们会发现还有一个成为package-lock.json的文件，它的作用是什么？

从npm5开始，npm支持缓存策略（来自yarn的压力），缓存有什么作用呢？

在这里插入图片描述

npm install会检测是有package-lock.json文件：

  • 没有lock文件

  • 分析依赖关系，这是因为我们可能包会依赖其他的包，并且多个包之间会产生相同依赖的情况

  • 从registry仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）

  • 获取到压缩包后会对压缩包进行缓存（从npm5开始有的）

  • 将压缩包解压到项目的node_modules文件夹中

  • 有lock文件

  • 检测lock中包的版本是否和package.json中一致

  • 不一致，那么会重新构建依赖关系，直接会走顶层的流程

  • 一致的情况下，会去优先查找缓存

  • 没有找到，会从registry仓库下载，直接走顶层流程

  • 查找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中

1.7、package-lock.json

package-lock.json文件解析：

  • name：项目的名称

  • version：项目的版本

  • lockfileVersion：lock文件的版本

  • requires：使用requires来跟着模块的依赖关系

  • dependencies：项目的依赖

1.8、npm其他命令

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

image
image

点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-GVn4NAkb-1715584021800)]
[外链图片转存中…(img-9Cu53PHJ-1715584021801)]

2401_84616292
关注
专栏目录
Node.js学习2-NPM介绍、使用
jeikerxiao
06-23 451
NPM 使用介绍NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
使用vue-cli搭建spa项目
kiki208418895的博客
09-29 173
什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称 注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境 ...
npm中的全局安装
听海边涛声
04-08 697
npm中的全局安装
node常见面试题库
沃德天，倪维胜么，捺莫帅？
09-28 3079
node常见面试题库 1、检测系统中node版本号的指令是？ node -v 2、如何退出node执行环境（REPL环境）？ ctrl+c c 3、node如何创建服务器，写出代码？ var http=require(‘http’); var server=http.createServer(function(req,res,next){ //业务逻辑 }) server.listen(3000,function(err){if(!err){console.log(‘服务器运行在3000端口
Nodejs基础之包管理工具npm(二)，2024年前端面试题
m0_61369275的博客
03-20 919
package.json 是项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作。devDependencie -> 配置当前程序所依赖的其他包，比如一些工具之类的配置在这里。当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式。一些包在生成环境是不需要的，比如webpack、babel等。
Nodejs基础之包管理工具npm(二)，2024年春招前端面试题
m0_63174529的博客
04-10 403
version 是当前项目的版本号description是描述信息，很多时候是作为项目的基本描述author是作者相关信息（发布时用到）license是开源协议（发布时用到）private属性记录当前的项目是否是私有的当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式scripts 属性用于配置一些脚本命令，以键值对的形式存在配置后我们可以通过npm run 命令的key来执行这个命令npm start和npm run start的区别是什么?它们是等价的。
2024年Web前端最全下载模块包及安装环境node，npm，vue，2024大厂前端社招面试题
2401_84446787的博客
05-05 789
解：Unsupported platform for fsevents@1.2.7: wanted {“os”:“dar win”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”})点进去文件发现 C:\Users\Administrator\AppData\Roaming\npm\node_modules@vue 为空。HTTP 中如何处理表单数据的提交？
Nodejs基础之包管理工具npm(二)
2401_84103903的博客
04-13 999
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。图片转存中…(img-BA2k32Pa-1712948427513)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-aEozV9gt-1712948427514)]
前端面试题合集VueReact小程序NodeJs
02-25
5. **npm**：了解包管理器的使用，包括安装、卸载、版本控制等。 以上只是冰山一角，真正的面试可能会更深入，涵盖性能优化、错误处理、设计模式等多个方面。熟悉这些知识点，并结合实际项目经验，能大大提高你在...
vue第五章习题
qq_46556714的博客
11-19 8975
课后习题 一、填空题 1.在项目中可以通过 npm命令 npm instal vue - router 安装路由 vue - routero 2.使用路由对象获取当前激活的路由的状态信息。 3通过一个名称来标识一个路由的方式叫作命名路由 4在业务逻辑代码中实现导航跳转的方式称为编程式导航 5,单页面应用主要通过 URL 中的 hash （#号）实现不同页面之间的切换。 二、判断题 1.后端路由通过用户请求的 URL 导航到具体的 html 页面。 ✔ 2.开发环境下,使用 import VueRoute
Nodejs02--npm介绍
宁静致远
04-22 138
npm用法 npm的官网地址 https//registry.npmjs.org 初始化项目： npminit-y 。生成一个package.json文件 安装模块 局部安装：npmnstall包名 全局安装：npmnstall包名-g在命令行工具中大部分是全局安装 当拿到项目后先安装package.json中指定的所有依赖 命令：npminstall 。安装项目中package.json文件中锁定的依赖 更新：npmupdate 包名 卸载： npmunins...
Nodejs+npm详细安装
热门推荐
qq_39308408的博客
07-30 6万+
Nodejs详细安装步骤 1、去官网下载nodejs，下载地址：https://nodejs.org/en/download/ 根据自己要求下载，我这里下载的是windows installer的。 2、安装nodejs 1）双击下载的nodejs安装程序，点next 2）同意协议 3）选择nodejs安装路径，默认是c盘，我这里改成d盘 4）next下一步，准备...
一些简单的vue考试题(选择题和简答题)
Wmlikeweb的博客
05-24 4万+
1、下面代码结果打印结果为: new Vue({ data: { a: 1, b: 2 }, created: function () { console.log(this.a) }, mounted(){ console.log(this.b) } }) A：1，2 B: 1,1 C: 2,2 D:2,1 2、在beforeRouteEnter钩子函数中进行console.log(...
ES6、nodejs阶段性测试题总结(笔试+编程)
PILIpilipala的博客
10-18 2510
笔试题 1. 什么是NodeJS, 以及优缺点和特点? NodeJs是一个事件驱动I/O服务端、基于 Chrome V8 引擎的 JavaScirpt 运行环境。 NodeJs的特点：异步事件驱动、非堵塞I/O、轻量、可伸缩，适于实时数据交互应用、单进程，单线程 NodeJs的优缺点： 优点：高并发（最重要的优点）、适合I/O密集型应用 缺点：不适合CPU密集型应用 2. NPM是什么?它的好处? NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题： 允许用户从NPM服务
webview2加载本地页面
qq_25160759的博客
09-23 642
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 295
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
前端面试经验总结2(经典问题篇)
最新发布
rita_0567的博客
09-28 621
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
基于webComponents的纯原生前端框架
u013776700的博客
09-28 79
采用artComponent模板引擎,在数据更新后实现UI更新，当然这里做了优化处理,尽量减小页面渲染受影响的范围，实现最小化更新。基于框架，开发了一套常用UI组件，提升开发速度。组件库采用开放原则，也就是说别人都可以使用我的开发接口去开发组件库。我本人的个人开发web前端前框架xui，正在开发中，业已完成50%的核心开发工作，并且在开发过程中逐渐完善.目前框架未采用任何和市面上框架模式，没有打包过程，实现真实的开箱即用。框架完成了事件触发和事件监听的封装，在页面和组件事件处理上更加方便。
apply、call和bind的作用和区别
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 713
javascript中，apply、call和bind的作用和区别介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值