docs: 📖 update replace-moment docs

This commit is contained in:
afc163 2020-08-19 19:00:45 +08:00
parent 29ef3f74dd
commit af91a9b230
4 changed files with 26 additions and 38 deletions

View File

@ -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.

View File

@ -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) 进行开发。

View File

@ -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:

View File

@ -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 以上版本提供支持。
做一个简单的例子: