open-index/open-npm huggingface dataset:
npm package: @pkb/cli
Description: 全局脚手架，用于全局操作项目，项目配置检查、生成项目、添加插件等等
Author: luoxue
Latest version: 1.5.4

# @pkb/cli

`@pkb/cli` 可用来生成项目、添加插件、检查项目配置、升级更新等等，主要的功能就是对整体项目的管理。

```bash
# 全局安装
npm i -g @pkb/cli # 全局安装使用

pk create <project-name> # 创建项目 webpack|rollup|vite|lerna|node
pk add <plugin> # 安装插件
pk info # 查看项目及系统配置
pk upgrade [filter] # 检查升级 npm 版本 并安装
pk cm # commit 提交
pk eslint # eslint 检查，需要安装 @pkb/plugin-eslint
pk stylelint # stylelint 检查，需要安装 @pkb/plugin-stylelint
pk gotty # 在 web 中使用终端
pk jsdoc2md # 把 js 注释生成 md
pk lerna # 多包管理 发布
pk changelog # 生成 changelog
pk mock # 开启 mock，支持 mockjs
```
### mock

模拟接口，支持 mockjs

```js
module.exports = {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },
  // GET 可省略
  '/api/users/1': { id: 2 },
  '/api/users/2': (req, res) => {
    res.json({
      success: true
    })
  },
  '/api/users/3' (req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
  },
  '/api/users/4': {
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-30': [{
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1
    }]
  }
}

// GET http://localhost:3000/api/users
// GET http://localhost:3000/api/users/1
// GET http://localhost:3000/api/users/2
// GET http://localhost:3000/api/users/3
// GET http://localhost:3000/api/users/4
```
npm package: @pkb/cli-box
Description: 构建脚手架
Author: luoxue
Latest version: 1.4.53

# cli-box

提供一套脚手架方案

### 安装

```bash
npm i @pkb/cli-box
```

### 使用

在 bin/index.js
```js
#!/usr/bin/env node

const bin = require('@pkb/cli-box')

cli({
  root: path.join(__dirname, '..')
})
```

### 目录结构

```bash
cli
  -- commands # 所有命令行文件夹
```
npm package: @pkb/node-box
Description: node-box
Author: luoxue
Latest version: 1.5.4

## node-box

基于 koa 封装轻量级的 node 应用，开箱即用

### 安装

```sh
npm i @pkb/node-box -g # 全局安装/本地安装

node-box build # 构建项目
node-box watch # 开发模式
```

### 目录

```bash
-- app 
  -- controller
  -- router
-- public # 静态资源
```

#### controller 示例

controller/home.js

```js
'use strict';

class HomeController {
  async one({ ctx, next }) {

    ctx.body = {
      content: 'one',
    };
  }

  async two({ ctx, next }) {

    ctx.body = {
      content: 'two',
    };
  }
}

module.exports = HomeController;
```

#### router 示例

router/home.js

```js
'use strict';

module.exports = app => {
  const { router, controller } = app;

  router.get('/one', controller.home.one);
  router.get('/two', controller.home.two);
  router.get('/');
};
```
npm package: @pkb/plugin-eslint
Description: webpack-box 插件，配置 eslint 及修复
Author: luoxue
Latest version: 1.4.50

## @pkb/plugin-eslint 插件

配合 webpack-box 使用，用来检查并修复 eslint

### 安装

```bash
npm i -D @pkb/plugin-eslint
```

### 配置

在根目录下 `webpack-box.config.js` 开启 eslint

```js
module.exports = function(config) {
  return {
    eslint: {
      lintOnSave: true, // 开启运行时检测
      extensions: ["js", "jsx", "vue"] // 默认 ['js', 'jsx']
    }
  };
};
```

### 使用

在 package.json 中配置 lint 脚本，执行 `npm run lint`

`package.json`

```json
{
  "scripts": {
    "lint": "webpack-box eslint"
  }
}
```
npm package: @pkb/plugin-react
Description: pk 插件，配置react
Author: luoxue
Latest version: 1.4.50

## @pkb/plugin-react 插件

配合 webpack-box 使用，用来配置 react

### 安装

```bash
npm i -D @pkb/plugin-react
```

### 配置

在根目录下 `webpack-box.config.js` 开启 react

```js
module.exports = function(config) {
  return {
    env: {
      REACT: "react" // 配置 react
    }
  };
};
```
npm package: @pkb/plugin-stylelint
Description: webpack-box 插件，配置 stylelint 及修复
Author: luoxue
Latest version: 1.4.50

## @pkb/plugin-stylelint 插件

配合 webpack-box 使用，用来检查并修复 stylelint

### 安装

```bash
npm i -D @pkb/plugin-stylelint
```

### 配置

在根目录下 `webpack-box.config.js` 开启 stylelint

```js
module.exports = function(config) {
  return {
    stylelint: {
      lintOnSave: true // 开启运行时检测
      extensions: ['vue', 'htm', 'html', 'css', 'sss', 'less', 'scss']
    }
  };
};
```

### 使用

在 package.json 中配置 lint 脚本，执行 `npm run lint`

`package.json`

```json
{
  "scripts": {
    "lint": "webpack-box stylelint"
  }
}
```
npm package: @pkb/plugin-tslint
Description: webpack-box 插件，配置 tslint 及修复
Author: luoxue
Latest version: 1.4.30

## @pkb/plugin-tslint 插件

配合 webpack-box 使用，用来检查并修复 tslint

### 安装

