Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: esm version dist/mqtt.esm.js and replace browserify with esbuild #1731

Merged
merged 12 commits into from
Nov 8, 2023
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@
/dist/
/build/

*.js
*.js
*.mjs
18 changes: 16 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
59 changes: 59 additions & 0 deletions esbuild.js
Original file line number Diff line number Diff line change
@@ -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)
})
Loading
Loading