pro-components 踩坑

_Sonder
4,322 阅读3分钟

pro-components 介绍

ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著的提升制作 CRUD 页面的效率，更加专注于页面。

  • ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能
  • ProTable 表格模板组件，抽象网络请求和表格格式化
  • ProForm 表单模板组件，预设常见布局和行为
  • ProCard 提供卡片切分以及栅格布局能力
  • ProDescriptions 定义列表模板组件，ProTable 的配套组件
  • ProSkeleton 页面级别的骨架屏

ProTable 自定义列原理

查看源码得通过三个字段{"show":true,"fixed":"left","order":0}控制自定义列，即show控制显示与否，fixed控制左右固定，order控制字段显示顺序，核心代码位置如下

踩坑

  1. less import no support webpack alias '~' ，具体如下

    报错原因：由于procomponents基于umi开发，而umi内置的构建工具为webpack，暂时未完全兼容vite等ESM构建工具，因此无法识别
    解决方法：修改config文件,移除*.less中的@import ~ 前置符号
    参考链接：github.com/ant-design/…
export default defineConfig({
  // ...
  resolve: {
    alias: [
      { find: /^~/, replacement: '' }
    ],
  }
});
  1. ProTable 使用columnsState之后，只要persistenceType给了值，页面就无限渲染了,具体如下

    persistenceType API介绍

    报错原因：大概率为procomponents和vite版本问题
    解决方法：一种取巧的解决方式如下，不使用persistenceType，通过onChange控制缓存，因为persistenceType API 内部源码也为同样操作，后续也可通过onChange更好的控制其他需求，如重置、排序等
columnsState={{
//列设置-操作
value: columnsStateMap, //列状态的值，支持受控模式
onChange: handleOnChangeColumn, //列状态的值发生改变之后触发
}}

const columnsStore =
JSON.parse(localStorage.getItem("columnsManagement")) || {};
const [columnsStateMap, setColumnsStateMap] = useState(columnsStore);
const handleOnChangeColumn = (val) => {
localStorage.setItem("columnsManagement", JSON.stringify(val));
setColumnsStateMap(val);
};

参考链接：github.com/ant-design/…

  1. 排序显示英文问题，具体如下

    报错原因：大概率为procomponents、vite版本或者moment配置的问题
    解决方法：直接配置中文显示，注意locale为普通antd组件具备的api，protable文档未标注，但是也能使用。 或者直接自定义protable的国际化相关配置
 locale={{
            cancelSort: "点击取消排序",
            triggerDesc: "点击降序",
            triggerAsc: "点击升序",
          }}
  options={{
            fullScreen: false,
            reload: false,
            setting: {
              checkedReset: false,
              extra: [
                // eslint-disable-next-line jsx-a11y/anchor-is-valid
                <a key="confirm" onClick={resetColumns}>
                  重置
                </a>,
              ],
              children: <Button>自定义列</Button>,
            },
            density: false,
          }}

注意事项：

由于ProComponents功能全面且强大，导致内部包高耦合，如ProTable就依赖了其他ProComponents，如下所示
这样造成了打包文件很大，虽然可以压缩文件，但是需要打包 压缩时间较长，如下所示

我们可以通过在config.ts中配置externals来解决，externals通过 排除某些 import 的包(package)打包到bundle中，而在运行时(runtime)再去从外部获取扩展依赖，可以大幅度提高打包效率，而外部依赖可以通过cdn引入提高加载速度,如下所示为umi配置：


webpack.config.js配置添加，注意大小写：
如何得知第三方包对应的key，value是啥，key是package.json中安装的包名，value时包真实注册或者说暴露的全局变量的值，比如@ant-design/pro-table的value是ProTable，打开ProTable的源码，格式化可以看到如下，注册的值是ProTable，且依赖了React、ReactDOM、antd、moment；其他包同样思路

  externals: {
      react: 'window.React',
      'react-dom': 'window.ReactDOM',
      antd: 'window.antd',
      '@ant-design/pro-table': 'window.ProTable',
    },

index.html 添加，注意库的版本：
unpkg 国内访问速度比cdn.jsdelivr快

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/antd@4.24.8/dist/antd.min.css"
/>
<script src="https://unpkg.com/antd@4.24.8/dist/antd.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@ant-design/pro-table@2.78.3/dist/table.min.css"
/>
<script src="https://unpkg.com/@ant-design/pro-table@2.78.3/dist/table.min.js"></script>

<script
      src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"
      integrity="sha256-Ipu/TQ50iCCVZBUsZyNJfxrDk0E2yhaEIz0vqI+kFG8="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"
      integrity="sha256-nbMykgB6tsOFJ7OdVmPpdqMFVk4ZsqWocT6issAPUF0="
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/antd@4.24.8/dist/antd.min.css"
      integrity="sha256-driOVzl4rOtE7ngEgzJC6QLX2A3AQ4kSF40Gaek+iWo="
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/antd@4.24.8/dist/antd.min.js"
      integrity="sha256-P0q+yT4XkoVRKbINPeb++LzYtZuNRjASPFTug+QnSs8="
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ant-design/pro-table@2.78.3/dist/table.min.css"
      integrity="sha256-xqFhCjASaUakXEsCs8VbsRe26MPvYGUAw19O9DlWljc="
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@ant-design/pro-table@2.78.3/dist/table.min.js"
      integrity="sha256-kkzD6iK42o/yrDiupbLzUChaygUMYyOwyVrhtrIsdNE="
      crossorigin="anonymous"
    ></script>

目前测试结果，webpack项目配置externals后打包的dist文件可以正常运行，但是vite项目仍然存在一定的问题。所以如果项目使用的是umi、webpack构建工具，可以尝试使用ProComponents，Vite项目如果不考虑打包时长 也可以谨慎使用，目前ProComponents对Vite的兼容性不太友好，感兴趣的可以关注github，期待后续版本更新。
参考链接如下：
webpack.docschina.org/configurati…
juejin.cn/post/700113…
github.com/ant-design/…

avatar
文章
阅读
粉丝