1.0.16 • Published 2 years ago

ziya-admin v1.0.16

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

从 0 搭建 TS + React 组件库环境

  1. 创建文件夹
  mkdir ziya-admin
  cd ziya-admin
  1. npm init
  npm init -y
  1. 安装依赖
  yarn add @types/react @types/react-dom react react-dom rimraf typescript fs-jetpack tslib -D
  1. 修改 package.json
  {
    "name": "ziya-admin",
    "version": "1.0.0",
    "description": "基于antd5的后台管理框架",
    "typings": "index.d.ts",
    "main": "index.js",
    "module": "index.js",
    "scripts": {
      "build:js": "rimraf dist && tsc",
      "build": "yarn build:js && node scripts/build.js",
      "watch": "tsc -w",
      "pub": "cd dist && npm publish",
      "lint": "eslint . --fix",
      "babel": "babel dist -d build"
    },
    "keywords": ["admin", "react-admin", "antd-admin"],
    "author": "glk",
    "license": "ISC",
  }
  1. 规范代码
  • prettier 参考

      yarn add prettier -D

    新建 .prettierrc.js 配置文件

      { 
        // 缩进空格数;默认为2
        "tabWidth": 2,
    
        // 条件允许时每行字符长度大于该值时进行换行(prettier不会强行换行:比如将一个引号包裹的字符串折行)。默认为80
        "printWidth": 180,
    
        // 语句末尾是否带分号
        "semi": true,
    
        // 是否将双引号转换为单引号。双引号里包含单引号时不会被格式化
        "singleQuote": true,
    
        // jsx文件里使用单引号
        "jsxSingleQuote": true,
    
        // 圆括号之间添加空格,如 { a: b }
        "bracketSpacing": true,
    
        // 箭头函数单个参数的情况是否省略括号,默认always是总是带括号
        "arrowParens": "always",
      }

    使用:右击菜单 -> 格式化文档

  • eslint

构建工具 TODO

  • prettierrc
  • publish
  • lint
  • babel

框架 TODO

框架的开发调试

  • 同工程下方案

    1. 开启监视
      yarn watch
    1. 指定位置引入组件使用即可
    import { Button } from "../../dist";
  • 不同工程方案

    1. 框架A根目录执行
      npm link
    1. 目标工程B根目录执行
      yarn link A 
    1. B工程下可直接导入A框架的组件,且状态热更
      import { Button } from "A/src";

开发记录

  • 使用 @chakra-ui

    可能会和其他UI库(如Ant Design)样式冲突,他的 <chakra.div></chakra.div> 的方式没有找到替代品~ 遇到问题之后再解决吧(^▽^)

  yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
  yarn add @emotion/react

css Prop 在 TS 中开启方式:

css Prop 可以在任何一个支持 className 的 Dom 元素或者组件上使用!!!

  tsconfig.json["compilerOptions"]["jsxImportSource"]: "@emotion/react"

其他开启方式 使用 <Global styles={css} /> 样式会全局生效,不建议写组件用。 css prop 目前最绝的使用方法:

  import { Tabs } from "antd";

const themeCss = .ant-tabs-nav { margin-bottom: 0; &::before { display: none; } }

<Tabs css={css${themeCss};} items={items}
/>

### FAQ
- `.tsx` 中出现 `“React”指 UMD 全局,但当前文件是模块。请考虑改为添加导入。` 的解决方案,[参考](http://www.stackoverflow.org.cn/questions/64656055)
```js
 // tsconfig.json
 {
  ...,
  "compilerOptions": {
    "jsx": "react-jsx",
  }
 }
  • 如何在子组件中获取 ant designConfigProvider 下的配置?
  import { ConfigProvider } from "antd";
  import { useContext } from "react";
  const { theme } = useContext(ConfigProvider.ConfigContext)
1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.11

2 years ago

1.0.12

2 years ago

1.0.9

2 years ago

1.0.6

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago