feat(js): bundle umd with webpack

novuhq · Jun 11, 2024 · 4a5ef31 · 4a5ef31
1 parent b1203ab
commit 4a5ef31
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 30 deletions.
diff --git a/packages/js/package.json b/packages/js/package.json
@@ -31,7 +31,7 @@
   "private": true,
   "scripts": {
     "start": "pnpm run build -- --watch --sourcemap",
-    "build": "tsup && pnpm run post:build",
+    "build": "tsup && pnpm run build:umd && pnpm run post:build",
     "build:umd": "webpack --config webpack.config.cjs",
     "post:build": "node scripts/size-limit.js",
     "lint": "eslint --ext .ts,.tsx src",

diff --git a/packages/js/scripts/size-limit.js b/packages/js/scripts/size-limit.js
@@ -15,14 +15,12 @@ const modules = [
   {
     name: 'UMD minified',
     filePath: umdPath,
-    limit: '10 kb',
-    limitInBytes: 20_000,
+    limitInBytes: 70_000,
   },
   {
     name: 'UMD gzip',
     filePath: umdGzipPath,
-    limit: '10 kb',
-    limitInBytes: 10_000,
+    limitInBytes: 20_000,
   },
 ];
 

diff --git a/packages/js/tsconfig.json b/packages/js/tsconfig.json
@@ -4,6 +4,7 @@
     "lib": ["ESNext"],
     "target": "ESNext",
     "module": "ESNext",
+    "outDir": "./dist/esm",
     "strict": true,
     "noImplicitAny": true,
     "strictNullChecks": true,

diff --git a/packages/js/tsup.config.ts b/packages/js/tsup.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig, Options } from 'tsup';
-import { compress } from 'esbuild-plugin-compress';
+// import { compress } from 'esbuild-plugin-compress';
 import glob from 'tiny-glob';
 
 import { name, version } from './package.json';
@@ -39,24 +39,24 @@ export default defineConfig([
     format: 'cjs',
     outDir: 'dist/cjs',
   },
-  {
-    ...baseConfig,
-    entry: { novu: 'src/umd.ts' },
-    format: ['iife'],
-    minify: true,
-    dts: false,
-    outExtension: () => {
-      return {
-        js: '.min.js',
-      };
-    },
-    esbuildPlugins: [
-      compress({
-        gzip: true,
-        brotli: false,
-        outputDir: '.',
-        exclude: ['**/*.map'],
-      }),
-    ],
-  },
+  // {
+  //   ...baseConfig,
+  //   entry: { novu: 'src/umd.ts' },
+  //   format: ['iife'],
+  //   minify: true,
+  //   dts: false,
+  //   outExtension: () => {
+  //     return {
+  //       js: '.min.js',
+  //     };
+  //   },
+  //   esbuildPlugins: [
+  //     compress({
+  //       gzip: true,
+  //       brotli: false,
+  //       outputDir: '.',
+  //       exclude: ['**/*.map'],
+  //     }),
+  //   ],
+  // },
 ]);
diff --git a/packages/js/webpack.config.cjs b/packages/js/webpack.config.cjs
@@ -2,8 +2,11 @@ const path = require('path');
 const webpack = require('webpack');
 const CompressionPlugin = require('compression-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const { name, version } = require('./package.json');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
+const isProd = process.env?.NODE_ENV === 'production';
+
 module.exports = {
   entry: './src/umd.ts',
   mode: 'production',
@@ -14,9 +17,8 @@ module.exports = {
   output: {
     library: 'NotificationCenterWebComponent',
     libraryTarget: 'umd',
-    filename: 'index.js',
-    path: path.resolve(__dirname, 'dist/umd'),
-    clean: true,
+    filename: 'novu.min.js',
+    path: path.resolve(__dirname, 'dist'),
   },
   optimization: {
     minimize: true,
@@ -40,7 +42,9 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production'),
+      PACKAGE_NAME: `"${name}"`,
+      PACKAGE_VERSION: `"${version}"`,
+      __DEV__: `${!isProd}`,
     }),
     new CompressionPlugin({
       test: /\.js(\?.*)?$/i,