@activity-maker/hi-components v1.0.0
@activity-maker/hi-components
React
组件库,非 UI 框架/库,囊括的组件通常包含 UI、交互等复杂逻辑。
部分组件不兼容服务端渲染场景,因此,
@activity-maker/hi-components
不可以在通用营销平台组件开发中使用。
Documentation
http://cft.pages.xmly.work/sunshine/#/components/
Installation
yarn add @activity-maker/hi-components
# OR
npm i @activity-maker/hi-components
使用时需要有以下环境依赖,如果缺少请安装(install
阶段也会有 warning 提示)
"peerDependencies": {
"antd": "^4.16.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"styled-components": "^5.2.1"
}
- 需要有
react
、react-dom
- 部分组件需要
antd
,参照下方 AntDesign 依赖 - 部分组件需要
styled-components
,styled-components
要求全局单例,因此不会自动安装它。
Usage
// 导入组件,示例
import { LayoutPercent } from '@activity-maker/hi-components';
// 导入样式(所有 components 的样式)
// 配置按需加载以后,组件的样式会自动按需导入,不必添加此行
import '@activity-maker/hi-components/lib/index.css';
按需加载
@activity-maker/hi-components
的 JS 代码默认支持基于 ES modules 的 tree shaking。
借助 babel-plugin-import 插件,即可进一步实现 js 代码 和 css 样式代码全都能按需加载,使用方法如下:
安装
yarn add babel-plugin-import -D
在 babel 配置的 plugins 中添加配置(建议复制过去使用,手敲容易错漏)
plugins: [ [ 'babel-plugin-import', { libraryName: '@activity-maker/hi-components', libraryDirectory: 'es', camel2DashComponentName: false, style: true, }, '@activity-maker/hi-components' ], ]
配置注意:
camel2DashComponentName
参数必须为 false。style
参数必须为 true,不能设置为 css 或其它,这里设置为 true 即导入对应组件的 css 样式文件,
@activity-maker/hi-components
的组件不支持 less 文件或其它样式文件按需导入。不要漏掉尾部的
'@activity-maker/hi-components'
,它是 plugin name,用来确保项目中配置的多个babel-plugin-import
同时生效(如果有的话)。
AntDesign 依赖
@activity-maker/hi-components
部分组件(如:ImageUpload
、ProBraftEditor
)依赖了 antd
的若干组件(Upload
、message
、Modal
等)。
如果使用到了相关组件(未使用到则无需关心),需要确保安装 antd
并引入 antd
样式,推荐:
安装依赖
# install antd yarn add antd # install babel-plugin-import yarn add babel-plugin-import -D
添加 babel 配置
使用 babel-plugin-impoprt 自动按需加载
antd
样式。babel plugin 配置中添加如下代码:
plugins: [ [ "babel-plugin-import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }, "antd" ] ]
完成以上两步,无需额外操作,即可正常使用 ImageUpload
、ProBraftEditor
等组件,会自动按需引入需要的 antd
组件和样式。
Q&A
为什么
@activity-maker/hi-components
依赖的 styled-components 不会被自动安装?组件库中部分组件的样式使用
styled-components
编写,因此,如果你的项目中未使用过 styled-components,请执行yarn add styled-components
安装(仅安装,无需做其它配置)。如果项目中已使用 styled-components,无需关心此项。
为什么组件库不自动安装 styled-components ?因为,styled-components 只能是单实例。请阅读下方相关官方文档,了解更多。
12 months ago