【NPM】工程化npm(依赖)包开发之基础知识

随着前端项目越来越大且复杂，我这非专业的也来研究下npm库的开发了！
最近研究来看，资料错综复杂百花齐放，给整迷糊了～～
这不，来做个笔记梳理下！
这篇就先简单介绍下几个概念知识

前言

工具不是关键，形成一套稳健的流程方案才是核心

工程化项目开发流程(阶段)： 技术选型 -> 统一规范 -> 开发 -> 检查 -> 测试 -> 部署 -> 追踪

今天先整理下常见或不认识的一些基础知识吧～

npm
- npmjs.com (即包管理器也是依赖包资源社区)
yarn
- classic.yarnpkg.com (1.x版本)
- v3.yarnpkg.com (3.x版本)
- yarnpkg.com (新4.x版)
pnpm
- pnpm.io
bun
- bun.sh (2023年9月8日正式发布)

npm包管理的主流模式(或策略)

Monorepo 单一仓库
Multirepo 多仓库
其他(可以借鉴软件工程开发结构模式)

Monorepo（单一仓库）结构模式是指将一个项目的所有代码、依赖和工具都放在一个单一的代码仓库中进行管理。

优点：
- 统一管理：所有的代码和依赖都在一个地方，方便进行版本控制、构建和测试。开发人员可以更容易地了解整个项目的结构和代码，提高开发效率。
- 代码复用：可以方便地在不同的项目模块之间共享代码和工具。这有助于减少重复开发，提高代码的可维护性和可扩展性。
- 依赖管理：可以统一管理项目的依赖关系，避免不同模块之间的依赖冲突。同时，也可以更容易地进行依赖升级和安全漏洞修复。
- 持续集成和部署(CI/CD)：可以更容易地实现持续集成和部署，因为所有的代码都在一个仓库中，可以使用统一的构建和部署流程。
缺点：
- 仓库规模大：随着项目的增长，仓库的规模可能会变得非常大，导致克隆和更新仓库的时间变长。
- 权限管理复杂：如果有多个团队或开发者在同一个仓库中工作，权限管理可能会变得复杂。需要确保不同的团队或开发者只能访问他们需要的部分。
- 构建时间长：由于所有的代码都在一个仓库中，构建时间可能会比较长。特别是在大型项目中，构建时间可能会成为一个问题。
应用案例：
- Vue.js 的代码库包含了核心库、路由、状态管理等多个模块，它们都在一个 Monorepo 中进行管理。
- Ant Design、Element UI等…

Multirepo（多仓库）结构模式是指将一个大型项目或软件系统拆分成多个独立的代码仓库进行管理。每个仓库都有自己独立的版本控制、开发流程和发布周期。

优点：
- 独立性高：各个模块可以独立开发、测试和部署，互不干扰。这使得开发团队可以更加专注于特定的功能模块，提高开发效率。
- 灵活性强：可以根据项目的需求和团队的组织架构，灵活地调整各个仓库的结构和内容。例如，可以将不同的业务模块、技术栈或团队分配到不同的仓库中。
- 易于维护：由于每个仓库的规模相对较小，维护起来更加容易。可以针对特定的问题进行快速修复和改进，而不会影响到整个项目。
- 版本控制清晰：每个仓库都有自己独立的版本号，可以更加清晰地管理和追踪各个模块的版本变化。
缺点：
- 集成复杂：当需要将多个仓库中的模块集成到一起时，可能会面临一些挑战。需要进行复杂的依赖管理和版本协调，以确保各个模块之间的兼容性。
- 重复工作：可能会存在一些重复的工作，例如配置管理、测试框架等。需要在每个仓库中进行单独的设置和维护，增加了开发成本。
- 协作困难：如果不同的仓库由不同的团队负责开发，可能会出现协作困难的情况。需要建立有效的沟通机制和协作流程，以确保各个团队之间的协调和合作。
应用案例：
- Node.js 的核心模块有自己独立的开发仓库，而大量的第三方模块则分布在不同的 npm 仓库中

代码规范…

对团队协同来说，可以增加效率；
对个人来说，养成一个好习惯，日后回头看代码不至于云里雾里的

这块论资源还是蛮多的…各种编码规范，这里就收集一些热门的提供参考吧！

js 规范：
- 《阿里巴巴前端开发规范》 - 涵盖了 HTML、CSS、JavaScript 等方面的规范，非常详细且具有很高的实用性。对变量命名、代码格式、注释规范等都有明确规定，有助于提高团队协作效率和代码质量。
- 《Airbnb JavaScript 风格指南》 - 提供了全面的 JavaScript 编码规范，包括语法、命名约定、函数定义等方面，被很多开发者和团队采用。
- 《Google JavaScript 风格指南》 - 来自谷歌的规范，注重代码的可读性和可维护性。
- 百度前端编码规范 3.9k
css 规范
- 《BEM (Block Element Modifier) Methodology》 - BEM 是一种流行的 CSS 命名规范和架构方法，它可以帮助你创建可维护、可复用的 CSS 代码。这个网站详细介绍了 BEM 的概念和使用方法。

今天先到这吧～其他再整理整理…