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

本系列文章讲什么内容？

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

为何须要开发一个前端库呢？

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

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

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

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

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

库的形式是多种多样的，能够是一个 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 走一波哈(〃^ω^)