node.js及npm的基本理解

最新推荐文章于 2024-04-23 20:25:37 发布

英雄史诗

最新推荐文章于 2024-04-23 20:25:37 发布

阅读量483

点赞数 1

分类专栏： VUE web 开发文章标签： node.js npm 前端

本文链接：https://blog.csdn.net/heroicpoem/article/details/125380013

版权

开发同时被 3 个专栏收录

48 篇文章 1 订阅

订阅专栏

web

32 篇文章 0 订阅

订阅专栏

VUE

15 篇文章 0 订阅

订阅专栏

1、node.js

what

在这里插入图片描述

why

在这里插入图片描述

how

在这里插入图片描述

2、npm

what

1、npm:是node.js的标准软件包管理器，全称node package manager。
主要功能：
1）管理依赖的包：安装、更新、
npm install
npm install --save ##安装并保存到package.json文件的dependencis。
npm update

2）运行任务：在package.json中script片段是定义任务的。
npm run
安装方式：1.默认是在当前目录做局部安装；2.加参数 -g，执行全局安装。全局也是1个目录，
可通过node root -g 查看，windows下默认是：

  C:\Users\heroicpoem>npm root -g
  C:\Users\heroicpoem\AppData\Roaming\npm\node_modules

how

2、package.json
1）是项目清单。
2）包含的内容：
1.项目描述信息；
2.scripts：可运行的的node脚本；eg：npm run dev；
3.dependencies：依赖的npm软件包；
4.engines：要使用的node或npm版本。
5.browserslist：要支持的浏览器版本。
3、package-lock.json:会固化当前安装的每个软件包的版本。
package.json中的版本是可以升级的，如果项目在多个地方部署，则可能版本不一致。
引入lock文件，就是把package.json中的文件版本保存下来，npm install时，会使用lock文件的内容。

3、总结

node.js可以理解为js的jvm，可以在浏览器外边独立运行js程序。
npm可以理解为maven，用来构建工程的。
一个是语言、一个工程工具。

其他

4、js和浏览器异步执行

其运行机制中，有3个重要对象：
js调用堆栈：js中顺序执行的代码；
消息队列：回调函数、用户触发的事件放到消息队列中。先把js调用堆栈的内容执行完毕，然后查看消息队列并执行。eg：setTimeout()回调函数为例，setTimeout在整个js程序中是顺序执行的，执行后回调函数会放入到消息队列，然后继续执行js程序直至执行完毕。然后回头来检查消息队列并执行。这个是浏览器维护的。
浏览器：除了是js的jvm，还有自身的功能，如响应用户操作、维护消息队列。
js是线性运行的，那如何响应用户的点击、鼠标移动等操作？消息队列+异步。

问题：

1、node package的格式要求？、

&：node.js对node package要求不多，遵从一定格式即可：
1.顶层有package.json文件 ##说明是个nodeJs应用；
2.bin目录存放可执行文件 ##对vue-cli来说，是nodeJs的可执行脚本，如vue-init命令，其实是nodeJs程序。
3.lib目录存放自己编写的js文件；
4.docs目录：存放文档
5.node_modules:使用的其他node package。

2、vue与node的关系？

&：vue是个js库，与nodeJs没有关系，可直接引入html中使用；
vue-cli:是nodeJs的1个package，可用来生成vue工程目录。ps：利用了node.js的创建目录、创建配置文件等功能。

3、vs中node的项目，怎么打包成前端文件的？可以在nginx中运行的？

&：vue项目是前端项目，本质仍html+js。仅发布到nginx上，运行还是在浏览器运行。
所以不是打包成可运行的程序，是打包成web的静态文件。
2）在vs中运行，是webpack这个nodePackage在起作用，实际是创建了个http服务器。具体包括：
1.打包
2.开启一个服务器
3.实时的自动编译代码，只要我们对源代码做了保存（ctrl+s）
4.webpack-dev-server打包过后生成的bundle.js，不在我们配置的./dist目录下。而是一个暂存在内存中并且被认为是当前网站根目录下（这就需要注意一下将引入的包的目录改成根目录）

参考：

node.js基础：http://nodejs.cn/learn/expose-functionality-from-a-nodejs-file-using-exports
webpack包的作用：http://t.zoukankan.com/mmit-p-12740658.html
vue-cli脚手架：https://blog.csdn.net/six_six_six_666/article/details/104163412?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-104163412-blog-106669655.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-104163412-blog-106669655.pc_relevant_paycolumn_v3