fix: replace lodash-es imports with lodash in CJS builds (#8754)

* chore: remove `@types/lodash-es` from peer dependencies

* chore: add `lodash` and `@types/lodash` dependencies

* chore: replace `lodash-es` imports with sub-path imports

* fix(lodash-in-cjs): replace lodash-es imports in cjs builds with lodash

.fatherrc.base.ts

@@ -11,7 +11,10 @@ export default defineConfig({
   },
   // 以下为 cjs 配置项启用时的默认值，有自定义需求时才需配置
   cjs: {
-    extraBabelPlugins: [[require.resolve('./scripts/replaceEs'), {}]],
+    extraBabelPlugins: [
+      [require.resolve('./scripts/replaceEs'), {}],
+      [require.resolve('./scripts/replaceLodash'), {}],
+    ],
     input: 'src', // 默认编译目录
     output: 'lib',
     platform: 'browser', // 默认构建为 Node.js 环境的产物

package.json

@@ -71,6 +71,7 @@
     "@types/chroma-js": "^2.4.4",
     "@types/glob": "^8.1.0",
     "@types/history": "^4.7.11",
+    "@types/lodash": "^4.17.10",
     "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^14.18.63",
@@ -119,6 +120,7 @@
     "jsdom": "^19.0.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.4",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mockdate": "^3.0.5",
     "mockjs": "^1.1.0",

packages/field/package.json

@@ -43,12 +43,14 @@
     "@chenshuai2144/sketch-color": "^1.0.8",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "omit.js": "^2.0.2",
     "rc-util": "^5.4.0",
     "swr": "^2.0.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.10",
     "@types/lodash-es": "^4.17.12",
     "@types/react-color": "^3.0.4",
     "rc-resize-observer": "^0.2.3",

packages/field/src/components/Percent/index.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from '@ant-design/pro-provider';
 import { InputNumber } from 'antd';
-import { toNumber } from 'lodash-es';
+import toNumber from 'lodash-es/toNumber';
 import type { ReactNode } from 'react';
 import React, { Fragment, useMemo } from 'react';
 import type { ProFieldFC } from '../../index';

packages/field/src/components/Progress/index.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from '@ant-design/pro-provider';
 import { InputNumber, Progress } from 'antd';
-import { toNumber } from 'lodash-es';
+import toNumber from 'lodash-es/toNumber';
 import React, { useMemo } from 'react';
 import type { ProFieldFC } from '../../index';
 

packages/field/src/components/TextArea/readonly.tsx

@@ -6,7 +6,7 @@ import type { ProFieldFC } from '../../index';
 
 // 兼容代码-----------
 import 'antd/lib/input/style';
-import { omit } from 'lodash-es';
+import omit from 'lodash-es/omit';
 //------------
 
 /**

packages/form/package.json

@@ -50,27 +50,23 @@
     "@umijs/use-params": "^1.0.9",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "omit.js": "^2.0.2",
     "rc-resize-observer": "^1.1.0",
     "rc-util": "^5.0.6"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.10",
     "@types/lodash-es": "^4.17.12",
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "@types/lodash-es": "^4.17.12",
     "antd": "^4.24.15 || ^5.11.2",
     "rc-field-form": ">=1.22.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
-  "peerDependenciesMeta": {
-    "@types/lodash-es": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
   },

packages/form/src/layouts/DrawerForm/index.tsx

@@ -7,7 +7,7 @@
 import type { DrawerProps, FormProps } from 'antd';
 import { ConfigProvider, Drawer } from 'antd';
 import classNames from 'classnames';
-import { merge } from 'lodash-es';
+import merge from 'lodash-es/merge';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { noteOnce } from 'rc-util/lib/warning';
 import React, {

packages/form/src/layouts/ModalForm/index.tsx

@@ -1,7 +1,7 @@
 import { openVisibleCompatible } from '@ant-design/pro-utils';
 import type { FormProps, ModalProps } from 'antd';
 import { ConfigProvider, Modal } from 'antd';
-import { merge } from 'lodash-es';
+import merge from 'lodash-es/merge';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { noteOnce } from 'rc-util/lib/warning';
 import React, {

packages/layout/package.json

@@ -49,6 +49,7 @@
     "@umijs/route-utils": "^4.0.0",
     "@umijs/use-params": "^1.0.9",
     "classnames": "^2.3.2",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "omit.js": "^2.0.2",
     "path-to-regexp": "8.0.0",
@@ -58,6 +59,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.10",
     "@types/lodash-es": "^4.17.12",
     "typescript": "^5.0.4"
   },

packages/table/package.json

@@ -55,13 +55,15 @@
     "@dnd-kit/utilities": "^3.2.1",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "omit.js": "^2.0.2",
     "rc-resize-observer": "^1.0.0",
     "rc-util": "^5.0.1"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.7.12",
+    "@types/lodash": "^4.17.10",
+    "@types/lodash-es": "^4.17.12",
     "typescript": "^5.0.4"
   },
   "peerDependencies": {

packages/table/src/Store/Provide.tsx

@@ -1,5 +1,5 @@
 import type { TableColumnType } from 'antd';
-import { merge } from 'lodash-es';
+import merge from 'lodash-es/merge';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { noteOnce } from 'rc-util/lib/warning';
 import {

packages/table/src/Table.tsx

@@ -26,7 +26,8 @@ import type {
   TableCurrentDataSource,
 } from 'antd/lib/table/interface';
 import classNames from 'classnames';
-import { isEmpty, isEqual } from 'lodash-es';
+import isEmpty from 'lodash-es/isEmpty';
+import isEqual from 'lodash-es/isEqual';
 import type Summary from 'rc-table/lib/Footer/Summary';
 import React, {
   Key,

packages/utils/package.json

@@ -46,12 +46,14 @@
     "@babel/runtime": "^7.18.0",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "rc-util": "^5.0.6",
     "safe-stable-stringify": "^2.4.3",
     "swr": "^2.0.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.10",
     "@types/lodash-es": "^4.17.12",
     "typescript": "^5.0.4"
   },

packages/utils/src/transformKeySubmitValue/index.ts

@@ -1,4 +1,4 @@
-import { merge as deepMerge } from 'lodash-es';
+import deepMerge from "lodash-es/merge";
 import get from 'rc-util/lib/utils/get';
 import namePathSet from 'rc-util/lib/utils/set';
 import React from 'react';

scripts/replaceLodash.js

@@ -0,0 +1,21 @@
+function replaceLodashImport(path) {
+  if (path.node.source && path.node.source.value?.startsWith('lodash-es/')) {
+    const cjsImport = path.node.source.value.replace('lodash-es/', 'lodash/');
+    try {
+      if (require.resolve(cjsImport)) {
+        path.node.source.value = cjsImport;
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+}
+
+function replaceLodash() {
+  return {
+    visitor: {
+      ImportDeclaration: replaceLodashImport,
+    },
+  };
+}
+module.exports = replaceLodash;