refactor: use vite instead of webpack (#189)

Resulting library is at 5710 bytes uncompressed.
Topsort · Aug 2, 2023 · ba3f2e4 · ba3f2e4
1 parent 213a165
commit ba3f2e4
Show file tree

Hide file tree

Showing 8 changed files with 2,277 additions and 855 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,9 +13,9 @@
   "homepage": "https://github.com/Topsort/analytics.js#readme",
   "scripts": {
     "prepublishOnly": "npm run build && node update-version.js",
-    "build": "webpack",
+    "build": "vite build",
     "test": "jest",
-    "test:e2e": "webpack && webpack -c webpack.config.browser-test.js && tsc && cp dist/mocks/api-server.{,m}js && node dist/mocks/api-server.mjs",
+    "test:e2e": "vite build && vite build -c vite.config.browser-test.js && tsc && cp dist/mocks/api-server.{,m}js && node dist/mocks/api-server.mjs",
     "lint": "eslint . --max-warnings 0 --ignore-path .gitignore",
     "lint:fix": "npm run lint -- --fix",
     "lint:ci": "npm run lint -- --format=compact",
@@ -30,6 +30,7 @@
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.54.0",
+    "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jest": "^27.2.2",
@@ -46,7 +47,7 @@
     "ts-jest": "^27.1.4",
     "ts-loader": "^9.4.2",
     "typescript": "^4.8.4",
-    "webpack": "^5.86.0",
-    "webpack-cli": "^5.0.1"
+    "vite": "^4.4.7",
+    "vite-plugin-html": "^3.2.0"
   }
 }
diff --git a/tests/real_e2e.html b/tests/real_e2e.html
@@ -6,7 +6,7 @@
         url: "https://ts-ohio.api.staging.topsort.ai",
       };
     </script>
-    <script src="../dist/ts.js"></script>
+    <script src="../dist/ts.umd.js"></script>
   </head>
   <body>
     <!-- Promoted Product -->

diff --git a/tests/test.html b/tests/test.html
@@ -86,7 +86,7 @@
       url: window.location.origin + "/" + testId,
     };
   </script>
-  <script src="/js/ts.js"></script>
-  <script src="/js/test-bundle-react.js"></script>
+  <script src="/js/ts.umd.js"></script>
+  <script src="/js/test-bundle-react.umd.js"></script>
   <script src="/js/tests/browser-test.js"></script>
 </html>
diff --git a/vite.config.browser-test.js b/vite.config.browser-test.js
@@ -0,0 +1,18 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, "tests/components.tsx"),
+      name: "test-bundle-react",
+      // the proper extensions will be added
+      fileName: "test-bundle-react",
+    },
+    emptyOutDir: false,
+  },
+  define: {
+    "process.env.NODE_ENV": "'production'",
+  },
+});
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,15 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, "src/detector.ts"),
+      name: "ts",
+      // the proper extensions will be added
+      fileName: "ts",
+    },
+    emptyOutDir: false,
+  },
+});
diff --git a/webpack.config.browser-test.js b/webpack.config.browser-test.js
diff --git a/webpack.config.js b/webpack.config.js