feat: close #68, add custom template (#70)

* refactor(service, cli): tua-mp.config.js -> tua.config.js * feat(cli): add eject command * feat(cli): support templateDir options
tuax · Mar 18, 2019 · 1a28dae · 1a28dae
1 parent f6a7437
commit 1a28dae
Show file tree

Hide file tree

Showing 39 changed files with 622 additions and 225 deletions.
diff --git a/docs/.vuepress/public/cli/add-api.gif b/docs/.vuepress/public/cli/add-api.gif
diff --git a/docs/.vuepress/public/cli/add-comp-global.gif b/docs/.vuepress/public/cli/add-comp-global.gif
diff --git a/docs/.vuepress/public/cli/add-comp-local.gif b/docs/.vuepress/public/cli/add-comp-local.gif
diff --git a/docs/.vuepress/public/cli/add-page.gif b/docs/.vuepress/public/cli/add-page.gif
diff --git a/docs/.vuepress/public/cli/custom-template.gif b/docs/.vuepress/public/cli/custom-template.gif
diff --git a/docs/.vuepress/public/cli/eject.gif b/docs/.vuepress/public/cli/eject.gif
diff --git a/docs/guide/simple-app.md b/docs/guide/simple-app.md
@@ -27,14 +27,14 @@ $ tuamp init tua-mp-templates/simple my-project
 ├── README.md
 ├── dist/
 ├── package.json
-├── tua-mp.config.js
+├── tua.config.js
 ├── project.config.json
 └── src/
 ```
 
 * src/: 源码
 * dist/: 打包后代码
-* tua-mp.config.js: `@tua-mp/service` 的配置文件
+* tua.config.js: `@tua-mp/service` 的配置文件
 * project.config.json: 小程序开发工具配置文件
 
 ::: tip
@@ -90,13 +90,13 @@ $ tuamp init tua-mp-templates/simple my-project
 * `styles/`: 公用样式
 * `templates/`: 模板
 
-## tua-mp.config.js
+## tua.config.js
 以上那些特性的支持是因为底层调用了 webpack 将源代码转换成小程序的代码。由于 webpack 配置太繁琐了，因此受到 [@vue/cli-service](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service) 的启发，这部分配置也用 [@tua-mp/service](../tua-mp-service/) 进行了封装。
 
 这个配置文件提供了一个入口让开发者可以对于 webpack 进行二次配置。
 
 ```js
