mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: 📖 update replace-moment docs
This commit is contained in:
parent
29ef3f74dd
commit
af91a9b230
@ -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.
|
||||
|
@ -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) 进行开发。
|
||||
|
@ -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:
|
||||
|
||||
|
@ -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 以上版本提供支持。
|
||||
|
||||
做一个简单的例子:
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user