JSPM – ziya-admin@1.0.16

Package Exports

ziya-admin
ziya-admin/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ziya-admin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

创建文件夹

  mkdir ziya-admin
  cd ziya-admin

npm init

  npm init -y

安装依赖

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

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

规范代码

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

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 全局，但当前文件是模块。请考虑改为添加导入。 的解决方案，参考

 // tsconfig.json
 {
  ...,
  "compilerOptions": {
    "jsx": "react-jsx",
  }
 }

如何在子组件中获取 ant design 的 ConfigProvider 下的配置？

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