• Stars
    star
    287
  • Rank 138,839 (Top 3 %)
  • Language
    JavaScript
  • Created over 4 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

⏰ Day.js webpack plugin for Ant Design

antd-dayjs-webpack-plugin

NPM version

A webpack plugin for Day.js. 一个 Day.js 的 Webpack 插件。

Replace Moment.js with Day.js in antd project in ONE step. Bundle size reduced from 65 kb -> 4.19 kb.

只需一步操作即可使用 Day.js 替换 Moment.js ,打包体积由 65 kb 优化至 4.19 kb。

Name Size Size gzip
Moment.js 231 kb 65.55 kb
Day.js 11.11 kb 4.19 kb
moment dayjs moment dayjs 2kb

Usage 使用方法

  1. Install npm i dayjs --save. 安装 dayjs
  2. Install npm i antd-dayjs-webpack-plugin --save-dev. 安装 antd-dayjs-webpack-plugin
  3. Add an instance of the plugin to the webpack plugin configuration. 更新 webpack 配置。

Example 示例

// webpack-config.js
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new AntdDayjsWebpackPlugin()
  ]
};

// index.js
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
// 如果要使用非"英语"语言,请在项目文件里引入对应的语言包
// if using locale other than 'en', please load the locale file in advance

Ant Design 3.x Notice Ant Design 3.x 注意事项

If you are using this plugin in a Ant Design 3.x project, you have to config it manually. 如果在 Ant Design 3.x 的项目中使用本插件,需要传入以下配置。

  plugins: [
    new AntdDayjsWebpackPlugin({
      preset: 'antdv3'
    })
  ]

Configuration 配置

No configuration needed unless you know what these configs mean. 默认无需额外配置,除非有特殊需要。

Attribute Description Type Accepted Values Default
plugins plugin name Array[string] all support plugins []
replaceMoment replace moment to dayjs with webpack alias config Boolean true / false
preset name of preset configuration String 'antd' 'antd'

Preset 'antd' contains the following plugins and set replaceMoment to true, you can pass your own plugin config/ replaceMoment config to override it. 'antd' 预设包含以下插件,并开启了‘替换Moment’配置,你可以通过 plugin 选项来配置自定义的插件组合及‘替换Moment’配置。

[
  'isSameOrBefore',
  'isSameOrAfter',
  'advancedFormat',
  'customParseFormat',
  'weekday',
  'weekYear',
  'weekOfYear',
  'isMoment',
  'localeData',
  'localizedFormat',
]

