基於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