一篇看了就会的前端工具库开发指南

背景

1、不同项目以及不同模块相同的函数开发多次，效率低 
2、代码复用性低、通用性差、可读性差

目标

主要对当前问题分析，将前端相关函数沉淀到一起，入口统一，方便查看和使用

技术栈

Webpack4（项目搭建） + VuePress（文档库） + Jest（单元测试）

项目搭建 - `项目结构`

-   build ：用来存放打包配置文件
-   dist ：用来存放编译完生成的文件
-   docs：文档库文件
-   src： 存放源代码(包含各个模块的入口)
-   test：存放测试用例
-   babel.config.js : 配置将ES2015版本的代码转换为兼容的 JavaScript 语法
-   jest.config.js : jest的配置文件
-   jsdoc2md.js : 将js文件转化为md文件
-   package.json : 定义包的配置及依赖信息
-   README.md ：介绍了整个工具库的使用及包含的功能

文档库 -`VuePress`

为什么选择VuePress?

简明优先：对以markdown为中心的项目结构，做最简化的配置，帮助你专注于创作
Vue驱动：享用Vue+webpack开发环境，在markdown中使用Vue组件，并通过Vue开发自定义主题
性能高效：VuePress将每个页面生成为预渲染的静态HTML，每个页面加载之后，然后作为单页面应用程序(SPA)运行

初始化

1.安装

npm install -g vuepress

2. 在package.json中添加命令

"scripts" : {
   "dev": "vuepress dev docs", // 用于实时预览
   "build": "vuepress build docs", // 用于打包项目
}

3.配置config.js文件

4.配置首页README.md

目录结构

文档库 - `jsdoc-to-markdown`

jsdoc-to-markdown：一款可以将js内容生成为markdown格式文件的工具库

安装流程

1.安装

npm install --save-dev jsdoc-to-markdown

2. 编写jsdoc2md.js文件，自定义规则模板

根据需求注意api注释格式（如下图）

3.运行命令，得到 markdown 的文档

node jsdoc2md.js

单元测试 - `Jest`

为什么选择Jest?

轻松上手
内置强大的断言与 mock 功能
内置测试覆盖率统计功能
内置 Snapshot 机制

示例代码

import unit from '@/utils/unit/index.js';

describe('unit 模块', () => {
    test('formatSize 文件大小字节转换成B，KB，MB，GB，TB', () => {
      expect(unit.formatSize(1024)).toBe('1.00 KB');
      expect(unit.formatSize(1048576)).toBe('1.00 MB');
      expect(unit.formatSize(1073741824)).toBe('1.00 GB');
    });
    test('formatDollars 转化为金额格式（每隔三位加逗号）', () => {
        expect(unit.formatDollars('3500')).toBe('3,500');
        expect(unit.formatDollars('100')).toBe('100');
    });
});

💡注意：测试覆盖率至少达到80%才能上线使用哦~

一篇看了就会的前端工具库开发指南

背景

目标

技术栈

项目搭建 - 项目结构

文档库 -VuePress