RetailWe CLI

介绍

retailwe-cli 提供了以下功能：

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

安装

$ 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 文件，直到系统的根目录为止。

{
  // 给 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:

"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

模板参数

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

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.

Copyright (c) JerryC Huang ([email protected])