feat(vite): use vite to bundle library

Author: luqven

package.json

@@ -26,7 +26,9 @@
   "version": "3.0.4",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "yarn clean && vite build && yarn build:min",
+    "build:min": "vite build -- --minify",
+    "clean": "rm -rf dist",
     "serve": "vite preview",
     "test": "run-s test:unit test:e2e",
     "test:unit": "vite test:unit",
@@ -56,13 +58,12 @@
     "@types/jest": "24.9.1",
     "@typescript-eslint/eslint-plugin": "5.20.0",
     "@typescript-eslint/parser": "5.20.0",
+    "@vitejs/plugin-vue": "^1.6.1",
     "@vue/compiler-sfc": "3.2.47",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-typescript": "10.0.0",
     "@vue/test-utils": "2.3.2",
     "@vue/vue3-jest": "27.0.0",
-    "@vitejs/plugin-vue": "^1.6.1",
-    "vite": "^2.5.4",
     "babel-jest": "27.5.1",
     "babel-loader": "8.3.0",
     "concurrently": "^7.6.0",
@@ -78,9 +79,11 @@
     "read-pkg": "5.2.0",
     "rollup": "2.79.1",
     "rollup-plugin-babel": "4.4.0",
+    "rollup-plugin-license": "^3.0.1",
     "rollup-plugin-vue": "6.0.0",
     "ts-jest": "27.1.5",
     "typescript": "4.2.4",
+    "vite": "^2.5.4",
     "vue": "3.2.47",
     "vue-template-compiler": "2.7.14",
     "yarn-run-all": "3.1.1"

vite.config.js

@@ -1,9 +1,66 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import license from 'rollup-plugin-license';
 
 const path = require('path');
+const minify = process.argv.includes('--minify');
+
+// Change build process based on whether we're building a minified version.
+const libConfig = {
+  minified: {
+    formats: ['es'],
+    entry: path.resolve(__dirname, 'src/main.ts'),
+    name: 'imgix-vue',
+    fileName: () => 'imgix-vue.min.js',
+  },
+  default: {
+    formats: ['es', 'umd'],
+    entry: path.resolve(__dirname, 'src/main.ts'),
+    name: 'imgix-vue',
+    fileName: (format) => {
+      if (format === 'es') {
+        return `imgix-vue.esm.js`;
+      }
+      return `imgix-vue.${format}.js`;
+    },
+  },
+};
+
+const config = minify ? libConfig.minified : libConfig.default;
+
 export default defineConfig({
   plugins: [vue()],
+  esbuild: {
+    legalComments: 'none', // Preserve all legal comments.
+    banner: '/*! licenses: /vendor.LICENSE.txt */',
+  },
+  build: {
+    // Don't delete the outDir between builds.
+    // NPM script deletes outDir before building.
+    emptyOutDir: false,
+    minify: minify,
+    target: 'es2018',
+    lib: {
+      ...config,
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        // esbuild strips comments, so we need to add a banner to the output in
+        // order to preserve the licenses.
+        plugins: [
+          license({
+            thirdParty: {
+              output: path.resolve(__dirname, './dist/vendor.LICENSE.txt'),
+            },
+          }),
+        ],
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),