Skip to content

Commit

Permalink
docs: 📖 update replace-moment docs
Browse files Browse the repository at this point in the history
  • Loading branch information
afc163 committed Aug 19, 2020
1 parent 29ef3f7 commit af91a9b
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 38 deletions.
14 changes: 0 additions & 14 deletions docs/react/getting-started.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
14 changes: 0 additions & 14 deletions docs/react/getting-started.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) 进行开发。
Expand Down
18 changes: 13 additions & 5 deletions docs/react/replace-moment.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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:

Expand Down
18 changes: 13 additions & 5 deletions docs/react/replace-moment.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 以优化打包大小。在这里我们提供了两种方式来实现替换:

### 自定义组件

Expand Down Expand Up @@ -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 以上版本提供支持。

做一个简单的例子:

Expand Down

0 comments on commit af91a9b

Please sign in to comment.