https://github.com/robinloeffel/esbuild-plugin-browser-sync
easily integrate browser-sync into your esbuild development flow 🌊
https://github.com/robinloeffel/esbuild-plugin-browser-sync
browser-sync browsersync esbuild esbuild-plugin
Last synced: 10 months ago
JSON representation
easily integrate browser-sync into your esbuild development flow 🌊
- Host: GitHub
- URL: https://github.com/robinloeffel/esbuild-plugin-browser-sync
- Owner: robinloeffel
- License: mit
- Created: 2023-03-25T16:37:36.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-25T17:50:23.000Z (almost 3 years ago)
- Last Synced: 2025-03-28T18:13:23.333Z (11 months ago)
- Topics: browser-sync, browsersync, esbuild, esbuild-plugin
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license
Awesome Lists containing this project
README
# @rbnlffl/esbuild-plugin-browser-sync
[](https://www.npmjs.com/package/@rbnlffl/esbuild-plugin-browser-sync)
[](https://www.npmjs.com/package/@rbnlffl/esbuild-plugin-browser-sync)
[](https://github.com/BrowserSync/browser-sync)
[](https://github.com/nodejs/Release)
[](license)
> easily integrate [`browser-sync`](https://github.com/BrowserSync/browser-sync) into your [`esbuild`](https://github.com/esbuild/esbuild) development flow 🌊
## install
```bash
yarn install --dev @rbnlffl/esbuild-plugin-browser-sync
```
## use
```typescript
import esbuild from "esbuild";
import browserSync from "@rbnlffl/esbuild-plugin-browser-sync";
const context = await esbuild.context({
/* esbuild config */
plugins: [
browserSync({ /* options */ })
]
});
context.watch();
```
## config
all of the supplied configuration options get directly forwarded to `browser-sync`. you can find the official docs here: https://browsersync.io/docs/options
## caveats
since `esbuild` doesn't expose to its plugins whether it's in watch mode or not, whenever you include this bad boy, it will spin up a brand new `browser-sync` session for you. even if you just once call `esbuild.build`. so be mindful of that.
furthermore, if you are in `esbuild`'s watch mode, and you've configured `browser-sync` to watch certain files, as well, make sure there are no overlaps in your [`files`](https://browsersync.io/docs/options#option-files) prop and the actual sources you're piping to `esbuild`. the plugin will automatically trigger a [`reload`](https://browsersync.io/docs/api#api-reload) every time one of the source files that `esbuild` knows of, change. this may otherwise lead to multiple reloads, and unnecessary work for your cpu.
the best way to use this plugin is to have `esbuild` take care of watching the source files, and instruct `browser-sync` to watch assets that are outside of what you process via esbuild, like html files, an svg sprite, images, and so on. this allows you to have a smooth and very performant dx for web pages.
## license
[mit](license)