《从0到1手写可插拔前端框架》1.前端漫谈:npm包与框架

462 阅读5分钟

该小节主要知识点:

  • 什么是 npm包
  • ⭐️ 什么是 框架
  • 为什么要学习和编写 npm包
  • 实现一个自己的 npm包 需要什么准备

什么是npm?

npm 即 Node Package(包) Manager(管理器)
是一个 Nodejs包管理平台

什么是npm包?

npm 包说白了其实就是一个具有一定功能Nodejs 模块

我们可以通过将这个模块发布到 npm 仓库上达到便捷模块共享

什么是 '模块'

tips: 在第5小节将为大家介绍模块化的发展史

在前端从刀耕火种的年代到如今的工程化兴起,伴随着工程化相生的另一个词叫 -- 模块化

CJS、ESM都是模块化的代名词,相信大家早就耳熟能详了

我们通过这种 模块化的形式 可以将一些具有特定功能的代码抽离出去达到 逻辑复用 的效果,这样往往能节省大量的时间和人力资源


近期大多数前端在进行开发时都用到的 比如:

常见组件库:

  • 蚂蚁的 AntDesign、阿里的 ElementPlusElement ui ...

常见业务钩子库:

  • react-useahooksvue-use ...

常用工具库:

  • lodashAxios@umijs/utils ...

常用打包工具:

  • WebpackRollupGlulpTurbopack ...

常用编译工具:

  • tscbabelesbuildswc ...

常见框架:

  • ReactVueSvelteNuxtjs``、NextjsUmijs ...

其实我们在使用这些我们耳熟能详的库的时候,大多数情况都是通过 npm包 的形式引入的(当然还有比如用CDN引入等),他们会作为一个特定的功能模块去完成我们的需求--方便

如果你在业务中发现了某种 业务痛点 并将 解决思路 封装成一个优质的npm包,相信我,它的 star 一定不会少

因为 你遇到的业务痛点、开发上遇到的技术难点往往也是大多数开发者所苦恼

什么是'框架'

打个比方:

框架是工厂,服务于社会大众 这个工厂里面有很多的流水线

npm 库是流水线 每个流水线都有自己的 特定的功能/任务

工厂不仅仅是流水线的集合,更重要的是如何把流水线组织起来井然有序保障交付的质量和效率


比方说拿大家最熟悉的Vue2仓库来看:

这里使用 monorepo 去管理整个代码仓库 方便本地开发与单独发包

tips: 后面的章节会详细的介绍 monorepo 以及它在 mini-umi 里的实践

只需要知道 package下的每个文件夹 基本都是一个 独立的 npm 包


image.png

从上图 我们看名字就知道,这个包是编译dom的,这个包是编译vue的单文件sfc的,这个包是响应式核心、这个是一个编译ssr的,这个包是作用于运行时的...

上面这些包是 vue 吗 - 不是

最底下的那个 vue 包才是我们熟知的 框架-Vue

这些npm库确实实现了某一类功能,但是 框架通过一系列的组合制定了应用规则保障了交付的品质,可以让我们 低成本使用高品质的工具

当然,一个好的框架还有很多东西要去考量,比方说;框架的可扩展性灵活性开发中的规范交付质量

这不仅仅是前端该思考的,作为程序开发的我们都要在这条路漫漫上下求索~

为什么要学习和编写npm包?

说了这么多,npm包和框架的重要性已经不言而喻了

有些刚毕业的前端做了一两年开发也没写过一个npm包,因为我们大多数人都是在做所谓的切图工作

什么?B端 中后台?我会用 Antd ElementPlus

什么?C端?我能还原页面 完成css 动画

什么?小程序?跨端? 我能忍受拉胯的开发体验 调api写css

可让一个实习生来干熟悉一两周 他也能干 所以我们没有竞争力

我们必须要有更多更丰富的业务经验提升我们的价值

了解学习和编写npm库 学习工程化 扎实前端功底 有助于我们提升核心竞争力

实现一个自己的npm包需要什么准备?

实现一个这样的npm库你需要:

  1. 熟知基本的npm库开发流程
  2. 保证 它可以在其他 Users 那里被正常使用
  3. 思考用户的使用体验 例如:体积 导出的内容 等等
  4. 了解如何发布一个npm包

小结:

本小节我们

1.首先为大家介绍了什么是 npm 包以及举例说明前端开发中常用的一些 npm类库 ,并概述它们大多都是将我们在开发过程中遇到的业务痛点封装起来的共性

2.主要为大家介绍了什么是框架,框架与某个独立功能的 npm类库 的区别,它制定了一系列应用规则去保证各流水线之间相互配合、顺利运转,提高开发者效率,保障交付质量

3.通过前端现状为大家讲述学习 npm包 也就是 类库开发 的重要性,目的是为了更好的扎实前端基础,提升自己的核心竞争力

4.简单介绍实现一个 npm包 需要准备什么

下一小节将会为大家讲解如何一步一步实现一个第一个npm包CLI ~

小节思考:

什么是前端框架? 它和单一功能的前端类库有什么区别