npm package: @retailwe/cli
Description: CLI for ReatailWe
Author: JerryC8080
Latest version: 0.1.1

# RetailWe CLI

## 介绍

retailwe-cli 提供了以下功能：

1. 快速创建页面
   1. 支持小程序分包
   2. 支持自动写入路由到 `app.json`
1. 快速创建组件
1. 自定义创建模板

## 安装

```
$ npm i -g @retailwe/cli
```

## `new page`

```
$ retailwe new page <name|path>
```

快速创建页面，创建的页面包含以下四个文件：

1. xxx/index.ts
2. xxx/index.json
3. xxx/index.less
4. xxx/index.wxml

### 创建普通页面

```
$ retailwe new page abc

[retailwe] › ▶  start     创建页面：supermarket/pages/abc/index
[retailwe] › ✔  success   生成文件：src/supermarket/pages/abc/index.json
[retailwe] › ✔  success   生成文件：src/supermarket/pages/abc/index.less
[retailwe] › ✔  success   生成文件：src/supermarket/pages/abc/index.ts
[retailwe] › ✔  success   生成文件：src/supermarket/pages/abc/index.wxml
[retailwe] › ✔  success   自动写入路由到：app.json
[retailwe] › ☒  complete  创建页面完成

$ retailwe new page groupA/abc

[retailwe] › ▶  start     创建页面：supermarket/pages/groupA/abc/index
[retailwe] › ✔  success   生成文件：src/supermarket/pages/groupA/abc/index.json
[retailwe] › ✔  success   生成文件：src/supermarket/pages/groupA/abc/index.less
[retailwe] › ✔  success   生成文件：src/supermarket/pages/groupA/abc/index.ts
[retailwe] › ✔  success   生成文件：src/supermarket/pages/groupA/abc/index.wxml
[retailwe] › ✔  success   自动写入路由到：app.json
[retailwe] › ☒  complete  创建页面完成
```

### 创建分包页面；`--sp | --subpkg`

```
$ retailwe new page abc --sp moduleA

[retailwe] › ▶  start     创建页面：supermarket/pages/moduleA/abc/index
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/abc/index.json
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/abc/index.less
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/abc/index.ts
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/abc/index.wxml
[retailwe] › ✔  success   自动写入路由到：app.json
[retailwe] › ☒  complete  创建页面完成

$ retailwe new page groupA/abc --sp moduleA

[retailwe] › ▶  start     创建页面：supermarket/pages/moduleA/groupA/abc/index
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/groupA/abc/index.json
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/groupA/abc/index.less
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/groupA/abc/index.ts
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/groupA/abc/index.wxml
[retailwe] › ✔  success   自动写入路由到：app.json
[retailwe] › ☒  complete  创建页面完成
```

### 自定义目录：`--dir`

定义页面的落地目录，最后输出目录 = `${appDir}/${dir}`;

其中 `appDir` 在 `.retailwerc` 定义。

```
$ retailwe new page abc --dir new-supermarket/pages

[retailwe] › ▶  start     创建页面：new-supermarket/pages/abc/index
[retailwe] › ✔  success   生成文件：src/new-supermarket/pages/abc/index.json
[retailwe] › ✔  success   生成文件：src/new-supermarket/pages/abc/index.less
[retailwe] › ✔  success   生成文件：src/new-supermarket/pages/abc/index.ts
[retailwe] › ✔  success   生成文件：src/new-supermarket/pages/abc/index.wxml
[retailwe] › ✔  success   自动写入路由到：app.json
[retailwe] › ☒  complete  创建页面完成
```

## `new component`

```
$ retailwe new component <name|path>
```

快速创建组件，创建的组件包含以下四个文件：

1. xxx/index.ts
2. xxx/index.json
3. xxx/index.less
4. xxx/index.wxml

### 快速创建组件

