ziya-admin v1.0.16

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

1. 创建文件夹

  mkdir ziya-admin
  cd ziya-admin

2. npm init

  npm init -y

3. 安装依赖

  yarn add @types/react @types/react-dom react react-dom rimraf typescript fs-jetpack tslib -D

4. 修改 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",
  }

5. 规范代码

• 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

  2. 指定位置引入组件使用即可

  import { Button } from "../../dist";

• 不同工程方案

  1. 框架A根目录执行

    npm link

  2. 目标工程B根目录执行

    yarn link A 

  3. 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

• Css in Js 方案

  @emotion/react

  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 design 的 ConfigProvider 下的配置？

  import { ConfigProvider } from "antd";
  import { useContext } from "react";
  const { theme } = useContext(ConfigProvider.ConfigContext)