diff --git a/wiki/programming-language/JavaScript/PM2 工具.md b/work/front-end-engineer/工具/PM2 工具.md similarity index 92% rename from wiki/programming-language/JavaScript/PM2 工具.md rename to work/front-end-engineer/工具/PM2 工具.md index 9d6cf4a8..c88dd2b8 100644 --- a/wiki/programming-language/JavaScript/PM2 工具.md +++ b/work/front-end-engineer/工具/PM2 工具.md @@ -6,13 +6,14 @@ keywords: - PM2 tags: - Node +sidebar_position: 3 author: 7Wate date: 2023-10-12 --- ## 简介 -PM2 是一个**卓越的 Node.js 进程管理工具**，它可以帮助我们简化 Node.js 应用程序的管理和部署。通过 PM2，我们可以实现自动重启、负载均衡、性能监控以及日志管理等功能，大大提高应用程序的稳定性和可靠性。 +[PM2](https://pm2.keymetrics.io/) 是一个**卓越的 Node.js 进程管理工具**，它可以帮助我们简化 Node.js 应用程序的管理和部署。通过 PM2，我们可以实现自动重启、负载均衡、性能监控以及日志管理等功能，大大提高应用程序的稳定性和可靠性。 ## 安装 diff --git a/work/front-end-engineer/工具/Webpack.md b/work/front-end-engineer/工具/Webpack.md new file mode 100644 index 00000000..1b72581f --- /dev/null +++ b/work/front-end-engineer/工具/Webpack.md @@ -0,0 +1,70 @@ +--- +title: Webpack +description: JavaScript 模块打包器 +keywords: + - Webpack + - JavaScript + - 打包 +tags: + - JavaScript +sidebar_position: 2 +author: 7Wate +date: 2023-10-17 +--- + +[Webpack](https://webpack.js.org/) 是一个开源的 JavaScript 模块打包器。它是构建现代 JavaScript 应用程序的一个重要工具，用于将项目的不同部分（包括 JS、HTML、CSS、图片等资源）打包成一个或多个优化后的文件，供浏览器加载和执行。 + +## 历史 + +Webpack 是一个强大的静态模块打包器，它在 2012 年末由 Tobias Koppers 发布。在 Webpack 出现之前，开发者使用 Browserify、RequireJS 等工具来解决 JavaScript 代码模块化的问题。 + +Webpack 1.0 在 2014 年发布，提供了诸如“loaders”和“plugins”的新特性。2016 年，Webpack 2.0 发布，其主要更新包括对 ES6 模块的支持、Tree shaking 和动态导入。 + +2018 年，Webpack 4.0 发布，带来了更快的编译速度和更小的 bundle 大小，同时提供了“零配置”选项。2020 年，Webpack 5.0 发布，引入了许多新特性，包括对持久缓存的改进，模块联邦，以及对 Webassembly 的更好支持。 + +## 背景 + +在 Webpack 出现之前，开发者通常需要手动管理项目中的所有文件和依赖。随着项目的复杂性增加，这种方式变得越来越困难。Webpack 通过自动处理和打包项目中的各种资源和依赖，极大地简化了开发的复杂性。此外，Webpack 还提供了许多优化机制，如代码分割和懒加载，以改进应用的性能。 + +## 特性 + +- **代码分割（Code Splitting）**：Webpack 可以将代码分割成多个 bundle，从而实现按需加载和并行加载。 +- **懒加载（Lazy Loading）**：Webpack 支持懒加载，即按需加载某个模块，可以有效地减少应用的初始加载时间。 +- **模块热替换（Hot Module Replacement，HMR）**：Webpack 支持 HMR，可以在运行时替换、添加或删除模块，而无需进行完全刷新。 +- **Loaders**：Webpack 使用 loaders 来处理非 JavaScript 类型的文件，如 CSS、HTML、图片等。 +- **Plugins**：Webpack 使用 plugins 来添加额外的功能，如优化 bundle、管理输出和环境变量等。 + +### 优点 + +- Webpack 提供了高度的灵活性和可配置性，可以满足各种项目的需求。 +- Webpack 支持多种类型的模块和资源，包括 ES6 模块、CommonJS 模块、CSS、图片、字体等。 +- Webpack 提供了许多优化机制，如代码分割、懒加载、持久缓存等，可以改进应用的性能。 + +### 缺点 + +- Webpack 的配置相对复杂，需要一些学习和实践。 +- Webpack 的构建速度可能在大型项目中变得较慢。 +- Webpack 目前只支持 JavaScript 和 JSON，对其他语言的支持需要通过 loaders 和 plugins 实现。 + +## 实用示例 + +[官网指南](https://webpack.docschina.org/guides/getting-started/) + +## 与其他工具的对比 + +Webpack 的主要竞争者包括 Parcel、Rollup 和 Browserify。 + +- Parcel 提供了零配置的体验，对于小型项目和入门级项目来说，Parcel 可能是一个更好的选择。但是，对于需要高度自定义的大型项目，Webpack 的灵活性和可配置性可能更胜一筹。 +- Rollup 主要专注于 JavaScript 库和框架的打包，它提供了更好的 tree shaking 和 ES6 模块的处理。但是，对于一般的应用项目，Webpack 提供的特性更多，如代码分割和懒加载。 +- Browserify 是最早的模块打包器之一，它允许开发者在浏览器中使用 CommonJS 模块。然而，Browserify 的功能相对有限，且没有得到很好的维护和更新。 + +## 未来发展方向 + +Webpack 的未来发展方向可能包括以下几点： + +- **更好的性能**：Webpack 会继续优化其构建速度和生成的代码质量，以提供更好的性能。 +- **更好的兼容性**：Webpack 会支持更多的模块类型和语言，以提供更好的兼容性。 +- **更好的可用性**：Webpack 会改进其文档和错误消息，以提供更好的可用性。 +- **更好的插件生态**：Webpack 会继续扩大其插件生态，以提供更多的功能和选择。 + +总的来说，Webpack 是前端开发工具链中的一个重要组成部分。尽管有一些竞争者试图挑战其地位，但是，由于其强大的功能、灵活的配置和丰富的插件，Webpack 仍然是目前最受欢迎和最广泛使用的模块打包器之一。 diff --git a/work/front-end-engineer/工具/_category_.json b/work/front-end-engineer/工具/_category_.json new file mode 100644 index 00000000..72402216 --- /dev/null +++ b/work/front-end-engineer/工具/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "工具", + "position": 3, + "link": { + "type": "generated-index", + "title": "工具" + } +} \ No newline at end of file diff --git a/wiki/programming-language/JavaScript/包管理工具.md b/work/front-end-engineer/工具/包管理工具.md similarity index 81% rename from wiki/programming-language/JavaScript/包管理工具.md rename to work/front-end-engineer/工具/包管理工具.md index a6e5676a..956c341f 100644 --- a/wiki/programming-language/JavaScript/包管理工具.md +++ b/work/front-end-engineer/工具/包管理工具.md @@ -1,5 +1,5 @@ --- -title: 包管理工具 +title: 包管理器 description: JavaScript 包管理工具 keywords: - JavaScript @@ -9,13 +9,14 @@ keywords: - pnpm tags: - JavaScript +sidebar_position: 1 author: 7Wate -date: 2022-09-06 +date: 2023-10-17 --- ## npm -npm 是 JavaScript 编写的软件包管理工具，同时也是 node.js 的默认包管理工具。 +**[npm](https://www.npmjs.com/) 是 JavaScript 编写的软件包管理工具，同时也是 node.js 的默认包管理工具。** ### 早期版本 @@ -121,7 +122,7 @@ curl -qL https://www.npmjs.com/install.sh | sh ## yarn -yarn 同样采用扁平结构，它的出现是为了解决 npm V3 **依赖安装速度慢和不确定性**。 +**[yarn](https://yarnpkg.com/) 同样采用扁平结构，它的出现是为了解决 npm V3 依赖安装速度慢和不确定性。** ### 提升安装速度 @@ -139,22 +140,8 @@ yarn 采用**并行模式**替代 npm **串行模式**安装包，并且利用 ### 安装方式 -#### Node.js >=16.10 - ```shell -corepack enable -``` - -#### Node.js <16.10 - -```shell -npm i -g corepack -``` - -#### 升级最新版 - -```shell -yarn set version stable +npm install --global yarn ``` ### 常用命令 @@ -174,7 +161,7 @@ yarn set version stable ![img](https://static.7wate.com/img/2022/09/06/962148e0d436e.jpg) -pnpm 不同于 npm 和 yarn 使用的扁平结构，而是采用了**内容寻址存储**。pnpm 通过设置**全局 store**，然后在项目中通过使用**硬链接与符号链接**引用依赖。为了实现此功能，node_modules 目录下会多出 .pnpm 目录，而且是非扁平结构。 +[pnpm](https://pnpm.io/zh/) 不同于 npm 和 yarn 使用的扁平结构，而是采用了**内容寻址存储**。pnpm 通过设置**全局 store**，然后在项目中通过使用**硬链接与符号链接**引用依赖。为了实现此功能，node_modules 目录下会多出 .pnpm 目录，而且是非扁平结构。 - **硬链接 Hard link**：硬链接可以理解为**源文件的副本**。 - **符号链接 Symbolic link**：符号链接（软连接）可以理解为**快捷方式**。 @@ -219,10 +206,10 @@ pnpm 这套全新的机制设计地十分巧妙，不仅兼容 node 的依赖解 ### 安装方式 -#### wget +#### npm ```shell -wget -qO- https://get.pnpm.io/install.sh | sh - +npm install -g pnpm ``` #### curl @@ -231,17 +218,29 @@ wget -qO- https://get.pnpm.io/install.sh | sh - curl -fsSL https://get.pnpm.io/install.sh | sh - ``` -#### PowerShell - -```powershell -iwr https://get.pnpm.io/install.ps1 -useb | iex -``` - ### 常用命令 -[点击打开官网文档](https://pnpm.io/zh/cli/add) +| 命令 | 功能 | +| ---------------- | -------------------------------------------- | +| `pnpm install` | 安装 package.json 文件中的所有依赖项 | +| `pnpm add ` | 安装指定的依赖项 | +| `pnpm update` | 更新所有的依赖项 | +| `pnpm uninstall` | 移除指定的依赖项 | +| `pnpm list` | 列出已安装的所有依赖项 | +| `pnpm run` | 运行在 package.json 文件中定义的脚本 | +| `pnpm test` | 运行测试 | +| `pnpm link` | 创建或者删除一个软链接到全局安装的依赖项 | +| `pnpm prune` | 移除无用的依赖项 | +| `pnpm publish` | 将你的包发布到 npm 注册表 | +| `pnpm root` | 打印全局安装的依赖项的位置 | +| `pnpm store` | 控制共享的包存储 | +| `pnpm outdated` | 检查哪些依赖项有新版本可以更新 | +| `pnpm rebuild` | 重新编译包 | +| `pnpm import` | 从 npm 转换一个项目 | +| `pnpm fetch` | 预下载所有从注册表下载的依赖项到本地的存储库 | +| `pnpm audit` | 检查项目依赖项中的已知的漏洞 | -## 功能比较 +## npm，yarn，pnpm 功能比较 | 功能 | pnpm | Yarn | npm | | ------------------------ | ------------------------------------------------------------ | -------------------- | ----------------------- |