1.0.16 • Published 2 years ago
ziya-admin v1.0.16
从 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
prettierrcpublish- lint
- babel
框架 TODO
框架的开发调试
同工程下方案
- 开启监视
yarn watch
- 指定位置引入组件使用即可
import { Button } from "../../dist";
不同工程方案
- 框架A根目录执行
npm link
- 目标工程B根目录执行
yarn link A
- 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 方案
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)