【开库】参与Vue开源组件库，你需要什么技能？基础篇（一）

摸鱼的春哥
1,742 阅读4分钟

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

你好，陌生人。我是春哥，一个讨厌😞加班却经常加班，热爱摸鱼🐟却很少摸鱼的前端工程师。
本科机械🐶专业的我，转行码农最大的原因，就是因为认同程序界的「开放」与「分享」!
希望我发出的微弱光芒，也能给你带来一些帮助。

【开库】系列前言 🚕

有人说：「几乎每个前端都幻想过，自己也要有一天成为开源界的大佬，写出来的组件和库被无数人使用。」
当然，伴随而来的还必须有财富自由和升职加薪，迎娶白富美,出任CEO，走向人生巅峰……
不管你们是不是，反正这确实是经常出现在我梦中。
可惜：如果做梦有用的话，梦想早就一文不值了。

xingye.jpg
为了距离【开仓立库】的梦想每天近一点点，我们应该学些什么呢？
我计划开一个系列文章，详细介绍前端应该怎么一步步变强，一步步创建、发布、落地自己的组件库！
每篇讲三个我认为非常重要的知识！讲完为止。
本篇是基础系列的第一篇——梦开始的地方。

基础知识一 npm标准 🚕

npm标准到底有多重要？
我的答案是非常重要！
我将它列到第一位，是因为我认为这是所有有梦想的前端，必须了解的核心知识，没有例外！
无论你当前使用的是npm/cnpm/pnpm/yarn或者是其他什么，你一定不能忽视npm本身所代表的标准。
因为任何一种js包管理器，其本质都是基于npm标准的一种实现。
如果不了解npm标准，你可能都无法理解你的程序在如何运行。
不信？
那不妨一一看看以下这些问题：

问题一：package.json中的dependencies、devDependencies的主要差异是什么？什么情况下才能体现出这种差异？devDependencies可以被打到制品包内吗？开发期的依赖可以放到dependencies里吗？

问题二：package.json中的main、module属性分别起什么作用？在什么情况下会起作用？

问题三：为何npmjs.com上最新的vue版本是3.2.2（截止2021-11-08）,
但yarn add vue@latest命令安装上的却是^2.6.14？

如果上面这些问题你都可以顺利回答出来，那说明你对npm的机制已经有了初步的了解。
如果感觉模模糊糊，那你可能真的需要补补课了。

关于npm标准可以问的问题实在太多，它们不光直接影响了我们的日常开发，如果你的梦想是【开仓立库】，如果不去学习这些知识点，只怕更是寸步难行！
那么应该去哪儿学呢？
系统性学习，永远来自官方：npm官网文档
至于单个知识点，谷歌、度娘、掘金上都有散落的知识碎屑。
以下是一些我觉得非常不错的博文，大家可以收藏本文，有时间依次阅读下面博文：

  1. # 前端工程化5：你所需要的npm知识储备都在这
  2. # 你真的了解package.json吗？来看看吧，这可能是最全的package解析
  3. # 【白话前端】在爱情故事中明悟dependencies和devDependencies的区别 (抱歉，这篇纯属凑数，因为作者正是再下，水平不够，私心来凑)

基础知识二 semver版本标准 🏆

严格来说，semver标准也属于npm标准的一部分，但我觉得有必要将它单独拎出来说一说。
为什么？
因为我们的梦想是【开仓立库】，版本号是组件库的重要组成部分，没有合理的版本管理，组件库将会成为使用者的噩梦。
什么是semver版本号？

"vue": "2.6.0"  // 这个2.6.0就是完全符合semver标准的版本号

在学习semver标准时，我们应该着重去学习哪些知识呢？
我随手列了一些能想到的点，如有遗漏欢迎指正：

  • semver版本号的组成和含义（major.minor.patch.prerelease）
  • semver范围匹配规则和操作符(>,<,>=,<=,~,^,latest)
  • npm version 命令
  • 什么情况下应该升级什么版本号？（补丁修复、新增特性、断代更新）

推荐阅读的文章：

  1. 永恒不变（除非npm升级了）的官网：# npm官方semver文档
  2. 约等于中文文档：# semver扫盲 (凑凑数)

基础知识三 Monorepo 🏆

什么是Monorepo？我为什么需要学习它？
简单说：
Monorepo是一种项目管理方式。
再往简单了说：
Monorepo是一种多包单仓库的代码管理方式。
哈哈，我知道你现在还是很懵,感觉我好像什么都说了，又好像什么都没说。
没事，我还是以vue仓库为例，举个栗子：

0A10A058-6AB8-4c29-8E08-AD70317F9927.png

细心的你会发现，该仓库内存在多个package.json。
而且仓库是用类似以下的结构进行搭建的：

├─build
├─docs
├─packages
│  ├─common
│  │  ├─package.json
│  │  ├─docs
│  │  └─src
│  ├─icon
│  │  ├─package.json
│  │  ├─docs
│  │  └─src
│  └─components
│      ├─package.json
│      ├─docs
│      └─src
├─scripts
└─package.json

在项目根目录下，包含了代码规范化，构建脚本，各类配置，唯独没有功能模块。
所有和功能相关的内容，全都在packages文件夹下。
如果你细心观察，目前非常多的仓库都开始慢慢转向这种Monorepo结构。
那么它究竟有什么好处呢？
我简单列举几条，有遗漏请指正：

  • 统一的代码规范
  • 统一的版本号管理和依赖管理
  • 更清晰的依赖关系
  • 无需link就能联调（关于link，下一篇会单独提出来说） 具体内容我就不展开了，照例列出一些文章：
  1. # 现代前端工程为什么越来越离不开 Monorepo?
  2. # Monorepo-多包单仓库的开发模式

未结束的结束语（本系列：未完待续！！！）

ok,第一篇的3个知识点就先介绍到这里~🐟🐟
后面我会一点点把我觉得重要的知识点放出来，一边放一边自行学习查漏补缺💻💻，和大家一起进步。
如果你觉得本系列可能对你有帮助的话，不妨： 点赞！ 关注！ 收藏
💗💗💗💗💗

avatar
文章
阅读
粉丝