现代前端库开发指南系列（一）：融入现代前端生态

本系列文章讲什么内容？

本系列文章主要介绍如何在现代前端生态下，创建一个工业级别的库。近几年来，前端工程化、模块化、组件化的大潮铺天盖地而来，在解决以往的架构痛点之余，却又产生了信息过载的问题；我希望通过分享自己的经验，帮助大家少踩坑多出活。

在网站设计、做网站过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

为什么需要开发一个前端库呢？

在项目开发过程中，总有一些功能是相同或类似的，如果你只是单纯地复制粘贴这部分代码，那么恭喜你，假以时日，需求一改，你就只能自尝苦果了。

你说，这还不简单，抽成公共方法公用不就好了吗？对的没错，但请把视野再放广一点：在工作中，我们很可能参与到不同项目的开发，这些项目分别放置在不同的代码仓库里，这样的话很遗憾，你写的公共方法还是没法公用；再者，目前流行的微服务/微前端，本来就是把一个大项目分拆成更小的粒度来开发、存储和部署，你写的公共方法又怎么在这微前端架构中公用呢？

因此，我们可以考虑把一些重用价值较高的代码段，抽象出来形成一个库，这样我们既可以在项目组内随意使用，也可以跨项目组进行输出，甚至是给开源社区添砖加瓦。

什么样的代码适合做成库呢？

基于前端组件化这一思想，我认为只要一个功能的内部逻辑稳定，对外又能够提供明确接口，那么这个功能就可以做成一个库。

库的形式是多种多样的，可以是一个 function ，可以是一个 class ，可以是一个 UI 组件，可以是一整个页面（把一些公共页面做成库来在微前端架构中公用也是一个非常不错的选择），甚至可以是一份公共样式文件（纯 css ）。

本系列文章的受众是？

写本系列文章的时候，我会预设读者们是能够在现代前端体系下，熟练编写业务代码，并且对 webpack 有一定的认识。另外，碍于我本人的技术栈限制，我将主要以 vue / 原生 javascript 的角度来撰写文章，但你应该也能轻松找到 react/angular 中对应的技术和概念。

本系列文章涉及内容预览

• 使用 webpack 构件前端库与构件一般应用不一样的点
• 开发场
• 浏览器兼容性
• 说明文档和使用文档
• 开发规范
• 单元测试
• 持续集成
• 发布

实例项目代码介绍

我会以我最近写的两个开源库：javascript-library-boilerplate 和 vue-directive-window 来作为实例项目代码来辅助介绍。

javascript-library-boilerplate

javascript-library-boilerplate是一个现代前端生态下快速构建 javascript 库的脚手架（或称种子项目，或称示例代码，看你理解了），本库支持 GitHub 的 repository templates 功能，你可以直接在项目首页点击 Use this template来直接套用本脚手架的代码来创建你自己的 javascript 库。

vue-directive-window

vue-directive-window是一个可以快速让模态框(modal)支持类窗口操作的增强库；类窗口操作主要包括三大类：拖拽移动、拖拽调整窗口尺寸、窗口最大化； vue-directive-window 支持以 Vue 自定义指令或是一般 js 类的方式来调用。

vue-directive-window 相对于 javascript-library-boilerplate 来说，更贴近 Vue 生态圈，如果你最近想为 Vue 生态圈添砖加瓦，不妨参考一下本项目。

系列文章目录（同步更新）

• 《现代前端库开发指南系列（一）：融入现代前端生态》
• 《现代前端库开发指南系列（二）：使用 webpack 构建一个库》
• 《现代前端库开发指南系列（三）：从说明文档看库的前世今生》

想要阅读更多我的技术文章？请到我的 GitHub 博客 Array-Huang/blog 来，如果对您有帮助的话请 Star&Watch 走一波哈(〃^ω^)

文章标题：现代前端库开发指南系列（一）：融入现代前端生态
当前URL：http://shouzuofang.com/article/jcgdip.html