摘要
NodeJS是什么？npm命令不能用怎么办？Yarn又是什么？如何初始化并使用他们？这篇文章从应用视角一篇文章解决以上问题。不关心不必要的技术细节，从应用视角，深入浅出，快速解决其相关问题。构建自己的应用程序或运行github上相关的开源项目。
Node.js
是什么： Node.js 是一个开源和跨平台的 JavaScript 运行环境，它允许开发者在服务器端运行 JavaScript。Node.js 使用非阻塞，事件驱动的架构，使其既轻量又高效，特别适合构建数据密集的实时应用。
主要应用点：
- Web 应用开发（API服务器、全栈开发等）
- 实时通信应用（聊天室、游戏服务器）
- 网络应用（代理、监控工具）
- 自动化和工具开发（构建工具、脚本）
优点：
- 异步和非阻塞I/O处理，适合处理大量并发请求。
- 单一语言（JavaScript）开发前后端，便于全栈开发。
- 丰富的模块生态，通过npm可以轻松安装和管理依赖。
- 社区活跃，资源和支持丰富。
缺点：
- 对CPU密集型任务表现不佳。
- 回调嵌套可能导致“回调地狱”，虽然有Promise、async/await等现代解决方案。
- 初学者可能需要时间适应其非阻塞的模式。
推荐安装 LTS 版本，官网地址：https://nodejs.org
为什么需要NodeJS？
目的就一个：为目前主流的基于JS或者TS的web前端开发框架提供支持。
JavaScript (JS)、TypeScript (TS)：
- JavaScript：一种轻量级的脚本语言，它是构建网页和应用的核心技术之一。它可以在浏览器端执行，实现客户端的脚本编程，用于增强用户界面和动态网站功能。
- TypeScript：JavaScript的一个超集，增加了静态类型等功能。它由Microsoft开发，旨在开发大型应用，它最终会被编译成JavaScript执行。
目前应用比较多的就两个：
- VUE: https://vuejs.org/
- React: https://react.dev/
二者之间的对比见下表：
| 对比项 | Vue.js | React |
|---|---|---|
| 类型 | 渐进式JavaScript框架 | JavaScript库 |
| 初始发布 | 2014年 | 2013年 |
| 用于 | 构建用户界面 | 构建用户界面 |
| 核心特性 | 响应式和组件化设计 | 组件化设计，虚拟DOM |
| 学习难度 | 相对容易 | 相对有挑战 |
| 社区规模 | 大 | 非常大 |
| 性能 | 高 | 高 |
| 适合项目 | 小到中型项目，可快速上手 | 大型项目，需要高性能和可扩展性 |
| 数据绑定 | 双向绑定 | 单向数据流 |
| 模板 | HTML模板，可选JSX | JSX |
| 生态系统 | 丰富，但相对较小 | 非常丰富 |
| 企业支持 | 个人和小公司主导 | Facebook维护 |
简单来讲：
- 中文社区VUE用的多，上手快
- 欧美系React用的多
受环境影响，偶尔的前端框架需求，我也基本基于vue开发
NPM与Yarn
- NPM：安装nodejs后默认安装好的包管理器。
- Yarn：一个新的JavaScript包管理器，由Facebook、Google、Exponent和Tilde联合开发。它兼容NPM的包仓库，旨在提供更快、更可靠、更安全的依赖管理。
对比表格：
| 特性/工具 | npm | yarn |
|---|---|---|
| 类型 | 包管理器 | 包管理器 |
| 初始发布 | 2010年 | 2016年 |
| 用于 | 管理JavaScript包 | 管理JavaScript包 |
| 速度 | 较快 | 更快（并行安装和缓存） |
| 安全性 | 良好 | 更好（锁文件等） |
| 确定性 | 依赖于版本 | 锁文件确保一致安装 |
| CLI使用 | 直观 | 直观，命令稍有不同 |
| 生态系统兼容 | 广泛兼容 | 兼容npm包 |
| 自定义仓库 | 支持 | 支持 |
| 社区和支持 | 极大，广泛使用 | 大，快速增长 |
| 特有功能 | npm脚本等 | 速度优化，离线模式 |
| 企业使用 | 广泛 | 广泛 |
简单讲：
- 目前多数的开源项目等都还是基于npm提供相关文档
- npm install时有时候会出现一些莫名其妙的问题，需要更多经验及查阅处理
- yarn比较新，但相对更稳定一些，默认没有需要安装
yarn的优势
- 速度快，主要有两个方面的原因，一是并行安装，无论npm还是yarn在执行包的安装时，都会执行一系列任务。npm是按照队列执行每个package，也就是说必须要等到当前package安装完成之后，才能继续后面的安装。而Yarn是同步执行所有任务，提高了性能；二是离线模式，如果之前已经安装过一个软件包，用yarn再次安装时之间从缓存中获取，不用像npm那样再从网络下载了.
- 安装版本统一: yarn有一个锁定文件yarn.lock，记录了安装上的模块的版本号等信息，每次只要新增了一个模块，yarn就会创建（或更新）yarn.lock文件，这样就保证了每一次拉取同一个项目的所有依赖时，大家使用的都是一个版本。npm其实也可以，但是需要用户手动执行npm shrinkwrap命令，即执行该命令时，会生成一个锁定文件，通yarn.lock；yarn和npm不用的一点就是，yarn的锁定文件是默认自动生成的，而npm是需要手动执行命令才会生成。
- 更简洁的输出：npm输出信息冗长。在执行npm install时，命令行会不断打印出所有被安装上的依赖。而yarn简洁很多，默认情况下，结合了emoji直观地打印出必要的信息。
- 更好的语义化： 比如yarn add/remove，比npm原本的 install/uninstall更清晰
- 多注册来源处理：所有的依赖包，不管被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源安装，防止出现混乱不一致
**安装yarn：
npm install -g yarn
npm install -g yarn更改Windows默认脚本执行策略
npm或者yarn执行脚本有时会受Windows的安全策略影响，需要管理员身份执行命令：
Set-ExecutionPolicy RemoteSigned**常用命令：
不管是npm还是yarn，调试时都会用到其一些命令，将常用命令整理如下：
| 功能/任务 | npm命令 | yarn命令 |
|---|---|---|
| 安装所有依赖 | npm install | yarn 或 yarn install |
| 安装一个包 | npm install [package] | yarn add [package] |
| 卸载一个包 | npm uninstall [package] | yarn remove [package] |
| 更新所有包 | npm update | yarn upgrade |
| 运行脚本 | npm run [script] | yarn run [script] |
| 开始项目 | npm start | yarn start |
| 构建项目 | npm run build | yarn build |
| 测试项目 | npm test | yarn test |
| 发布包 | npm publish | yarn publish |
| 安装全局包 | npm install -g [package] | yarn global add [package] |
*对于 npm run [script] 和 yarn run [script]，[script] 是指在package.json中定义的脚本名。例如，如果你有一个名为 “develop” 的脚本，你会使用 npm run develop 或 yarn develop 来执行它。
小结
以上整理了关于前端基于NodeJS相关的配置及一些基础概念的说明，常用的基本操作涵盖了80%。基于以上，在应用层基本就够用了，实际实践中遇到一些其他的偶发问题，直接ChatGPT基本都可以得到答案。
最最后
如果是中国国内直接使用国外的源进行install是一件痛苦的事情，所以可以通过以下命令更换源地址：
- NPM：
npm config set registry https://registry.npmmirror.com
npm config set disturl https://npmmirror.com/dist
npm config set electron_mirror https://npmmirror.com/mirrors/electron/
npm config set sass_binary_site https://npmmirror.com/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npmmirror.com/mirrors/phantomjs/查看确认：
npm get registry- yarn:
yarn config set registry https://registry.npmmirror.com -g
yarn config set disturl https://npmmirror.com/dist -g
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/ -g
yarn config set sass_binary_site https://npmmirror.com/mirrors/node-sass/ -g
yarn config set phantomjs_cdnurl https://npmmirror.com/mirrors/phantomjs/ -g
yarn config set chromedriver_cdnurl https://cdn.npmmirror.com/dist/chromedriver -g
yarn config set operadriver_cdnurl https://cdn.npmmirror.com/dist/operadriver -g
yarn config set fse_binary_host_mirror https://npmmirror.com/mirrors/fsevents -g查看确认：
yarn config get registry最后：我是牛哥
关注牛哥Youtube频道：https://www.youtube.com/@niugee
本文内容视频地址：https://youtu.be/BxcQ_v-bVOA
- 技术出身，两家公司的CTO
- 当下某头部公司高管
- 一直有教师梦，不惑之年，建立一个平台，分享一些薄见
