All Projects → ant-design → Antd Dayjs Webpack Plugin

ant-design / Antd Dayjs Webpack Plugin

⏰ Day.js webpack plugin for antd

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Antd Dayjs Webpack Plugin

Emptyd Admin Webpack
基于typescript react webpack的脚手架
Stars: ✭ 30 (-86.05%)
Mutual labels:  moment, antd
React Article Bucket
总结,积累,分享,传播JavaScript各模块核心知识点文章全集,欢迎star,issue(勿fork,内容可能随时修改)。webpack核心内容部分请查看专栏: https://github.com/liangklfangl/webpack-core-usage
Stars: ✭ 750 (+248.84%)
Mutual labels:  moment, antd
dva-typescript-antd-starter-kit
A admin dashboard application demo based on antd by typescript and dva
Stars: ✭ 61 (-71.63%)
Mutual labels:  webpack-plugin, antd
Antd Scss Theme Plugin
A Webpack plugin for customizing Ant Design with an SCSS theme file and using Ant Design's compiled variables in SCSS files throughout your project.
Stars: ✭ 176 (-18.14%)
Mutual labels:  webpack-plugin, antd
Input Number
React Input Number
Stars: ✭ 199 (-7.44%)
Mutual labels:  antd
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-13.95%)
Mutual labels:  webpack-plugin
Vue Antd Admin
🐜 Ant Design Pro's implementation with Vue
Stars: ✭ 2,766 (+1186.51%)
Mutual labels:  antd
Emojify Webpack Plugin
🦄 Turn your code into emoji
Stars: ✭ 178 (-17.21%)
Mutual labels:  webpack-plugin
Ant Plus
🔺 Ant Design 表单简化版
Stars: ✭ 212 (-1.4%)
Mutual labels:  antd
Nobibi
一款基于Next.js+mongo的轻量级开源社区(open community by Next.js & mongo)
Stars: ✭ 209 (-2.79%)
Mutual labels:  antd
Fashop Admin
微信小程序商城后台,微信小程序微店后台,接口基于FaShop
Stars: ✭ 198 (-7.91%)
Mutual labels:  antd
Preload Webpack Plugin
Please use https://github.com/vuejs/preload-webpack-plugin instead.
Stars: ✭ 2,174 (+911.16%)
Mutual labels:  webpack-plugin
Nowa Gui
Stars: ✭ 202 (-6.05%)
Mutual labels:  antd
React Admin
基于react的后台管理项目模板
Stars: ✭ 184 (-14.42%)
Mutual labels:  antd
Unused Files Webpack Plugin
Glob all files that are not compiled by webpack under webpack's context
Stars: ✭ 210 (-2.33%)
Mutual labels:  webpack-plugin
React Ui Roundup
A one-stop-shop for comparing the features of all the best React frameworks. Useful for designers and engineers alike!
Stars: ✭ 177 (-17.67%)
Mutual labels:  antd
Vue Auto Routing
Generate Vue Router routing automatically
Stars: ✭ 196 (-8.84%)
Mutual labels:  webpack-plugin
Antd Img Crop
🔪 An image cropper for Ant Design Upload
Stars: ✭ 207 (-3.72%)
Mutual labels:  antd
Vuetify Daterange Picker
The missing date range picker for Vuetify JS you have been looking for.
Stars: ✭ 192 (-10.7%)
Mutual labels:  moment
React Antd Admin
Management system with react and ant-design.
Stars: ✭ 190 (-11.63%)
Mutual labels:  antd

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 都会更新当前实例。
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].