npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-code

v0.2.6

Published

The command tool based on umi antd to create code blocks

Downloads

23

Readme

create-code

基于umi、antd自动生成CRUD代码的工具.

基本介绍及实现思路见Babel 在提升前端效率的实践

特性

react-antd-table

  • 通过json文件配置在本地项目生成基础增删改查代码.
  • 已应用于生产线,通用的增删改查功能相比普通开发至少提效8倍以上.
  • 数据新增、编辑支持模态框及新页面(包含分组)两种展现,更多配置参考基础配置api.
  • 表单基础支持业务场景常用的15种控件,详细查看dataSchema配置api.
  • 仅包含初始化代码生成,所以更便于根据自己的业务场景扩展维护.
  • 组件编写使用React Hooks语法.

ice-react-materials

  • 支持阿里飞冰react物料源当前487个区块的快捷添加.

安装

$ npm install create-code -g

在项目中使用

# 在项目根目录下创建schema文件夹,创建测试`normalList`文件夹。在文件夹下添加配置文件`config.js`、`dataScheme.js`、`querySchema.js`。也可以从本项目`demo-schema`中拷贝测试数据。
$ create-code add
# 选择 `react-antd-table` 类型
# 输入要生成的代码的配置文件路径,例如: `normalList`、 `../bus`
# 配置generatePath路径,默认/**/src/pages,可自定义路径,值为绝对路径
# 开始生成代码

演示

配置API

项目依赖

因本工具会在当前项目中生成代码,需要项目提供基础依赖。

  • react
  • antd
  • classnames
  • querystring
  • lodash
  • dva
  • umi

lodash、classnames可视本地项目需要添加

其它依赖会根据配置项需要添加。

  • braft-editor] 富文本内置了 预览、图片上传、颜色选择插件,详细参考https://braft.margox.cn/demos/antd-form
  • braft-extensions 富文本颜色选择使用sketch-color
  • antd-img-crop 图片裁剪
  • moment 日期格式化转化

常见问题:

  1. 格式化代码未完全修复,需要手动修复! eslint格式化失败,一般是因为所需依赖未找到。
  2. 文件目录: (**/src)不存在,请确认文件路径是否正确. 请确认配置文件是否在根目录下的文件夹下。如:schema/test

CHANGELOG