# quick-lib

**Repository Path**: qve/quick-lib

## Basic Information

- **Project Name**: quick-lib
- **Description**: 开源的 js 常用快速开发库，支持uni,h5,vue, 微信小程序。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://qve.gitee.io/docs/lib/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-10-03
- **Last Updated**: 2021-04-30

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

# 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)

#### 安装

- dev

```bash
yarn install
yarn dev
```

- build

```bash
yarn build
```

#### 打包输出

导出成 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

- 项目打包

```bash
# 网页端测试
npm run web

# 组件打包
npm run build

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

# 单独打包为浏览器通用模块
npm run 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 为包的关键字。