# QuickLib

## 介绍

一个极简通用的函数库。支持`h5`,小程序,前后端项目通用。
quick.min.js 压缩后不到 `28k`开箱即用。

- [在线文档](https://qve.gitee.io/docs/lib/)
- [更新说明](https://www.npmjs.com/package/quick.lib)
- [rollup 入门](https://www.cnblogs.com/tugenhua0707/p/8150915.html)

## 更新说明

- [各版本说明](./release.md)

- 0.4.7
  `2022/10/1`

  - `cache` 新增提交 `full` 自定义全名参数

- 0.4.6
  `2022/9/30`

  - `html` 新增提交 `postForm`

- 0.4.5
  `2022/9/30`

  - cache,storage,cookie 新增以下方法
  - isKey 是否存在缓存名
  - getCacheAll 取出所有缓存内容
  - getCacheKeys 取出所有缓存键值名

- 0.4.4
  `2021/12/22`

  - `lib.array.sort` 创建数组排序方法,支持中文 localeCompare
  - `lib.range` 修正返回时间差
  - `lib.gap` 直接引用 `lib.range`

- 0.4.3
  `2021/12/2`

  - `lib.base64` base64 引用有冲突，调整到 lib 下

- 0.4.2
  `2021/12/2`

  - 去除 不兼容 c# UFT8 中文算法
    - `lib.base64Encode` 去除由 `base64` 替代
    - `lib.base64Decode` 去除由 `base64` 替代
  - 新增
    - `base64` 解决兼容 `C# base64 UTF8` 编码

- 0.4.1 [里程碑]
  `2021/11/18`

  - `lib.array.swap` 新增置顶元素
  - `lib.array.unique` 数组去重复添加,返回新数组
  - `toCamel` 下划或横线字符串转大写驼峰格式
  - `toCamelLine` 驼峰转小写下划或横线格式

- 0.4.0
  `2021/11/17`
  `html.mini` 修正 `0.3.9` 空格处理 bug

- 0.3.9
  `2021/11/17`
  `html.unpack` 修正解析模板标签之间空格等问题,新增外链
  `html.mini` 提前处理前后空格 step_d

- 0.3.8
  `2021/6/4`
  `bll.date.sec` 新增显示标签参数

- 0.3.7 [里程碑]
  `2021/4/4`
  `bll.funCode` 修正代码解析

## 终端命令

```bash
# 安装
yarn
# 测试
yarn dev
# 打包库
yarn build

# 单独打包成vue组件引用
yarn esm

# 单独打包为浏览器通用模块
yarn umd
```

### 打包输出

导出成 commonjs 模块，es 模块，以及浏览器能识别的模块，通过如下方式设置：

output.file: 要写入的文件，也可以用于生成的 sourcemaps。
output.format 生成包的格式，有如下格式：

1. amd -- 异步模块定义，用于像 `RequestJS` 这样的模块加载器。
2. cjs -- `CommonJS`, 适用于 `Node` 或 `Browserify/webpack`
3. es -- 将软件包保存为 ES 模块文件。
4. iife -- 一个自动执行的功能，适合作为 `<script>`标签使用。
5. umd -- 通用模块定义，以 `amd, cjs` 和 `iife` 为一体。

```js
{
  input: 'src/main.js',
  external: ['ms'],
  output: [
	{ file: pkg.main, format: 'cjs' },
	{ file: pkg.module, format: 'es' },
	{ file: pkg.module, format: 'umd' }
  ]
}
```

## rollup 安装

```js
npm i rollup -g

//然后在本地创建一个项目：

mkdir -p my-project
cd my-project
```

rollup 的配置文件(rollup.config.js 在根目录下)：

```js
// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};
```

### rollup 插件

比较实用的插件有：

- rollup-plugin-node-resolve ---帮助 Rollup 查找外部模块，然后导入
- rollup-plugin-commonjs ---将 CommonJS 模块转换为 ES2015 供 Rollup 处理
- rollup-plugin-babel --- 让我们可以使用 es6 新特性来编写代码
- rollup-plugin-terser --- 压缩 js 代码，包括 es6 代码压缩
- rollup-plugin-eslint --- js 代码检测

配置：

```js
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import { eslint } from 'rollup-plugin-eslint';

export default [
  {
    input: 'src/main.js',
    output: {
      name: 'timeout',
      file: '/lib/tool.js',
      format: 'umd'
    },
    plugins: [
      resolve(), // 这样 Rollup 能找到 `ms`
      commonjs(), // 这样 Rollup 能转换 `ms` 为一个ES模块
      eslint(),
      babel(),
      terser()
    ]
  }
];
```

### babel 编译 es6 代码

首先我们先安装 babel 相关模块：

```js
npm i core-js @babel/core @babel/preset-env @babel/plugin-transform-runtime
```

然后设置.babelrc 文件

```js
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "2.6.10",
        "targets": {
          "ie": 10
        }
      }
    ]
  ],
  "plugins": [
      // 解决多个地方使用相同代码导致打包重复的问题
      ["@babel/plugin-transform-runtime"]
  ],
  "ignore": [
      "node_modules/**"
    ]
}
```

@babel/preset-env 可以根据配置的目标浏览器或者运行环境来自动将 ES2015+的代码转换为 es5。需要注意的是，我们设置"modules": false，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS，导致 Rollup 的一些处理失败。

为了解决多个地方使用相同代码导致打包重复的问题，我们需要在.babelrc 的 plugins 里配置@babel/plugin-transform-runtime，同时我们需要修改 rollup 的配置文件：

```js
babel({
  exclude: 'node_modules/**', // 防止打包node_modules下的文件
  runtimeHelpers: true,       // 使plugin-transform-runtime生效
}),
```

### 区分测试环境和开发环境

我们可以在 package.json 中配置不同的执行脚本和环境变量来对开发和生产做不同的配置：

```js
// package.json
"scripts": {
    "dev": "rollup -c -w --environment NODE_ENV:development",
    "build": "rollup -c --environment NODE_ENV:production",
    "test": "node test/test.js"
  },
```

手动导出 NODE_ENV 为 production 和 development 来区分生产和开发环境，然后在代码中通过 process.env.NODE_ENV 来获取参数。这里我们主要用来设置在开发环境下不压缩代码：

```js
const isDev = process.env.NODE_ENV !== 'production';
// ...
plugins: [!isDev && terser()];
```

### eslint 来做代码检测

使用 rollup-plugin-eslint 来配置：

```js
eslint({
  throwOnError: true,
  throwOnWarning: true,
  include: ['src/**'],
  exclude: ['node_modules/**']
});
```

然后建立.eslintrc.js 来根据自己风格配置具体检测：

```js
module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: 'eslint:recommended',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    ENV: true
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single']
  }
};
```

### external 属性

使用 rollup 打包，我们在自己的库中需要使用第三方库，例如 lodash 等，又不想在最终生成的打包文件中出现 jquery。这个时候我们就需要使用 external 属性。比如我们使用了 lodash，

```js
import _ from 'lodash'

// rollup.config.js
{
    input: 'src/main.js',
    external: ['lodash'],
    globals: {
        lodash: '_'
    },
    output: [
      { file: pkg.main, format: 'cjs' },{ file: pkg.module, format: 'es' }
    ]
}
```

### 打包输出

导出成 commonjs 模块，es 模块，以及浏览器能识别的模块，通过如下方式设置：

output.file: 要写入的文件，也可以用于生成的 sourcemaps。
output.format 生成包的格式，有如下格式：

1. amd -- 异步模块定义，用于像 `RequestJS` 这样的模块加载器。
2. cjs -- `CommonJS`, 适用于 `Node` 或 `Browserify/webpack`
3. es -- 将软件包保存为 ES 模块文件。
4. iife -- 一个自动执行的功能，适合作为 `<script>`标签使用。
5. umd -- 通用模块定义，以 `amd, cjs` 和 `iife` 为一体。

```js
{
  input: 'src/main.js',
  external: ['ms'],
  output: [
	{ file: pkg.main, format: 'cjs' },
	{ file: pkg.module, format: 'es' },
	{ file: pkg.module, format: 'umd' }
  ]
}
```

### 发布到 npm

如下方式配置 npm 账号，然后发布

```bash
#注册
npm adduser
#登陆
npm login
 #发布
npm publish
```

name 是包的名字，可以直接写包名，比如 loadash，或者添加域，类似于@koa/router 这种，@后面是你 npm 注册的用户名。key 为包的关键字。