1.1.1 • Published 11 months ago
tarojs-plugin-react-generator v1.1.1
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格式化输出。
安装
npm install tarojs-plugin-react-generator --save-dev使用
修改项目 config/index.js 中的 plugins 配置
const config = {
...
plugins: [
...
['tarojs-plugin-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