tarojs-plugin-react-generator

> Taro 页面/组件创建工具，支持 Taro 3 + React

本项目是基于该项目魔改的:https://github.com/dingff/tarojs-react-generator
解决了一些问题：
1. 生成页面后更新路由配置时查找路径app.config，根据typescript入参动态识别。
2. 通过@babel/generator生成代码代码文件时，读取使用者项目根目录prettier配置进行prettier.format格式化输出。

安装

``bash
npm install tarojs-plugin-react-generator --save-dev
`

使用


修改项目 config/index.js 中的 plugins 配置

`js
const config = {
...
plugins: [
...
['tarojs-plugin-react-generator', {
css: 'sass',
cssModules: true
}]
]
...
}
`

$3

| 参数项 | 类型 | 说明 | 默认值 |
| :-----| :---- | :---- | :---- |
| css | string | 指定 css 预处理器，可选 `none`, `sass`, `less`, `stylus` | `sass`|
| cssModules | boolean | 是否开启 cssModules，可选 `true`, `false` | `true` |
| typescript | boolean | 是否使用 typescript，可选 `true`, `false` | `false` |
| hooks | boolean | 是否使用 hooks，可选 `true`, `false` | `false` |
| createConfigFile | boolean | 是否单独创建页面配置文件，可选 `true`, `false` | `true` |
| updateRouter | object | 创建页面后更新路由配置 | |
| pageTpl | string | 自定义页面模板的路径，如'src/tpl/page.ejs'，注入变量有 `name`, `upperFirst`, `lowerFirst` | 默认为''，不使用自定义模板 |
| componentTpl | string | 自定义组件模板的路径，注入变量有 `name`, `upperFirst`, `lowerFirst` | 默认为''，不使用自定义模板 |
| configTpl | string | 自定义配置模板的路径，注入变量有 `name`, `upperFirst`, `lowerFirst` | 默认为''，不使用自定义模板 |
| styleTpl | string | 自定义样式模板的路径，注入变量有 `name`, `isPage`, `upperFirst`, `lowerFirst` | 默认为''，不使用自定义模板 |

$3

| 参数项 | 类型 | 说明 | 默认值 |
| :-----| :---- | :---- | :---- |
| enable | boolean | 是否开启，可选 `true`, `false` | `true` |
| space | number | 插入位置缩进空格数 | `4` |

##### 模板示例
src/tpl/page.ejs
`js
/**
* 模板注入变量
* @param name: string 文件名
* @param upperFirst: function 将首字母大写的函数
* @param lowerFirst: function 将首字母小写的函数
*/
import { useEffect } from 'react'
import { View } from '@tarojs/components'
import styles from './index.module.scss'

function <%= upperFirst(name) %>() {

return (
Page}>
hello

)
}

export default <%= upperFirst(name) %>
`
src/tpl/style.ejs
`js
<% if (isPage) { %>.<%= name %>Page {

}
<% } else { %>.<%= lowerFirst(name) %>Com {

}
<% } %>
`

$3

| 参数项 | 类型 | 说明 |
| :-----| :---- | :---- |
| --com | string | 创建一个公共组件/页面组件 |
| --page | string | 创建一个页面 |

$3

##### 创建公共组件
`bash
taro g --com Button
`


##### 创建页面组件（index为页面文件夹名称）
`bash
taro g --com index/Button
`


##### 创建页面
`bash
taro g --page mine
`

`
-- 页面：pages/mine/index.tsx
-- 配置：pages/mine/index.config.tsx
-- 样式：pages/mine/index.module.scss
`

##### 创建页面（指定路径）
`bash
taro g --page index/bannerDetail
`

`
-- 页面：pages/index/bannerDetail/index.tsx
-- 配置：pages/index/bannerDetail/index.config.tsx
-- 样式：pages/index/bannerDetail/index.module.scss
``