diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index bfc1793c1f..d952680501 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -109,20 +109,6 @@ You are using a whole package of antd, please use https://www.npmjs.com/package/ > ![console warning](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) -## Replace momentjs to Day.js - -You can use [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) plugin to replace momentjs to Day.js to reduce bundle size dramatically. You need to update your webpack config file like this: - -```js -// webpack-config.js -import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'; - -module.exports = { - // ... - plugins: [new AntdDayjsWebpackPlugin()], -}; -``` - ## Customize your Workflow If you want to customize your workflow, we recommend using [webpack](http://webpack.github.io/) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem. diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index b97b055602..e5182da475 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -111,20 +111,6 @@ You are using a whole package of antd, please use https://www.npmjs.com/package/ ![控制台警告](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png) -## 使用 Day.js 替换 Moment.js 优化打包大小 - -你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 [Day.js](https://day.js.org/) 替换 Moment.js 来大幅减小打包大小。这需要更新 webpack 的配置文件如下: - -```js -// webpack-config.js -import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'; - -module.exports = { - // ... - plugins: [new AntdDayjsWebpackPlugin()], -}; -``` - ## 自行构建 如果想自己维护工作流,我们推荐使用 [webpack](https://webpack.github.io/) 进行构建和调试,可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。 diff --git a/docs/react/replace-moment.en-US.md b/docs/react/replace-moment.en-US.md index efab52cce1..c4b84d1cce 100644 --- a/docs/react/replace-moment.en-US.md +++ b/docs/react/replace-moment.en-US.md @@ -3,9 +3,7 @@ order: 7.1 title: Replace Moment.js --- -## How to use DatePicker with a custom date library like dayjs - -Considering it's bundle size, you might want to replace Moment.js with a different date library (now support dayjs and date-fns) of your choice. We provide two ways to customize which date library is used: +You might want to replace Moment.js with another date library (now support [dayjs](https://day.js.org) and [date-fns](https://date-fns.org)) to reduce bundle size. We provide two ways to customize: ### Custom component @@ -101,13 +99,23 @@ If you need JavaScript code, you can refer to [antd4-generate-picker/antd-demo]( If you use [umi](https://umijs.org/), you can reference [antd4-use-dayjs-replace-moment](https://github.com/xiaohuoni/antd4-use-dayjs-replace-moment). -### Webpack plugin +### antd-dayjs-webpack-plugin We also provide another implementation, which we provide with `antd-dayjs-webpack-plugin`, replacing `momentjs` with `Day.js` directly without changing a line of existing code. More info can be found at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin). +```js +// webpack-config.js +import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'; + +module.exports = { + // ... + plugins: [new AntdDayjsWebpackPlugin()], +}; +``` + ## Use date-fns -`date-fns` currently supports custom component methods similar to `dayjs`. The difference is that the parameter types used are different. Support is provided in antd 4.5.0 and above. +[date-fns](https://date-fns.org/) currently supports custom component methods similar to `dayjs`. The difference is that the parameter types used are different. Support is provided in antd 4.5.0 and above. For Example: diff --git a/docs/react/replace-moment.zh-CN.md b/docs/react/replace-moment.zh-CN.md index a447a9dcb8..e22a629249 100644 --- a/docs/react/replace-moment.zh-CN.md +++ b/docs/react/replace-moment.zh-CN.md @@ -3,9 +3,7 @@ order: 7.1 title: 替换 Moment.js --- -## 如何在 DatePicker 中使用自定义日期库(如 dayjs )? - -考虑到包的大小,你可以用自定义日期库替换 Moment。在这里我们提供了两种方式来实现替换: +你可以用自定义日期库([day.js](https://day.js.org)、[date-fns](https://date-fns.org))替换 Moment 以优化打包大小。在这里我们提供了两种方式来实现替换: ### 自定义组件 @@ -101,13 +99,23 @@ export { default as TimePicker } from './TimePicker'; 如果你熟悉 [umi](https://umijs.org/),你可以参考 [antd4-use-dayjs-replace-moment](https://github.com/xiaohuoni/antd4-use-dayjs-replace-moment)。 -### Webpack 配置替换 +### antd-dayjs-webpack-plugin 我们还提供另一种实现方式。使用 `antd-dayjs-webpack-plugin` 插件,无需对现有代码做任何修改直接替换成 `Day.js`。请参考 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin)。 +```js +// webpack-config.js +import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'; + +module.exports = { + // ... + plugins: [new AntdDayjsWebpackPlugin()], +}; +``` + ## 使用 date-fns -`date-fns` 目前支持和 dayjs 类似的自定义组件方法,区别在于使用的参数类型不同,在 antd 4.5.0 以上版本提供支持。 +[date-fns](https://date-fns.org/) 目前支持和 dayjs 类似的自定义组件方法,区别在于使用的参数类型不同,在 antd 4.5.0 以上版本提供支持。 做一个简单的例子: