Polaris-components NPM

polard

Getting Started

Install dependencies,

$ npm i

Start the dev server,

$ npm start

Build documentation,

$ npm run docs:build

Build polard via father-build,

$ npm run build

本地开发注意事项

本地 node 版本建议使用 v12.0.0 （个人使用的是 v14.16.0）以上，否则安装依赖时，dumi 内部无法兼容，导致项目启动报错
组件内部如果需要使用 redux，建议使用 window?.g_app?._store
- 由于组件库的建立后行于项目，组件库内部用到的 dispatch 的相关 models 文件夹暂时只能使用项目中，如果组件库内部自行引入 react-redux 实现，恐项目用到了组件库的 models 文件，导致访问路径发生改变；反之则与项目耦合度过高
- 目前只有 lov 组件，search-area，custom-table（后二者共用一个）会用到
- dispatch 在这三个组件内的作用，仅实现数据的缓存，用于优化，不影响主体功能的使用

// 全局入口
import { getDvaApp } from 'umi';
window.g_app = getDvaApp();

// 某js文件
const { dispatch, getState } = window?.g_app?._store;

或者

// 某js文件
import { getDvaApp } from 'umi';
const { dispatch, getState } = getDvaApp()._store;

涉及到 form 组件，一律改用 antd 4.x 中的 form，Form.create()(component)改为WrappedForm(component)path: "components/wrapped-form"

export default WrappedForm(WrappedSearchArea);

涉及到 connect 组件的使用，改用WrapperConnectpath: "components/custom-connect"

export default WrapperConnect(mapStateToProps)(CompatibleLov);

打包，发布

修改.fatherrc.ts文件中的cjs,esm
默认rollup打包模式，生成dist文件夹，该模式下体积小，但是 es6 语法
修改为babel模式时，会生成lib,es文件夹，该模式下体积大，同时需要修改package.json文件修改如下：

"main": "lib/index.js",
"module": "lib/index.js",
"typings": "lib/index.d.ts",

且该模式下后续需要考虑做按需加载

发布命令

$ npm run release

后续计划

支持多语言 (目前进度 50%)
组件改为 tsx 语法
部分组件重构，减少代码量

多语言

提供 LocaleProvider 组件，于项目入口出，调用该组件包裹子组件，并传入 locale 参数如下是 antd 多语言与 polard 多语言共有场景：

// locale: {
//   locale: "zh_cn",
//   localeMap: {
//     zh_cn: {"common.key": "键",...},
//     en_us: {},
//   },
// }
//  组件库内部暂时仅支持zh_cn,en_us, 如项目有需求增加其他语言，可自行配置，并传入即可，localeMap同名配置以外界传入为主
<ConfigProvider locale={localeInfo[locale] || zhCN}>
  <IntlProvider onError={() => { }} locale={langTypes[locale]} messages={messages}>
    <InjectedWrapper>
      <LocaleProvider locale={{locale,localeMap}}>
        {basicLayout}
      </InjectedWrapper>
  </IntlProvider>
</ConfigProvider>