iwowen的博客
iwowen
记录和分享技术
  1. 首页
  2. 前端
  3. 正文

使用rollup和typescript搭建自己的函数库

2020年12月02日 194点热度 1人点赞 0条评论

简介

每当在项目中需要使用一些工具函数时,一般需要去引入一些第三方的工具库,而像lodash这样的工具库又体积很大,影响打包后整个项目的大小。所以封装自己的代码库就很必要了。

本篇文章将介绍如何使用rollup工具生成自己的代码库;
为了提高代码可维护性,将使用typescript编写代码;
为了保证代码质量,将通过jest进行代码测试;
工具库需要可查阅的文档,为了更好的支持typescript,使用了typedoc生成文档。

依赖的库

  • rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。
  • typescript javascript的超集,支持类型定义。
  • typedoc 生成库文档
  • jest 用于代码单元测试

初始化项目

  • 先创建目录并初始化node项目。
    mkdir myTools
    cd myTools
    npm init -y
  • 安装rollup
    npm install rollup -D
  • 先创建modules目录,然后再在目录中创建入口文件index.js
  • 之后创建rollup.config.js,配置如下:
    export default {
    input: "modules/index.js",
    output: [
    {
      file: "lib/bundle.cjs.js",
      format: "cjs",
    },
    {
      file: "lib/bundle.esm.js",
      format: "es",
    },
    ],
    };

    配置地址:https://www.rollupjs.com/guide/big-list-of-options/

    amd – 异步模块定义,用于像RequireJS这样的模块加载器
    cjs – CommonJS,适用于 Node 和 Browserify/Webpack
    esm – 将软件包保存为 ES 模块文件,在现代浏览器中可以通过 <script type=module> 标签引入
    iife – 一个自动执行的功能,适合作为<script>标签。(如果要为应用程序创建一个捆绑包,您可能想要使用它,因为它会使文件大小变小。)
    umd – 通用模块定义,以amd,cjs 和 iife 为一体
    system - SystemJS 加载器格式
  • 然后在package.json文件中加入运行命令
    {
    ...
    "scripts": {
        "build": "rollup --config"
    },
    ...
    }
  • 执行命令npm run build将自动打包代码到lib目录。

添加typescript支持

  • 安装支持库
    npm install typescript rollup-plugin-typescript tslib -D
  • 修改rollup.config.js配置,添加typescipt插件
    import typescript from "rollup-plugin-typescript";
    export default {
    input: "modules/index.ts",
    output: [
    {
      file: "lib/bundle.cjs.js",
      format: "cjs",
    },
    {
      file: "lib/bundle.esm.js",
      format: "es",
    },
    ],
    plugins: [
    typescript({
      exclude: "node_modules/**",
      typescript: require("typescript"),
    }),
    ],
    };
  • 将modules/index.js入口文件修改为modules/index.ts

jest测试

接下来需要配置项目支持jest测试,保证代码正确性。

  • 先安装jest支持
    npm install --save-dev jest ts-jest @types/jest
  • 在根目录创建jest.config.js文件
    module.exports = {
    preset: "ts-jest",
    testEnvironment: "node",
    };
  • 在modules/index.ts写如下代码,导出版本。
    export const version: string = "1.0.0";
  • 创建test目录,并添加index.spec.ts测试文件,内容如下:
    import { version } from "../modules/index";
    test("当前项目版本为 1.0.0", () => {
    expect(version).toBe("1.0.0");
    });
  • 接下来添加运行命令,在package.json中添加:
    "test": "jest --no-cache"
  • 然后运行npm run test命令进行测试,jest语法详情见官网。

文档生成

  • 安装typedoc依赖
    npm install typedoc -D
  • 创建typedoc.json配置文件
    {
    "inputFiles": ["./modules"],
    "mode": "modules",
    "out": "docs",
    "exclude": "modules/index.ts"
    }
  • 编写注释
    编写注释的方法在这里:typedoc
    在modules/index.ts中编写文档注释

    /**
    * 当前函数库版本
    */
    export const version: string = "1.0.0";
  • 在package.json中添加生成文档的命令
    "doc": "typedoc --options typedoc.json"
  • 运行npm run doc命令生成文档,文档将生成在docs目录,可以通过gitpage展示文档。

入口编写

项目结构搭建好后,就可以添加自己的工具函数,为了在单个js文件中导出,需要将所有函数通过index.ts导出。
这里我在modules目录中编写了4个工具函数,分别是clone、cloneDeep、debounce、throttle。
我需要在index.ts中将所有函数导出,如下:

// functoin
export { default as debounce } from "./debounce";
export { default as throttle } from "./throttle";
export { default as clone } from "./clone";
export { default as cloneDeep } from "./cloneDeep";

这样就能通过import { cloneDeep } from "myTools"引入函数了。

我的函数库在这里https://github.com/iwowen/tutils

标签: js 库
最后更新:2020年12月02日

什码

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇

文章评论

取消回复

最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
在javascript中使用apply、call、bind函数 使用kodexplorer可道云作为hexo静态网站的后台 js数据类型和数据转换 使用rollup和typescript搭建自己的函数库 如何在react项目中使用redux? 前端使用canvas实现贪吃蛇小游戏
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1