-// tua-mp.config.js
+// tua.config.js
 module.exports = {
     // 简单配置
     // 这部分的配置最终会通过 webpack-merge 和已有的 webpack 配置合并。

diff --git a/docs/tua-mp-cli/README.md b/docs/tua-mp-cli/README.md
@@ -7,16 +7,37 @@ sidebar: auto
 ## gif 示例
 ### `tuamp add api`
 
+添加 api
+
 <p><img :src="$withBase('/cli/add-api.gif')" alt="add api"></p>
 
 ### `tuamp add page`
 
+添加页面
+
 <p><img :src="$withBase('/cli/add-page.gif')" alt="add page"></p>
 
 ### `tuamp add comp -g`
 
+添加全局组件
+
 <p><img :src="$withBase('/cli/add-comp-global.gif')" alt="add comp -g"></p>
 
 ### `tuamp add comp`
 
+注意这里用的是本地模板 `.templates/comp`
+
 <p><img :src="$withBase('/cli/add-comp-local.gif')" alt="add comp"></p>
+
+### `tuamp eject` <Badge text="0.3.0+"/>
+
+导出默认模板
+
+<p><img :src="$withBase('/cli/eject.gif')" alt="eject"></p>
+
+### `tuamp add api`
+
+* 使用自定义模板 <Badge text="0.3.0+"/>
+* 覆盖已有 api
+
+<p><img :src="$withBase('/cli/custom-template.gif')" alt="custom template"></p>
diff --git a/packages/tua-mp-cli/.gitignore b/packages/tua-mp-cli/.gitignore
@@ -3,4 +3,8 @@ node_modules/
 coverage/
 yarn.lock
 yarn-error.log
-src/
+package-lock.json
+
+.temp/
+.templates/
+tua.config.js
diff --git a/packages/tua-mp-cli/README.md b/packages/tua-mp-cli/README.md
@@ -1,8 +1,11 @@
 <h1 align="center">@tua-mp/cli</h1>
 
 <p align="center">
-    <a href="https://www.npmjs.com/package/@tua-mp/cli"><img src="https://img.shields.io/npm/v/@tua-mp/cli.svg" alt="Version"></a>
-    <a href="https://www.npmjs.com/package/@tua-mp/cli"><img src="https://img.shields.io/npm/l/@tua-mp/cli.svg" alt="License"></a>
+    <a href="https://www.npmjs.com/package/@tua-mp/cli">
+        <img src="https://img.shields.io/npm/v/@tua-mp/cli.svg" alt="Version">
+        <img src="https://img.shields.io/npm/v/@tua-mp/cli/next.svg" alt="Next Version">
+        <img src="https://img.shields.io/npm/l/@tua-mp/cli.svg" alt="License">
+    </a>
 </p>
 
 ## 介绍
@@ -30,6 +33,8 @@ $ tuamp init <template-name> <project-name>
 ```bash
 # 添加小程序端 api
 $ tuamp add api <name>
+# OR
+$ tuamp a api <name>
 ```
 
 该命令会自动在 `src/apis/index.js` 中导出该 `api`，例如 `<name>` 为 `foo-bar`，那么导出的接口名称为 `fooBarApi`（已转成小驼峰，并在结尾加上 `Api`）。
@@ -50,6 +55,8 @@ $ tuamp add api <name>
 ```bash
 # 添加小程序端 page
 $ tuamp add page <name>
+# OR
+$ tuamp a page <name>
 ```
 
 该命令会自动读取 `src/app/app.json` 中的 `pages` 字段，并将新页面加入。
@@ -75,15 +82,43 @@ $ tuamp add page <name>
 * 全局添加小程序端 comp(-g, --global)
 
 ```bash
-$ tuamp add comp <name> -g
+$ tuamp add comp <name> --global
+# OR
+$ tuamp a comp <name> -g
 ```
 
 * 局部添加小程序端 comp
 
 ```bash
 $ tuamp add comp <name>
+# OR
+$ tuamp a comp <name>
 ```
 
-::: tip
-注意使用 `<Tab>` 键补全路径，输入不存在的文件夹时会自动创建。
-:::
+> 注意使用 `<Tab>` 键补全路径，输入不存在的文件夹时会自动创建。
+
+### 导出模板命令 `eject` <Badge text="0.3.0+"/>
+这个命令将包中的默认模板导出到 `.templates/` 中。
+
+这样通过修改`.templates/` 下的模板文件，即可实现自定义模板功能。
+
+```bash
+$ tuamp eject
+# OR
+$ tuamp e
+```
+
+## 配置
+配置文件和 `@tua-mp/service` 一样，都是使用 `tua.config.js`。
+
+### templateDir <Badge text="0.3.0+"/>
+* 类型：`String`
+* 默认值：`.templates`
+
+自定义模板的路径。
+
+**读取模板的优先级逻辑是：**
+
+1. 首先尝试使用 `tua.config.js` 中的 `templateDir` 字段
+2. 接着尝试读取 `.templates/`
+3. 最后读取默认模板
diff --git a/packages/tua-mp-cli/bin/commands/add.js b/packages/tua-mp-cli/bin/commands/add.js
@@ -0,0 +1,21 @@
+const { readConfigFile } = require('../../lib/utils/')
+
+exports.desc = 'add some template code to your project'
+exports.aliases = 'a'
+exports.command = 'add <command>'
+
+exports.builder = yargs => yargs.commandDir('./addCmds', {
+    visit: (cmd) => {
+        const handler = cmd.handler.bind(cmd)
+
+        cmd.handler = (argv) => {
+            argv.tuaConfig = readConfigFile()
+
+            return handler(argv)
+        }
+
+        return cmd
+    }
+})
+
+exports.handler = () => {}
diff --git a/packages/tua-mp-cli/commands/addCmds/api.js → ...es/tua-mp-cli/bin/commands/addCmds/api.js b/packages/tua-mp-cli/commands/addCmds/api.js → ...es/tua-mp-cli/bin/commands/addCmds/api.js
@@ -3,10 +3,7 @@
 exports.desc = 'add an api for your project'
 exports.aliases = 'a'
 exports.command = 'api <name>'
-exports.builder = {}
 
-exports.handler = (argv) => {
-    const name = argv.name
+exports.builder = {}
 
-    require('../../lib/addApi')(name)
-}
+exports.handler = require('../../../lib/addApi')
diff --git a/packages/tua-mp-cli/commands/addCmds/comp.js → ...s/tua-mp-cli/bin/commands/addCmds/comp.js b/packages/tua-mp-cli/commands/addCmds/comp.js → ...s/tua-mp-cli/bin/commands/addCmds/comp.js
@@ -6,14 +6,10 @@ exports.command = 'comp <name>'
 
 exports.builder = (yargs) => yargs
     .option('global', {
+        type: 'boolean',
         alias: 'g',
         default: false,
         describe: 'add a global component in src/comps/',
     })
 
-exports.handler = (argv) => {
-    const name = argv.name
-    const global = argv.global
-
-    require('../../lib/addComp')(name, { global })
-}
+exports.handler = require('../../../lib/addComp')
diff --git a/packages/tua-mp-cli/commands/addCmds/page.js → ...s/tua-mp-cli/bin/commands/addCmds/page.js b/packages/tua-mp-cli/commands/addCmds/page.js → ...s/tua-mp-cli/bin/commands/addCmds/page.js
@@ -6,8 +6,4 @@ exports.command = 'page <name>'
 
 exports.builder = {}
 
-exports.handler = (argv) => {
-    const name = argv.name
-
-    require('../../lib/addPage')(name)
-}
+exports.handler = require('../../../lib/addPage')
diff --git a/packages/tua-mp-cli/bin/commands/eject.js b/packages/tua-mp-cli/bin/commands/eject.js
@@ -0,0 +1,7 @@
+exports.desc = 'eject default templates into your project'
+exports.aliases = 'e'
+exports.command = 'eject'
+
+exports.builder = {}
+
+exports.handler = require('../../lib/eject')
diff --git a/packages/tua-mp-cli/commands/init.js → packages/tua-mp-cli/bin/commands/init.js b/packages/tua-mp-cli/commands/init.js → packages/tua-mp-cli/bin/commands/init.js
@@ -5,4 +5,5 @@ exports.aliases = 'i'
 exports.command = 'init <template> <name>'
 
 exports.builder = {}
+
 exports.handler = () => { require('@vue/cli-init') }
diff --git a/packages/tua-mp-cli/bin/tuamp → packages/tua-mp-cli/bin/tuamp.js b/packages/tua-mp-cli/bin/tuamp → packages/tua-mp-cli/bin/tuamp.js
@@ -23,6 +23,6 @@ require('yargs')
     .alias('v', 'version')
     .alias('h', 'help')
     // 命令目录
-    .commandDir('../commands/')
+    .commandDir('./commands/')
     .demandCommand(1)
     .parse()
diff --git a/packages/tua-mp-cli/commands/add.js b/packages/tua-mp-cli/commands/add.js
diff --git a/packages/tua-mp-cli/lib/addApi.js b/packages/tua-mp-cli/lib/addApi.js
@@ -8,50 +8,59 @@ const {
     copyFile,
     appendFile,
     catchAndThrow,
+    getTemplateDir,
     compileTmplToTarget,
     hyphenCaseToCamelCase,
 } = require('./utils')
+const { defaultTuaConfig } = require('./constants')
 
-// TODO: 读取 .tuarc 和 tua-mp.config.js 中的配置
+const cwd = process.cwd()
 
 /**
  * 添加 api 功能
  * 如果是连字符形式的中间接口路径需要将文件名转成小驼峰
- * 但 config 中的 prefix 依然保持原样
- * @param {String} name 接口名称
+ * 但 api 配置中的 prefix 依然保持原样
+ * @param {Object} options
+ * @param {String} options.name 接口名称
+ * @param {Object} options.tuaConfig 项目自定义配置
  */
-const addApi = (name) => {
-    if (!name) {
-        return catchAndThrow(`api 名称不能为空\n`)
-    }
+module.exports = (options = {}) => {
+    const {
+        name,
+        tuaConfig = defaultTuaConfig,
+    } = options
+
+    if (!name) return catchAndThrow(`api 名称不能为空\n`)
 
     // 小驼峰的名称
     const ccName = hyphenCaseToCamelCase(name)
-    const outputStr = `小程序 api -> ${name}.js`
+    const outputStr = `小程序 api -> ${name}`
+    const relativePath = 'src/apis'
     const treeLog = treeify.asTree({
-        'src/apis': {
-            '...': null,
-            [`${name}.js`]: null,
-            'index.js': null,
+        [relativePath]: {
+            [`${relativePath}/index.js`]: null,
+            [`${relativePath}/${name}.js`]: null,
         },
     })
 
-    // 默认放在 src/apis/ 下
+    // 默认放在 relativePath 下
     const targetDir = process.env.TUA_CLI_TEST_DIR ||
         /* istanbul ignore next */
-        path.resolve(process.cwd(), './src/apis/')
+        path.resolve(cwd, relativePath)
 
     // 检查父文件夹是否存在
     if (!exists(targetDir)) {
         return catchAndThrow(
-            `请检查以下文件夹是否存在!\n\t- src/apis/\n`
+            `请检查以下文件夹是否存在!\n` +
+            `\t- ${relativePath}/\n`
         )
     }
 
     // src
+    const prefix = 'api'
     const templateDir = process.env.TUA_CLI_TEST_SRC ||
         /* istanbul ignore next */
-        path.resolve(__dirname, '../templates/api/')
+        getTemplateDir(tuaConfig.templateDir, prefix)
     const srcIdx = path.join(templateDir, 'index.js')
     const srcApi = path.join(templateDir, 'api.js')
 
@@ -90,5 +99,3 @@ const addApi = (name) => {
         )
         .catch(catchAndThrow)
 }
-
-module.exports = addApi