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

[Array-Huang]

本系列文章讲什么内容？

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

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

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

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

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

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

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

库的形式是多种多样的，可以是一个 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 生态圈添砖加瓦，不妨参考一下本项目。

vue-directive-window 目录结构

• dist webpack 输出目录
  • vue-directive-window.common.js CommonJS 格式的库
  • vue-directive-window.umd.js UMD 格式且未压缩的库
  • vue-directive-window.umd.min.js UMD 格式且已压缩的库
• docs 存放文档源文件及相关配置
• script 本地开发、构建发布相关的脚本
  • deploy.sh 发布文档到 github-page 的脚本
  • dist-copy.js 在本地开发时，修改库源文件且自动构建完成后，复制 UMD 格式的库到文档目录，供本地文档实时预览效果使用
• src 库的源文件
• .browserslistrc 声明当前库目标兼容的浏览器，供 babel 使用
• .eslintrc.js eslint 的配置文件
• .gitignore 声明让 git 忽略的文件
• .prettierrc.js prettier 的配置未见
• LICENSE 库的开源协议许可证
• README.md 库的英文版 README
• README.zh-CN.md 库的中文版 README
• babel.config.js babel 的配置文件
• package-lock.json 由 npm 创建的、记录并锁定 npm 包版本的文件
• package.json 声明库的名称、版本、描述、作者、依赖的第三方npm包等信息
• postcss.config.js postcss 的配置文件
• vue.config.js vue-cli 的配置文件