```bash
npm i -D @pkb/plugin-tslint
```

### 配置

在根目录下 `webpack-box.config.js` 开启 tslint

```js
module.exports = function(config) {
  return {
    tslint: {
      lintOnSave: true, // 开启运行时检测
      useThreads: true
    }
  };
};
```

### 使用

在 package.json 中配置 lint 脚本，执行 `npm run lint`

`package.json`

```json
{
  "scripts": {
    "lint": "webpack-box tslint"
  }
}
```
npm package: @pkb/rollup-box
Description: 使用 rollup 打包
Author: luoxue
Latest version: 1.4.54

# rollup-box

- rollup-box 集成大量的 rollup 插件，当你想要使用 rollup 打包时，你不需要考虑要使用哪些插件
- 可以使用 rollup 构建一个打包器可以快速构建一个或多个文件的打包。支持 js/ts/less/sass/jsx/tsx 等
- [rollup 学习](../../learn/rollup)
### 安装

```sh
npm i @pkb/rollup-box -g # 全局安装/本地安装

rollup-box build # 构建项目
rollup-box watch # 开发模式
```

JavaScript API

```js
const { builder, plugins, MODE } = require('@pkb/rollup-box')
const options = {
  input: {...}
  output: {...}
}
// 所有插件都在 plugins 中，可以自主选择使用哪些插件，或者添加一些插件
// MODE 提供两种模式 WATCH BUILD
// options 是 rollup 配置，可默认不填
builder(MODE.WATCH, plugins, options)
```

### 支持的插件

- [@rollup/plugin-alias](./config/alias.js) 定义别名
- [@rollup/plugin-auto-install](./config/auto-install.js) 自动安装依赖
- [rollup-plugin-dev](./config/dev.js) 开发模式
- [@rollup/plugin-graphql](./config/graphql.js) 可将.gql / .graphql文件转换为ES6模块
- [@rollup/plugin-html](./config/html.js) 会在输出目录输出一个html页面，方便测试
- [@rollup/plugin-image](./config/image.js) 将图片转成 base64 打包在js中
- [rollup-plugin-livereload](./config/livereload.js) 自动刷新页面
- [@rollup/plugin-replace](./config/replace.js) 代码压缩
- [@rollup/plugin-node-resolve](./config/resolve.js) null
- [rollup-plugin-terser](./config/terser.js) 代码压缩
- [@rollup/plugin-typescript](./config/typescript.js) 支持ts


### rollup-box 配置

```js
const path = require('path')

function resolve(dir) {
  return path.join(process.cwd(), dir)
}

module.exports = function (config) {
  return {
    input: {
      input: path.join(process.cwd(), 'src', 'index.ts'),
    },
    output: {
      dir: 'dist',
      format: 'es',
      sourcemap: true
    },
    dev: {
      port: 6002,
      host: '::', // ipv6
      dirs: ['dist'],
      basePath: '/',
      openPage: './index.html',
      contentBase: './dist',
    },
    alias: [
      { find: '@src', replacement: resolve('src') },
    ]
  }
}
```
npm package: @pkb/tools
Description: tools 是 node 的工具集
Author: luoxue
Latest version: 1.4.19

## node 工具

```sh
npm i -g @pkb/tools
```

### 提交 commit

命令行

```sh
tls cm
```

效果，通过上下方向键选择

```
[成功] 文件检查通过

? 请选择一种 type (Use arrow keys)
❯ 1. feat: 新增feature 
  2. fix: 修复bug，可以是QA发现的BUG，也可以是研发自己发现的BUG 
  3. docs: 仅仅修改了文档，比如README, CHANGELOG, CONTRIBUTE等等 
  4. style: 仅仅修改了空格、格式缩进、变量名等等，不改变代码逻辑 
  5. refactor: 代码重构，没有加新功能或者修复bug 
  6. perf: 优化相关，比如提升性能、体验 
  7. test: 测试用例，包括单元测试、集成测试等 
  8. chore: 改变构建流程、或者增加依赖库、工具等 
  9. revert: 回滚到上一个版本 
  10. merge: 代码合并 
  11. sync: 同步主线或分支的Bug 
```

### open app

命令行打开指定 app

比如打开 item2

```sh
tls open iTerm
```

如果不知道 app 名字，可以去 Applications 文件夹查找

### 工具方法

[工具方法](./util/utils.js)
npm package: @pkb/vite-box
Description: 使用 vite 打包
Author: luoxue
Latest version: 1.5.1

# vite-box

- vite-box 开箱即用的 vite 封装
- 包含多个插件，通过配置来构建项目
- [vite 学习](../../learn/vite)

### 安装

```sh
npm i @pkb/vite-box -g # 全局安装/本地安装

vite-box build  # 构建项目
vite-box server # 开发模式
```

JavaScript API

```js
const { createServer, build, getPlugins } = require('@pkb/vite-box')

createServer({ plugins: getPlugins() })
build(/* config */)
```

### 支持的插件



### vite-box 配置

与 vite 一致 https://cn.vitejs.dev/config/

vite-box.config.js

```js
// 默认配置
module.exports = function () {
  return {
    configFile: false,
    root: process.cwd(),
    clearScreen: true,
    base: './',
    root: './',
    server: {
      port: 7777
    },
    plugins: [],
    build: {
      target: 'es2015',
      minify: 'terser',
      manifest: false,
      sourcemap: false,
      outDir: 'dist',
      rollupOptions: {},
    }
  }
}
```