dunqing/unplugin-moment-to-dayjs

Replace moment with dayjs, support use in vite, rollup, webpack

unplugin-moment-to-dayjs

Replace moment with dayjs, support use in vite, rollup, webpack

Installation

npm i unplugin-moment-to-dayjs

Vite

// vite.config.ts
import momentToDayjs from 'unplugin-moment-to-dayjs/vite'

export default defineConfig({
  plugins: [
    momentToDayjs({ /* options */ }),
  ],
})

Example: playground/

Rollup

// rollup.config.js
import momentToDayjs from 'unplugin-moment-to-dayjs/rollup'

export default {
  plugins: [
    momentToDayjs({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-moment-to-dayjs/webpack')({ /* options */ }),
  ],
}

Options

Please reference antd-dayjs-webpack-plugin

Examples

• vite-ant-design-pro

Thanks

• moment
• dayjs
• antd-dayjs-webpack-plugin

unplugin-moment-to-dayjs's Issues

Plugin not working/applying in Vite 4. Moment.js still being used (`date4.localeData is not a function`)

I don't know what exactly is going on, but at work I can't even get a simple DatePicker to work. The error occurs when you try to open the date picker

import {DatePicker} from 'antd';
<DatePicker />

Getting this in the console

looks like moment is still being used

import fs from 'fs';
import * as dotenv from 'dotenv';
import {defineConfig} from 'vite';
import {chunkSplitPlugin} from 'vite-plugin-chunk-split';
import react from '@vitejs/plugin-react';
import symfonyPlugin from 'vite-plugin-symfony';
import momentToDayjs from 'unplugin-moment-to-dayjs/vite';
import browserslistToEsbuild from 'browserslist-to-esbuild';

dotenv.config();

export default defineConfig(({command}) => ({
  plugins: [
    chunkSplitPlugin({
      customChunk: ({file}) => {
        // Extract each node_modules package into a separate chunk in "js/npm/(user-)package".
        // Regex taken from: https://github.com/npm/validate-npm-package-name/blob/main/lib/index.js#L3
        const match = file.match(/node_modules\/(?:@([^\/]+?)[\/])?([^\/]+)/);
        if (match) {
          const name = match[1] ? `${match[1]}-${match[2]}` : match[2];
          return `npm/${name}`;
        }
        return null;
      },
    }),
    react(),
    symfonyPlugin({
      viteDevServerHostname: 'localhost',
    }),
    momentToDayjs(),
  ],
  base: '/build/',
  build: {
    target: browserslistToEsbuild(),
    outDir: './public/build',
    rollupOptions: {
      input: {
        'public': './assets/public.jsx',
        'portal': './assets/portal.jsx',
        'living-styleguide': './assets/living-styleguide.jsx',
      },
      output: {
        assetFileNames: (assetInfo) => {
          // Place asset in each corresponding folder "build/{img,font,etc.}/*".
          const info = assetInfo.name.split('.');
          let extType = info[info.length - 1];
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = 'img';
          } else if (/woff2?|otf|ttf|eot/.test(extType)) {
            extType = 'font';
          }
          return `${extType}/[name].[hash][extname]`;
        },
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js',
      },
    },
    manifest: true,
  },
  server: {
    host: '0.0.0.0',
    port: 3000,
    https: {
      // Get certificates if we are not building (CI has no certificates)
      key: command === 'build' ? null : fs.readFileSync('docker/run/certificates/key.pem'),
      cert: command === 'build' ? null : fs.readFileSync('docker/run/certificates/cert.pem'),
    },
    watch: {
      ignored: ['**/tests/**', '**/var/**', '**/vendor/**'],
    },
    origin: `https://${process.env.APP_URL}:3000`,
  },
  // Needed for antd
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
}));

as you can see I do am using your plugin
The only custom thing i can even think about is setting the locale, but i don't think that has anything to do with this issue

import dayjsDeLocale from 'dayjs/locale/de-ch';
import dayjsFrLocale from 'dayjs/locale/fr-ch';
import dayjsItLocale from 'dayjs/locale/it-ch';
import dayjsEnLocale from 'dayjs/locale/en';
import dayjs from 'dayjs';

const locale = document.documentElement.lang ?? 'de';

const dayjsLocales = {
  de: dayjsDeLocale,
  fr: dayjsFrLocale,
  it: dayjsItLocale,
  en: dayjsEnLocale,
};

dayjs.locale(dayjsLocales[locale]);

Could it maybe be because of Vite 4?

{
  "dependencies": {
    "@vitejs/plugin-react": "^3.1.0",
    "browserslist-to-esbuild": "^1.2.0",
    "dotenv": "^16.0.3",
    "unplugin-moment-to-dayjs": "^0.5.0",
    "vite": "^4.1.2",
    "vite-plugin-chunk-split": "^0.4.7",
    "vite-plugin-symfony": "^0.7.5"
  }
}

can you provide a better example about integrate with commonjs. webpack5