feat: esm version dist/mqtt.esm.js and replace browserify with `e…

…sbuild` (#1731)

.eslintignore

@@ -4,4 +4,5 @@
 /dist/
 /build/
 
-*.js
+*.js
+*.mjs

README.md

@@ -804,10 +804,20 @@ Closes the Store.
 
 ## Browser
 
-MQTT.js is bundled using [browserify](http://browserify.org/). You can find the browser build in the `dist` folder.
+MQTT.js is bundled using [esbuild](https://esbuild.github.io/). It is tested working with all bundlers like Webpack, Vite and React.
+
+You can find all mqtt bundles versions in `dist` folder:
+
+- `mqtt.js` - iife format, not minified
+- `mqtt.min.js` - iife format, minified
+- `mqtt.esm.js` - esm format minified
+
+In order to import them use one of the following:
 
 ```js
+import * as mqtt from 'mqtt/dist/mqtt'
 import * as mqtt from 'mqtt/dist/mqtt.min'
+import mqtt from 'mqtt/dist/mqtt.esm'
 ```
 
 <a name="cdn"></a>
@@ -824,10 +834,12 @@ See <http://unpkg.com> for the full documentation on version ranges.
 
 ### Webpack
 
-If you are using webpack simply import MQTT.js like this:
+If you are using webpack simply import MQTT.js in one of the following ways:
 
 ```js
+import * as mqtt from 'mqtt/dist/mqtt'
 import * as mqtt from 'mqtt/dist/mqtt.min'
+import mqtt from 'mqtt/dist/mqtt.esm'
 ```
 
 <a name="vite"></a>
@@ -837,7 +849,9 @@ import * as mqtt from 'mqtt/dist/mqtt.min'
 If you are using vite simply import MQTT.js like this:
 
 ```js
+import * as mqtt from 'mqtt/dist/mqtt'
 import * as mqtt from 'mqtt/dist/mqtt.min'
+import mqtt from 'mqtt/dist/mqtt.esm'
 ```
 
 <a name="qos"></a>

esbuild.js

@@ -0,0 +1,59 @@
+const { build } = require('esbuild')
+const { polyfillNode } = require('esbuild-plugin-polyfill-node');
+const { rimraf } = require('rimraf')
+const fs = require('fs')
+
+const outdir = 'dist'
+
+/**
+ * @type {import('esbuild').BuildOptions}
+ */
+const options = {
+    entryPoints: ['build/mqtt.js'],
+    bundle: true,
+    outfile: `${outdir}/mqtt.js`,
+    format: 'iife',
+    platform: 'browser',
+    globalName: 'mqtt',
+    define: {
+        'global': 'window'
+    },
+    plugins: [
+        polyfillNode({
+            polyfills: [
+                'readable-stream'
+            ]
+        }),
+    ],
+}
+
+async function run() {
+    const start = Date.now()
+    await rimraf(outdir)
+    await build(options)
+
+    options.minify = true
+    options.outfile = `${outdir}/mqtt.min.js`
+    await build(options)
+
+
+    options.outfile = `${outdir}/mqtt.esm.js`
+    options.format = 'esm'
+
+    await build(options)
+
+    console.log(`Build time: ${Date.now() - start}ms`)
+    console.log('Build output:')
+
+    // log generated files with their size in KB
+    const files = fs.readdirSync(outdir)
+    for (const file of files) {
+        const stat = fs.statSync(`${outdir}/${file}`)
+        console.log(`- ${file} ${Math.round(stat.size / 1024 * 100) / 100} KB`)
+    }
+}
+
+run().catch((e) => {
+    console.error(e)
+    process.exit(1)
+})