基于rollup打造前端工具库的实践

BaronZhang 发布于2019-08-22 14:02 / 2507人阅读

摘要：获取参数总结这里我主要总结了我开发工具库所用到的一些实践，参考了不少开源的项目，写的比较匆忙，有些细节可以参考源代码，如果有不合理的地方尽情吐槽，共同进步。

基于rollup打造前端工具库的实践

老生常谈工具库，每个公司都应该需要一个工具库去处理一些公共重复的代码，比如公共函数，ajax，微信sdk，本地存储等等，目前构建工具大行其道，我觉得是时候摆脱复制粘贴的代码了，这里我对基于rollup构建工具库进行了一个总结（相比webpack更加配置简单，代码也清晰很多吧），更多是项目的组织，毕竟具体的代码每个公司都有自己的业务需求，希望能够帮助到大家。

目录结构

├── .git
├── .gitignore
├── .npmignore
├── LICENSE                      协议
├── coverage                     代码覆盖率文件
├── docs                         文档
├── index.html                   测试html
├── lib                          引用的入口文件
├── node_modules
├── package-lock.json
├── package.json
├── readme.md                    说明文档
├── rollup.config.js             rollup配置文件
├── scripts                      构建脚本
├── src                          开发目录
├── test                         测试用例
└── yarn.lock

这是最终的项目目录结构地址

配置

  import pkg from "./package.json";
  import buble from "rollup-plugin-buble";
  import resolve from "rollup-plugin-node-resolve";
  import uglify from "rollup-plugin-uglify"
  import { minify } from "uglify-es";
  export default [
    {
      input: "src/main.js",
      output: {
        name: "_",
        file: pkg.browser,
        format: "umd"
      },
      plugins:[
        resolve(),
        buble({  // transpile ES2015+ to ES5
          objectAssign: "Object.assign",
          exclude: ["node_modules/**"]
        }),
        uglify({},minify)
      ],
    },
    {
      input: "src/main.js",
      output: { file: pkg.main, format: "es" },
      plugins: [
        resolve(),
        buble({
          objectAssign: "Object.assign",
          exclude: ["node_modules/**"]
        }),
        uglify({},minify)
      ]
    }
  ]

rollup.config.js是rollup的主要配置文件，这里我主要将代码打包成浏览器直接使用的umd格式和打包工具使用的esm格式。
最终会生成

lib
  z.esm.js  webpack等工具import，支持tree shaking按需加载
  z.min.js  script标签引入

开发

我这边将开发的具体代码放在src中，入口为main.js，每个功能模块是一个目录，有个入口文件index.js方便进行单元测试，然后只有针对一个方法建立一个文件就可以了，已url处理功能为例:

src
  main.js
  reg/
  dom/
  url/
    index.js
    getParamByName.js
    parseQueryString.js

url/index.js

//暴露处所有的方法
export * from "./getParamByName"
export * from "./parseQueryString"

url/getParamByName.js

/**
   * 获取url参数
   * ### Example (es imports)
   * ```js
   * // url www.baidu.com?c=aa
   * import {getParamByName} from "zrutil"
   * getParamByName("c") => "aa"
   * ```
   */
  export function getParamByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[[]]/g, "$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/+/g, " "));
  }

测试

好的工具库缺少不了测试，这里我采用的是jest, 个人认为jest的集成度更高，语法也简单，内置的代码覆盖率检查很快就可以上手。我们只需要对每个功能模块进行测试代码的编写就可以了。

test/url.test.js

 import {parseQueryString, getParamByName} from "../src/url"

  describe("url test", ()=>{
    const url = "http://www.baidu.com?a=1&b=aaa"

    describe("获取url参数:getParamByName",()=>{
      test(`${url} getParamByName("a",url)  返回 1`, ()=>{
        expect(getParamByName("a",url)).toBe("1")
      })
      test(`${url} getParamByName("b",url) 返回 "aaa"`, ()=>{
        expect(getParamByName("b",url)).toBe("aaa")
      })
      test(`${window.location.href} getParamByName("c") 返回 "ccc"`, ()=>{
        expect(getParamByName("c")).toBe("ccc")
      })
      test(`${window.location.href} getParamByName("b") 返回 null`, ()=>{
        expect(getParamByName("b")).toBe(null)
      })
    })

    describe("解析url:parseQueryString",()=>{
      test(`${url} 返回 {a:"1",b:"aaa"}`, ()=>{
        expect(parseQueryString(url)).toEqual({a:"1",b:"aaa"})
      })
      test(`${window.location.href}  返回 {c:"ccc"}`, ()=>{
        expect(parseQueryString()).toEqual({c:"ccc"})
      })
    })
  })

测试结果:

测试覆盖率:

文档

为了使文档能够自动化生成,主要采用了jsdoc-to-markdown,只需要在每个方法上写上注释的代码，就能自动化的生成对应的md文档，非常方便。

/**
   * 获取url参数
   * ### Example (es imports)
   * ```js
   * // url www.baidu.com?c=aa
   * import {getParamByName} from "zrutil"
   * getParamByName("c") => "aa"
   * ```
   */
  export function getParamByName(name, url) {
  }

总结

这里我主要总结了我开发工具库所用到的一些实践，参考了不少开源的项目，写的比较匆忙，有些细节可以参考源代码，如果有不合理的地方尽情吐槽，共同进步。

项目地址:地址
开发环境: MacOS

服务器托管混合云 excel数据分析工具库的应用主要更新了工具链、运行时和库的实现基于腾讯云的k8s实践 ROLLUP

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92802.html

前端小报 - 201812 月刊

摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...

Coding01 2019-08-30 15:55 评论0 收藏0
前端小报 - 201812 月刊

摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...

jsliang 2019-08-02 14:02 评论0 收藏0
前端小报 - 201812 月刊

摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...

zhangrxiang 2019-08-23 14:34 评论0 收藏0
前端小报 - 201812 月刊

摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...

yunhao 2019-08-05 15:55 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0