Skip to content

Commit d00f2c0

Browse files
Update browser docs
1 parent cf29f5b commit d00f2c0

File tree

1 file changed

+5
-38
lines changed

1 file changed

+5
-38
lines changed

packages/docs/src/content/docs/guides/browser.mdx

+5-38
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import { Code } from '@astrojs/starlight/components';
99

1010
Jimp can be used anywhere that javascript is supported. It can be used in the browser, in Node.js, or in a web worker.
1111

12+
Jimp comes with a pre-bundled browser version.
13+
To use it simply import `jimp/browser` instead.
14+
15+
> Note: Your bundler might do this automatically for you!
16+
1217
<br />
1318
<GrayscaleExample client:load />
1419

@@ -59,41 +64,3 @@ function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
5964

6065
input.addEventListener("change", handleFile);
6166
```
62-
63-
## Setup
64-
65-
For the most part Jimp's code can be used in the browser. However, there are a few things to be aware of.
66-
67-
The `Buffer` class is not available in the browser.
68-
You will need to polyfill this however the bundler you're using will handle this for you.
69-
70-
### `webpack`
71-
72-
To do this in `webpack` you can use the `resolve.fallback` option.
73-
74-
```js
75-
module.exports = {
76-
resolve: {
77-
fallback: {
78-
buffer: require.resolve('buffer/'),
79-
},
80-
},
81-
};
82-
```
83-
84-
### `vite` / `astro`
85-
86-
To do this in `vite` you can use the `resolve.alias` option.
87-
88-
```js
89-
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
90-
91-
export default defineConfig({
92-
esbuildOptions: {
93-
define: {
94-
global: "globalThis",
95-
},
96-
plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
97-
},
98-
});
99-
```

0 commit comments

Comments
 (0)