```
$ retailwe new component abc

[retailwe] › ▶  start     创建组件：abc
[retailwe] › ✔  success   生成文件：src/supermarket/components/abc/index.json
[retailwe] › ✔  success   生成文件：src/supermarket/components/abc/index.less
[retailwe] › ✔  success   生成文件：src/supermarket/components/abc/index.ts
[retailwe] › ✔  success   生成文件：src/supermarket/components/abc/index.wxml
[retailwe] › ☒  complete  创建组件完成

$ retailwe new component groupA/abc

[retailwe] › ▶  start     创建组件：abc
[retailwe] › ✔  success   生成文件：src/supermarket/components/groupA/abc/index.json
[retailwe] › ✔  success   生成文件：src/supermarket/components/groupA/abc/index.less
[retailwe] › ✔  success   生成文件：src/supermarket/components/groupA/abc/index.ts
[retailwe] › ✔  success   生成文件：src/supermarket/components/groupA/abc/index.wxml
[retailwe] › ☒  complete  创建组件完成
```

### 自定义目录： `--dir`

```
$ retailwe new component groupA/abc --dir supermarket/pages/moduleA/components

[retailwe] › ▶  start     创建组件：abc
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/components/groupA/abc/index.json
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/components/groupA/abc/index.less
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/components/groupA/abc/index.ts
[retailwe] › ✔  success   生成文件：src/supermarket/pages/moduleA/components/groupA/abc/index.wxml
[retailwe] › ☒  complete  创建组件完成
```

## .retailwerc

当运行 `$ retailwe` 的时候，会在命令运行的当前文件夹向上回溯寻找 rc 文件，直到系统的根目录为止。

```json
{
  // 给 retailwe new 命令，指定自定义模板
  "templates": {
    // new component
    "component": {
      // 模板文件所在的目录
      "source": ".templates/component",

      // 新文件输出的默认目录
      "defaultOutput": "src/components"
    },

    // new page
    "page": {
      // 模板文件虽在的目录
      "source": ".templates/page",

      // 新文件输出的默认目录
      "defaultOutput": "src/pages"
    }
  },

  // 项目构建输出的目标目录
  "distDir": "dist",

  // 项目源码目录
  "appDir": "src",

  // 在页面创建之后是否自动写入路由
  "writeRouteAfterCreated": true
}
```

## 自定义模板：templates

支持自定义模块的命令：

1. `new page`
2. `new component`

通过修改 `.retailwerc`:

```json
"templates": {
    // new component
    "component": {
      // 模板文件所在的目录
      "source": ".templates/component",

      // 新文件输出的默认目录
      "defaultOutput": "src/components"
    },

    // new page
    "page": {
      // 模板文件虽在的目录
      "source": ".templates/page",

      // 新文件输出的默认目录
      "defaultOutput": "src/pages"
    }
  },
```

支持后缀名的文件：`json|wxml|js|wxss|scss|less|md|ts`

## 模板参数

不同的模板，分别会注入不同的参数，方便满足特定需求，如以下模板：

```javascript
import MyPage from "<%= relativeToAppDir %>/libs/my-page";

MyPage({
  onLoad() {
    console.log("on page load");
  },
});
```

其中 `relativeToAppDir` 就是文件路径相对于应用目录的相对路径距离。

不同模板注入的参数有差异化，如下：

**page**

| 变量名           | 说明                                                           |
| ---------------- | -------------------------------------------------------------- |
| name             | 页面名称，如 `/pages/homepage/index.xxx` 的页面名为 `homepage` |
| route            | 相对于应用的路径，如：`/pages/homepage/index`                  |
| relativeToAppDir | 当前文件相对于应用目录的相对路径距离                           |

**component**

| 变量名           | 说明                                                          |
| ---------------- | ------------------------------------------------------------- |
| name             | 插件，如 `/components/dailog/index.xxx` 的  插件名为 `dailog` |
| relativeToAppDir | 当前文件相对于应用目录的相对路径距离                          |

# License

This project is licensed under the [MIT license](LICENSE).

Copyright (c) JerryC Huang (huangjerryc@gmail.com)