如何理解Node.js？NPM？Yarn？Vue.js？...？

一、背景

对后端技术栈更熟悉，对前端技术栈不了解，希望通过前后端的技术栈进行对比，可以更直观地了解前端技术栈。

二、Node.js

Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行环境。它使得 JavaScript 可以在服务器端运行，而不仅仅是在浏览器中。

Node.js 可以类比为 Java 的 JRE（Java Runtime Environment），但它们有一些关键的区别和相似之处。

1、相同

（1）运行环境

Node.js：是一个 JavaScript 运行环境，允许你在服务器端运行 JavaScript 代码。
JRE：是一个 Java 运行环境，允许你运行 Java 应用程序。

（2）包含的组件

Node.js：包含了 V8 JavaScript 引擎（用于解析和执行 JavaScript 代码）、内置的库（如 http、fs 等）和一些核心模块。
JRE：包含了 Java 虚拟机（JVM，用于解析和执行 Java 字节码）、核心类库（如 java.lang、java.util 等）和一些其他组件。

（3）跨平台

Node.js：可以在多个操作系统上运行，包括 Windows、macOS 和 Linux。
JRE：同样可以在多个操作系统上运行，包括 Windows、macOS 和 Linux。

2、区别

（1）语言

Node.js：运行 JavaScript 代码。
JRE：运行 Java 代码。

（2）用途

Node.js：最初设计用于服务器端编程，特别适合 I/O 密集型应用，如 Web 服务器、实时应用和 API 服务。
JRE：用于运行各种 Java 应用程序，包括桌面应用、服务器端应用和嵌入式系统。

（3）生态系统

Node.js：依赖于 npm（Node Package Manager）或Yarn来管理和安装第三方库和模块。
JRE：依赖于 Maven、Gradle 等工具来管理和安装第三方库和模块。

（4）执行模型

Node.js：采用单线程、事件驱动的非阻塞 I/O 模型，适合处理大量并发请求。
JRE：多线程模型，适合 CPU 密集型任务和复杂的并发控制。

三、NPM

npm（Node Package Manager）是 Node.js 的默认包管理器。它允许开发者安装、共享和管理 JavaScript 代码包（即模块）。

1、特点

（1）包管理

npm 提供了一个巨大的开源包生态系统，开发者可以轻松安装和使用他人编写的模块。

（2）版本管理

npm 允许你管理项目依赖的版本，以确保项目的稳定性。

（3）脚本运行

npm 可以用来运行项目中的脚本，例如构建、测试和启动项目。

2、常用命令

npm -v # 查询npm版本号
npm init # 初始化一个新的 Node.js 项目，创建 package.json 文件
npm install 或 npm i # 安装项目依赖
npm install <package> # 安装特定的包
npm run <script> # 运行 package.json 中定义的脚本

四、Yarn

Yarn 是一个由 Facebook、Google、Exponent 和 Tilde 联合开发的包管理器，旨在解决 npm 的一些问题。它与 npm 类似，但提供了一些增强功能。

1、特点

（1）快速

Yarn 使用并行安装，速度比 npm 更快。

（2）确定性依赖

Yarn 使用 yarn.lock 文件来确保每次安装的依赖版本一致，避免 "works on my machine" 问题。

（3）离线模式

Yarn 可以在没有网络连接的情况下安装依赖，只要它们之前已经被安装过一次。

2、常用命令

yarn --version # yarn版本号

yarn init # 初始化一个新的项目
yarn add <package> # 安装特定的包
yarn install # 安装项目的所有依赖
yarn run <script> # 运行 package.json 中定义的脚本

五、React和Vue.js

React 和 Vue.js 是两个流行的前端 JavaScript 框架/库，用于构建用户界面（UI）和单页应用程序（SPA）。它们各自有独特的特性和生态系统，适用于不同的开发需求。

性	React	Vue.js
开发者	Facebook	尤雨溪（Evan You）
初始发布	2013	2014
主要特点	组件化、虚拟 DOM、单向数据流、JSX	渐进式框架、双向数据绑定、组件化、模板语法
学习曲线	中等	低到中等
生态系统	React Router, Redux, Create React App	Vue Router, Vuex, Vue CLI
性能	高	高
社区支持	大	大