pasoul / jtools

🖇 js工具库

Description:

前端 js 工具库: 封装常用的工具函数，如日期格式化、浏览器判断等，提高开发效率

Document

Todo

• 引入代码校验工具 eslint
• jsdocs 自动化生成 api 文档
• 测试覆盖率统计 coverage
• 按需加载
• 支持浏览器环境，node 环境、es6 环境

如何使用:

1. 直接下载 dist 目录下的 jtools.min.js 使用，支持 UMD 通用模块规范
2. 使用 npm 安装

浏览器：

<script src="jtools.min.js"></script>
<script>
    var result = jtools.add(1, 2)
</script>

npm:

npm i jlb-tools

全部加载（webpack、RequireJS、SeaJS 等）：

var jtools = require("jlb-tools");
var result = jtools.add(1, 2);

es6

import jtools from "jlb-tools";
var result = jtools.add(1, 2);

按需加载

结合babel-plugin-import-load按需加载可以极大的减小依赖包的体积

import { add } from "jlb-tools";
var result = add(1, 2);

自动化生成文档

JSDoc是一个根据 javascript 文件中注释信息，生成 JavaScript 应用程序或库、模块的 API 文档 的工具。你可以使用他记录如：命名空间，类，方法，方法参数等。类似 JavaDoc 和 PHPDoc。现在很多编辑器或 IDE 中还可以通过 JSDoc 直接或使用插件生成智能提示。从而使开发者很容易了解整个类和其中的属性和方法，并且快速知道如何使用，从而提高开发效率，降低维护成本。

yarn run doc

扩展

如果你想添加自己的工具库，在 src 目录创建文件，对应 test 目录添加测试用例，执行 yarn test

贡献方法

• fork 本仓库到自己账户。
• 新建一个分支来开始您的工作，分支的名字为 feature_功能名称 或者 buxfix_issueId。
• 完成功能后请在 test 目录添加完整测试。
• 完成后，发送一个 pull request 到 Pasoul/jtools。
• 等待核心开发者做 CodeReview。
• 最后，恭喜你贡献成功。

jtools's Issues

按需加载实践

本文列出常见的几种加载方式，旨在探索最佳加载实践。

jlb-tools版本：v0.0.4
webpack版本： v4.25.1

1、全量加载

import jtools from "jlb-tools";

打包后体积查看

2、部分加载

import { handleEmoji } from "jlb-tools";

打包后体积查看

发现体积依然是22.2Kb，部分加载没有生效，依然引入所有的js文件。按需加载没有生效？为什么element-ui 可以通过 import { Button } from 'element-ui';方式按需加载？

实际上 element-ui 想要实现按需加载，必须要借助babel-plugin-component插件完成，此插件将import { Button } from 'components'引入方法编译成var button = require('components/lib/button'),即最终引入的组件都放在lib目录下

3、按需加载的方案

方案一：每个模块都单独发布npm包

比如lodash，可以通过如下方式引入需要的模块：

npm i --save lodash.debounce
var debounce = require('lodash.debounce');

方案二：将每个模块单独导出

通过如下方式引入

var isMobile = require("jlb-tools/lib/isMobile");

查看打包体积，只有1Kb

打包体积确实减小了，但是写法过于冗长，借助babel实现import {isMobile} from 'jlb-tools'方式引入。

方案三：方案二+babel

此方案是在babel插件基础上，对方案二的改进

写法如下：

import {isMobile} from 'jlb-tools'

在.babelrc中配置

// .babelrc
{
  "plugins": [
   ["import-load", { library: "jlb-tools" }]
  ]
}

查看打包后的体积：

实际上此插件将import {isMobile} from 'jlb-tools'最终编译成import isMobile from "jlb-tools/lib/isMobile";

Error: Couldn't find preset "@babel/env" relative to directory

如果遇到此问题，应该在babel-loader配置中移除对node_modules校验

module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }
    ]
  }

babel6只会对.babelrc进行处理，为了避免此问题，jlb-tools 将 .babelrc 替换成 .babelrc.js