From 36a1f750bfecd57132a8fb0facac11c738041842 Mon Sep 17 00:00:00 2001 From: Sam Estep Date: Sat, 16 Mar 2024 02:43:37 -0400 Subject: [PATCH] Add docs for usage with Vite (#4591) Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- docs/usage/index.md | 1 + docs/usage/working-with-bundlers.md | 86 +++++++++++++++++++++++++++++ 2 files changed, 87 insertions(+) create mode 100644 docs/usage/working-with-bundlers.md diff --git a/docs/usage/index.md b/docs/usage/index.md index 2a5cf10b6..8f91274b4 100644 --- a/docs/usage/index.md +++ b/docs/usage/index.md @@ -134,4 +134,5 @@ undefined accessing-files.md webworker.md service-worker.md + working-with-bundlers.md ``` diff --git a/docs/usage/working-with-bundlers.md b/docs/usage/working-with-bundlers.md new file mode 100644 index 000000000..0f9a27b92 --- /dev/null +++ b/docs/usage/working-with-bundlers.md @@ -0,0 +1,86 @@ +(working-with-bundlers)= + +# Working with Bundlers + +## Webpack + +There is a [Pyodide Webpack Plugin][] to load Pyodide from a CDN in a Webpack +project. + +## Vite + +```{note} +The following instructions have been tested with Pyodide 0.25.0 and Vite 5.1.4. +``` + +If you have installed Pyodide via npm, you can use it in Vite as follows. First, +the Pyodide npm package currently uses [`node-fetch`][] to load some files, +which does not work in a browser; to resolve this, install the +[`isomorphic-fetch`][] package so that Pyodide does not try to load `node-fetch` +in the browser: + +``` +$ npm install --save isomorphic-fetch@^3 +``` + +Then, exclude Pyodide from [Vite's dependency pre-bundling][optimizedeps] by +setting `optimizeDeps.exclude` in your `vite.config.js` file: + +```js +import { defineConfig } from "vite"; + +export default defineConfig({ optimizeDeps: { exclude: ["pyodide"] } }); +``` + +You can test your setup with this `index.html` file: + +```html + + + + + + +``` + +And this `src/main.js` file: + +```js +import { loadPyodide } from "pyodide"; + +async function hello_python() { + let pyodide = await loadPyodide(); + return pyodide.runPythonAsync("1+1"); +} + +hello_python().then((result) => { + console.log("Python says that 1+1 =", result); +}); +``` + +This should be sufficient for Vite dev mode: + +``` +$ npx vite +``` + +For a production build, you must also manually make sure that all Pyodide files +will be available in `dist/assets`, by first copying them to `public/assets` +before building: + +``` +$ mkdir -p public/assets/ +$ cp node_modules/pyodide/* public/assets/ +$ npx vite build +``` + +Then you can view this production build to verify that it works: + +``` +$ npx vite preview +``` + +[`isomorphic-fetch`]: https://www.npmjs.com/package/isomorphic-fetch +[`node-fetch`]: https://www.npmjs.com/package/node-fetch +[optimizedeps]: https://vitejs.dev/guide/dep-pre-bundling.html +[pyodide webpack plugin]: https://github.com/pyodide/pyodide-webpack-plugin