ZiYu Front End

发展历史

在这将近20年的前端发展史中,我们经历了从最早的纯静态页面，到 JavaScript 跨时代的诞生；从 PC 端到移动端；大致经历:

1990~1994 年，WWW（World Wide Web）的诞生、浏览器的诞生、JavaScript 的诞生
1994~2005 年 浏览器战争
Prototype 时期（2005~2009 年）
jQuery 时期（2009~2012 年）， 2006 年，jQuery 发布，它当时的竞争对手很多：Dojo、Prototype、ExtJS、MooTools。
后 jQuery 时期（2012~2016 年）:这时期以 RequireJS 的诞生为起点，以 RN 的出现结束。同时解决了前端的模块定义问题，模块打包问题（通过 Node.js），JavaScript 不依靠其他语言创造了一套自己的工具链。
三大框架割据时代（2016~至今）,React 是突然爆发的，虽然它是与 Angular 是同时期发布，但因为 JSX 怪异的语法让人们远离它。此时已经进入移动互联网的中期，大公司都有自己的 App，或者基于原生，或者基于 Hybird。Hybird 是用 WebView 加载一个网站或一个 SPA。
小程序时代（2017~至今）

package.json 简介

常见属性

version 表明了当前的版本。
name 设置了应用程序/软件包的名称。
description 是应用程序/软件包的简短描述。
main 设置了应用程序的入口点。
private 如果设置为 true，则可以防止应用程序/软件包被意外地发布到 npm。
scripts 定义了一组可以运行的 node 脚本。
dependencies 设置了作为依赖安装的 npm 软件包的列表。
devDependencies 设置了作为开发依赖安装的 npm 软件包的列表。
engines 设置了此软件包/应用程序在哪个版本的 Node.js 上运行。
browserslist 用于告知要支持哪些浏览器（及其版本）。
engines 设置此软件包/应用程序要运行的 Node.js 或其他命令的版本。
repository 此属性指定了此程序包仓库所在的位置。
keywords 此属性包含与软件包功能相关的关键字数组。
license 指定软件包的许可证。
homepage 设置软件包的主页。
bugs 链接到软件包的问题跟踪器，最常用的是 GitHub 的 issues 页面。
author 列出软件包的作者名称。
files：要包含的项目

命令特有的属性

package.json 文件还可以承载命令特有的配置，例如 Babel、ESLint 等。

每个都有特有的属性，例如 eslintConfig、babel 等。它们是命令特有的，可以在相应的命令/项目文档中找到如何使用它们。

软件包版本

所有的版本都有 3 个数字，第一个是主版本，第二个是次版本，第三个是补丁版本:

3.2.0 : 代表 3.2.0
~3.2.0 : 代表 3.2.x
^3.2.0：代表 3.x.x

前面的符号指定了软件包能从该依赖接受的最新包版本控制

npm,yarn,pnpm 区别

npm、yarn 和 pnpm 都是 JavaScript 的包管理器，它们的主要区别在于性能、安全性和磁盘空间使用等方面。

npm：npm（Node Package Manager）是 Node.js 的默认包管理器，拥有最大的包仓库。npm 可以很容易地使用，并且被广泛采用。然而，当处理大型项目或安装许多包时，npm 可能会比较慢。
yarn：Yarn 是 Facebook 创建的 npm 的替代品，具有改进的性能和安全特性。Yarn 的安装速度比 npm 快（并行下载），能有效地缓存包以供离线使用。Yarn 的一些语法跟 npm 也有所差别
pnpm：pnpm（performant npm）是一个快速、磁盘空间高效的包管理器。pnpm 专注于性能和效率，旨在节省磁盘空间。无论是冷缓存还是热缓存，pnpm 都比 Yarn 快。(共享依赖: 可减少磁盘空间、减少安全隐患)

npm	yarn	pnpm
npm install	yarn	pnpm install / i
npm install react --save	yarn add react	pnpm add react
npm uninstall react --save	yarn remove react	pnpm remove react
npm install react --save-dev	yarn add react --dev	pnpm add react -D
npm update --save	yarn upgrade	pnpm up/update/upgrade
npm run build	yarn build	pnpm build

这些包管理器都有各自的优点和缺点，选择哪一个最好的包管理器取决于项目的具体需求。总的来说，这取决于个人的喜好和项目的特定需求。有些开发者可能更喜欢 npm，因为它被广泛采用，而其他人可能更喜欢 Yarn 或 pnpm，因为它们的性能和效率。

node 版本管理

npm install -g nvm

nvm install <version>: 安装指定版本的 Node.js。
nvm use <version>: 切换到指定版本的 Node.js。
nvm ls: 显示已安装的 Node.js 版本。
nvm ls-remote: 显示可供安装的 Node.js 版本。
nvm uninstall <version>: 卸载指定版本的 Node.js。
nvm alias <alias> <version>: 为特定版本设置一个别名。
nvm unalias <alias>: 删除已设置的别名。
nvm --version: 显示 NVM 的版本。

设置仓库地址

npmyarn

npm config get registry

npm config set registry https://registry.npmmirror.com
// 命令行
npm install --registry=https://registry.npmmirror.com

npm config delete registry

yarn config get registry

yarn config set registry https://registry.npmmirror.com
// 命令行
yarn install --registry=https://registry.npmmirror.com

yarn config delete registry

nrm 仓库管理中心

nrm是一个非常实用的 npm 源管理工具，可以帮助你快速地在不同的 npm 源之间切换。

安装：在命令行中执行以下命令来全局安装nrm：
```
npm install -g nrm
```
查看可选源：执行命令nrm ls可以查看所有可选的源。其中带*号的是当前使用的源。
切换源：如果你想切换到其他源，例如切换到淘宝源，可以执行以下命令：
```
nrm use taobao
```
增加源：你可以增加定制的源，特别适用于添加企业内部的私有源。执行以下命令，其中<registry>为源名，<url>为源的路径：
```
nrm add <registry> <url>
```
删除源：执行以下命令可以删除对应的源：
```
nrm del <registry>
```
测试源的响应时间：你还可以通过以下命令测试源的响应时间：
```
nrm test <registry>
```

发展历史 ​

package.json 简介 ​

常见属性 ​

命令特有的属性 ​

软件包版本 ​

npm,yarn,pnpm 区别 ​

node 版本管理 ​

设置仓库地址 ​

nrm 仓库管理中心 ​