基于 Stencil 构建 Web Components 组件库--掘金小册课程推荐/优惠

作者介绍

Super_x （ 老曹），资深前端工程师，现任职于新晋独角兽公司，任职于主站中台 & 基建架构组，同时为 Web Components 组件库负责人，从事前端6年，有4年关于前端架构及组件库开发经验。

小册介绍

组件化一直是Web前端发展的一个大方向，例如 React、Vue 都是组件化思想抽象的框架，而 Web Components 作为下一代Web组件化技术的核心，凭借着体积小、效率高、浏览器原生支持等特点受到了很多前端开发者的关注。

随着 Google 和 w3c 的推动，也有越来越多的国际企业开始使用 Web Components 来构建他们的组件库。京东的跨端框架 Taro 的组件部分，就是用基于 Web Components 的工具链 Stencil 开发，可以看出，Stencil 和 Web Components 已经逐渐被前端开发者所认可接受。

现在去研究它们，正是最佳入场时机。

Stencil 是 ionic 公司的一个开源框架，简单来说，它是一个构建 Web Component 的工具集。在 Stencil的框架下面，我们可以以一种类似 React 的方式去开发 Web Component 组件，它有更加便捷的语法糖、更高的渲染效率。而且集成了unit和e2e的测试框架，而且最需要注意的是，它只是一个构造器，最终的编译结果是标准的Web Component组件，所以它不会作为我们组件库的直接依赖。

Stencil在国内还未被广大前端开发者所认知，基于Web Component 的组件库也是凤毛菱角，为了紧跟Web技术更新迭代的潮流，我们前端开发者们是时候接触 Web Component 这种技术，了解 Stencil 这个优美的框架了。

本小册会以实战开发组件为主线，介绍过程中的知识点和注意事项、以及好的代码风格和规范。

你会学到什么？

本小册会从 0 到 1 构建一个基于 Stencil 的 Web Components 组件库，其中会前置介绍相关技术栈的背景、概念、基本用法；介绍组件库的架构和设计原则；学习组件库的样式 SCSS 文件该如何组织。

然后会再挑选两个比较有代表性的组件，剖析它们的代码设计过程。一步一步实现相应功能，培养一个良好的组件设计思想。

还会介绍 Unit 单元测试和 e2e 测试的基本概念和书写规则。

最后也会基于 dumi 去构建一个静态网站去介绍每个组件的用法和功能。在整个学习过程中，还会给大家做一些代码风格规范的培养和纠正。

总的来说，通过这本小册你可以获得：

1. 学习到Web Components的基础知识；
2. 学习到如何用Lerna管理Monorepos；
3. 学习到Stencil框架的核心知识；
4. 学习到开发一个组件的流程与核心要素；
5. 学习到如何构建一个组件库的scss文件；
6. 了解一个组件的完整开发流程；
7. 如何书写 unit 和 e2e 测试 case；
8. 如何使用 dumi 构建你的组件库静态页面；
9. 一个好的代码规范和编程风格。

适宜人群

• 对下一代 Web 技术感兴趣的前端小伙伴；
• 想要了解开发组件库整体流程的同学；
• 前端中级、高级开发人员，需要扩展自己技术视野；
• Web Components 组件库开发人员。

• 为什么 Web Components 会成为未来组件化的发展趋势？

• 初识 Web Components 与 Stencil

• SCSS 与 BEM 规范

• 使用 Lerna 管理你的代码仓库

• 如何设计组件库的 SCSS 结构？

• 如何使你的 commit 更加规范与优美？

• Stencil 安装以及初始化

• Stencil 项目结构解析

• Stencil 的装饰器

• 浅析 Stencil 的生命周期与 render 函数

• 用 Functional Components 构建 Icon 组件

• 如何使用用脚本构建 Icon 系列组件

• 链接 themes 包，实战开发 Image 组件

• 组件自动化测试之 e2e 端到端测试

• 组件自动化测试之 unit 单元测试

• 如何使用 dumi 构建组件库文档示例网站？

• 如何使用 Semver 规范和 lerna 命令发布组件库？

• 如何在项目中引入我们的组件库？

• 好的代码规范和编程风格推荐

• 组件完整交付流程的思考