1.1.1 • Published 2 years ago

tarojs-plugin-react-generator v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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
    }]
  ]
  ...
}

插件配置

参数项类型说明默认值
cssstring指定 css 预处理器,可选 none, sass, less, stylussass
cssModulesboolean是否开启 cssModules,可选 true, falsetrue
typescriptboolean是否使用 typescript,可选 true, falsefalse
hooksboolean是否使用 hooks,可选 true, falsefalse
createConfigFileboolean是否单独创建页面配置文件,可选 true, falsetrue
updateRouterobject创建页面后更新路由配置
pageTplstring自定义页面模板的路径,如'src/tpl/page.ejs',注入变量有 name, upperFirst, lowerFirst默认为'',不使用自定义模板
componentTplstring自定义组件模板的路径,注入变量有 name, upperFirst, lowerFirst默认为'',不使用自定义模板
configTplstring自定义配置模板的路径,注入变量有 name, upperFirst, lowerFirst默认为'',不使用自定义模板
styleTplstring自定义样式模板的路径,注入变量有 name, isPage, upperFirst, lowerFirst默认为'',不使用自定义模板

updateRouter 参数

参数项类型说明默认值
enableboolean是否开启,可选 true, falsetrue
spacenumber插入位置缩进空格数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 {

}
<% } %>

命令行参数

参数项类型说明
--comstring创建一个公共组件/页面组件
--pagestring创建一个页面

示例

创建公共组件
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
1.1.1

2 years ago

1.1.0

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago