chore(project): Build with vite

Author: mst101

package.json

@@ -17,9 +17,9 @@
     "keyboard navigation",
     "typeable"
   ],
-  "main": "dist/Datepicker.common.js",
-  "module": "dist/Datepicker.esm.js",
-  "unpkg": "dist/Datepicker.min.js",
+  "main": "dist/vue-datepicker.js",
+  "module": "dist/vue-datepicker.esm.js",
+  "unpkg": "dist/vue-datepicker.min.js",
   "sideEffects": [
     "*.css"
   ],
@@ -29,10 +29,10 @@
     "LICENSE"
   ],
   "scripts": {
-    "prepare": "npm run clear && npm run build",
-    "build": "npm run build:app && npm run build:locale",
-    "build:app": "rollup -c ./scripts/build.js",
-    "build:locale": "babel-node scripts/build-locale.js",
+    "prepare": "npm run build",
+    "build": "npm run clear && npm run build:app && npm run build:locale",
+    "build:app": "vite build -c scripts/build/default.js && vite build -c scripts/build/cjs.js && vite build -c scripts/build/esm.js",
+    "build:locale": "babel-node scripts/build/locale.js",
     "clear": "rm -rf dist/*",
     "audit": "npm audit --registry=https://registry.npmjs.org",
     "serve": "vite serve ./example",

scripts/build.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import defaultConfig from './default'
+
+export default defineConfig({
+  ...defaultConfig,
+  build: {
+    ...defaultConfig.build,
+    minify: false,
+    lib: {
+      ...defaultConfig.build.lib,
+      formats: ['cjs'],
+    },
+  },
+})

scripts/build/cjs.js

@@ -0,0 +1,45 @@
+import { resolve } from 'path'
+import vue from '@vitejs/plugin-vue'
+
+const sourcePath = resolve(__dirname, '../../', 'src')
+
+export default {
+  resolve: {
+    alias: [
+      {
+        find: '~',
+        replacement: sourcePath,
+      },
+    ],
+  },
+  plugins: [vue()],
+  esbuild: {
+    minify: true,
+  },
+  build: {
+    target: 'es2015',
+    minify: 'terser',
+    sourcemap: true,
+    lib: {
+      entry: `${sourcePath}/components/Datepicker.vue`,
+      name: 'Datepicker',
+      formats: ['umd', 'iife'],
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') return 'vue-datepicker.css'
+          return assetInfo.name
+        },
+      },
+    },
+  },
+}

scripts/build/default.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import defaultConfig from './default'
+
+export default defineConfig({
+  ...defaultConfig,
+  esbuild: {
+    minify: false,
+  },
+  build: {
+    ...defaultConfig.build,
+    minify: false,
+    lib: {
+      ...defaultConfig.build.lib,
+      formats: ['esm', 'cjs', 'umd', 'iife'],
+    },
+  },
+})

scripts/build/esm.js

@@ -97,6 +97,7 @@ async function buildEsm() {
     assetFileNames: '[name].esm.js',
   })
 }
+
 async function buildIndexes() {
   // eslint-disable-next-line no-console
   console.time('Index')

scripts/build-locale.js renamed to scripts/build/locale.js

@@ -3,6 +3,7 @@
 }
 
 .vdp-datepicker {
+  font-family: Arial, serif;
   position: relative;
   text-align: left;
   box-sizing: border-box;
@@ -51,6 +52,7 @@
 
       &:hover:not(:disabled) {
         background: #eee;
+        cursor: pointer;
       }
 
       &.vdp-datepicker__up {