tarojs-react-generator

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

安装

npm install tarojs-react-generator --save-dev

使用

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

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

插件配置

| 参数项 | 类型 | 说明 | 默认值 | | :-----| :---- | :---- | :---- | | 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 | 默认为''，不使用自定义模板 |

updateRouter 参数

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

模板示例

src/tpl/page.ejs

/**
 * 模板注入变量
 * @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 (
    <View className={styles.<%= name %>Page}>
      hello
    </View>
  )
}

export default <%= upperFirst(name) %>

src/tpl/style.ejs

<% if (isPage) { %>.<%= name %>Page {

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

}
<% } %>

命令行参数

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

示例

创建公共组件

taro g --com Button

创建页面组件（index为页面文件夹名称）

taro g --com index/Button  

创建页面

taro g --page mine

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

创建页面（指定路径）

taro g --page index/bannerDetail

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