npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@electerm/antd-dayjs-webpack-plugin

v1.0.7

Published

Day.js webpack plugin for Ant Design (antd)

Downloads

12

Readme

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|

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 都会更新当前实例。