Notice 说明

  1. Day.js is a lightweight library with only 2kb size, but we have to use some other plugins to make full compatible to moment.js in Antd, so the final bundle size is 4.19 kb (Still small 😀)
  • Day.js 是一个只有 2kb 的轻量级时间库,但为了完成对 moment.js 和 Antd 代码的替换,我们需要引入一些特殊的插件,这会使最终的体积变成 4.19 kb (但仍然很小呀😀
  1. If you are using preset antdv3 in a Ant Design 3.x project, please note: Day.js is designed to be immutable, however, in order to make full compatible to moment.js in Antd 3.x, we have to use a plugin 🚨 BadMutable 🚨 to make Day.js mutable. This's not good and not what we want, but there's no better option. With this plugin enabled, all setters will update the instance itself.
  • 如果是在 Ant Design 3.x 项目中使用了 antdv3 配置,请注意: Day.js 被设计成不可变的对象,但是为了完成对 moment.js 的替换,必须要引入一个 🚨 BadMutable 🚨插件让其变成可变对象,这并不是一个好的选择,但为了兼容也没有更好的办法。当使用这个插件后,所有的 setter 都会更新当前实例。

More Repositories

1

ant-design

An enterprise-class UI design language and React UI library
TypeScript
89,408
star
2

ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
TypeScript
35,716
star
3

ant-design-mobile

Essential UI blocks for building mobile web apps.
TypeScript
11,415
star
4

ant-design-landing

🚵 Landing Pages of Ant Design System
JavaScript
5,928
star
5

ant-motion

🚴 Animate specification and components of Ant Design
JavaScript
4,563
star
6

pro-components

🏆 Use Ant Design like a Pro!
TypeScript
3,981
star
7

ant-design-mobile-rn

Ant Design for React Native
TypeScript
2,925
star
8

ant-design-charts

A React Chart Library
JavaScript
1,802
star
9

antd-mobile-samples

antd-mobile samples
HTML
1,142
star
10

ant-ux

🎸 A sitemap template for ux design
JavaScript
1,136
star
11

ant-design-pro-layout

🌃 Powerful and easy to use beautiful layout
TypeScript
998
star
12

ant-design-icons

⭐ Ant Design SVG Icons
TypeScript
901
star
13

antd-init

🔰 Ant Design boilerplate generator.
JavaScript
816
star
14

pro-blocks

Blocks of Ant Design Pro.
TypeScript
710
star
15

ant-design-web3

🥳 Efficient react components for building dapps easier | Connect crypto wallets and more Web3 UI components | Web3 icons | Supports Ethereum, Solana, Bitcoin and others.
TypeScript
703
star
16

ant-design-colors

🎨 Color Palettes Calculator of Ant Design
TypeScript
612
star
17

create-react-app-antd

Use antd in create-react-app without ejecting ✨
JavaScript
583
star
18

pro-table

🏆 Use Ant Design Table like a Pro!
TypeScript
560
star
19

sunflower

🦹 Process components for antd4 & antd3 by alipay industry technology
TypeScript
499
star
20

ant-design-dark-theme

🌚 Dark theme variables of Ant Design
TypeScript
481
star
21

react-tutorial

基于 umi 的 Ant Design 实战教程配套代码 https://www.yuque.com/ant-design/course
JavaScript
434
star
22

pro-chat

🤖 Components Library for Quickly Building LLM Chat Interfaces.
TypeScript
400
star
23

ant-design-pro-site

TypeScript
393
star
24

antd-tools

🔧 Cli Tools for Ant Design React
JavaScript
393
star
25

ant-design-mini

Ant Design for Alipay Mini Program
TypeScript
368
star
26

ant-design-aliyun-theme

⚙ Ant Design Theme for console.aliyun.com
TypeScript
305
star
27

ant-design-pro-cli

Cli tool of Ant Design Pro
JavaScript
259
star
28

cssinjs

TypeScript
219
star
29

intl-example

🌏 example about`antd`/`antd-mobile` internationalization
JavaScript
205
star
30

antd-sketchapp

⚛️💎🐜 Render Ant Design components to Sketch.
HTML
201
star
31

antd-style

css-in-js library with antd v5 token system
TypeScript
166
star
32

pro-flow

🪢 A React based Flow Framework, include Flow View and Flow Editor
TypeScript
159
star
33

html2sketch

parser HTML to Sketch JSON
TypeScript
150
star
34

pro-editor

🕹️ The Ultimate Editor UI Framework and Components
TypeScript
145
star
35

scaffold-market

scaffold market for single page application
JavaScript
127
star
36

kitchen

Powerful sketch plugin for design cooperation 🍳🍳🍳
121
star
37

ant-design-mobile-chart

Ant Design Mobile Chart based on F2
JavaScript
103
star
38

codemod-v4

codemod cli for antd v4 upgrade
JavaScript
92
star
39

compatible

TypeScript
89
star
40

ant-bot

JavaScript
78
star
41

parcel-antd

Use antd with parcel
TypeScript
75
star
42

antd-library

Axure library for Ant Design
HTML
75
star
43

v2.preview.pro.ant.design

v2.preview.pro.ant.design
JavaScript
72
star
44

antd-token-previewer

TypeScript
63
star
45

antd-mobile-pro

👨🏻‍💻👩🏻‍💻 Use Antd Mobile like a Pro!
TypeScript
53
star
46

ant-design-blocks

umi blocks of Ant Design.
TypeScript
50
star
47

antd-mobile-icons-v2

svg icons for ant-design-mobile
45
star
48

antd-issue-helper

TypeScript
43
star
49

antd-migration-helper

CLI tool to aid in migrate antd from old version to newer version.
JavaScript
41
star
50

u.ant.design

URL shortener.
JavaScript
35
star
51

editable-table

JavaScript
33
star
52

bisheng-plugin-antd

To support ant.design-like websites.
JavaScript
33
star
53

pro-list

梦想被 antd 内置的基于 antd 修改的 list
TypeScript
30
star
54

antd-mobile-template

umijs@4 and antd-mobile@5 quick start project, You can click the `use template` to quickly create your own app.
TypeScript
29
star
55

functional-mini

TypeScript
26
star
56

examples

More complex demo using antd
JavaScript
25
star
57

HiTu

TypeScript
25
star
58

sketch-json-api

💎🔧 Node.js Library for Editing Sketch Files.
TypeScript
24
star
59

antd-color-editor

🎨 an open-source color editor for designing color system
TypeScript
23
star
60

static-style-extract

TypeScript
21
star
61

antd-codemod

antd codemod scripts.
JavaScript
20
star
62

happy-work-theme

TypeScript
16
star
63

use-emotion-css

A gadget that combines emotion and antd token
TypeScript
16
star
64

codemod-v5

codemod cli for antd v5 upgrade
JavaScript
16
star
65

ant-design-landing-build

JavaScript
16
star
66

antd-changelog-editor

Ant Design Changelog Editor
TypeScript
13
star
67

next-pro-components

下一个版本的 pro-components
HTML
12
star
68

antd-theme

CSS
10
star
69

antd-adapter

An adapter which makes newer antd works like old one. DIRTY HACK \ T^T /
JavaScript
9
star
70

sketch-assistant-ant-design

TypeScript
9
star
71

ant-design-analysis

bundle size analysis of ant-design-mobile
HTML
8
star
72

antd-mobile-icons

The icon set for antd-mobile.
JavaScript
7
star
73

.github

6
star
74

beta.pro.ant.design

beta for pro scaffold
HTML
6
star
75

2x.ant.design

[email protected] site
HTML
6
star
76

010x.ant.design

[email protected] site
HTML
5
star
77

1x.ant.design

[email protected] site http://1x.ant.design
HTML
5
star
78

v2.pro.ant.design

https://v2-pro.ant.design/index-cn v2 version
HTML
4
star
79

next.mobile.ant.design

This is the documentation site for antd-mobile v5.
4
star
80

beta.preview.pro.ant.design

ant.design.pro 的 beta 预览
JavaScript
4
star
81

3x.ant.design

HTML
4
star
82

doc

antd 技术栈的所有文档,用于做 AI 功能
JavaScript
4
star
83

1x.mobile.ant.design

[email protected] site, http://1x.mobile.ant.design
HTML
4
star
84

012x.ant.design

[email protected] site http://012x.ant.design
HTML
3
star
85

011x.ant.design

[email protected] site http://011x.ant.design
HTML
3
star
86

07x.mobile.ant.design

[email protected] site
3
star
87

v1.pro.ant.design

ant design pro document
CSS
3
star
88

08x.mobile.ant.design

[email protected] site
HTML
3
star
89

03x.pro.ant.design

Document for ant design pro 0.3.x
HTML
3
star
90

09x.mobile.ant.design

[email protected] site
HTML
3
star
91

2x.rn.mobile.ant.design

http://2x.rn.mobile.ant.design/
HTML
3
star
92

ant-design-web3-demo

A demo for Ant Design Web3 course.
TypeScript
3
star
93

09x.ant.design

document of [email protected]
JavaScript
2
star
94

v1.preview.pro.ant.design

ant design pro v1 preview
JavaScript
2
star
95

beta.mobile.ant.design

No longer use, please visitor:
HTML
2
star
96

v5.ant-design-pro-site

TypeScript
2
star
97

test-antd-locale

JavaScript
1
star
98

cssinjs-benchmark

Benchmark for ant design cssinjs
TypeScript
1
star
99

babel-plugin-antd-style

为 antd-style 生成的 classname 增加文件名,方便 debug
TypeScript
1
star
100

antd-moment-webpack-plugin

⏰ Replace Day.js to Moment.js webpack plugin for Ant Design
JavaScript
1
star