@retailwe/cli NPM

RetailWe CLI

介绍

retailwe-cli 提供了以下功能：

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

安装

$ npm i -g @retailwe/cli

`new page`

$ retailwe new page <name|path>

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

xxx/index.ts
xxx/index.json
xxx/index.less
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>

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

xxx/index.ts
xxx/index.json
xxx/index.less
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

支持自定义模块的命令：

new page
new component

通过修改 .retailwerc:

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

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

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

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

模板参数

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

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