2024-03-16 06:43:37 +00:00
|
|
|
(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}
|
2024-06-09 14:00:10 +00:00
|
|
|
The following instructions have been tested with Pyodide 0.26.0 and Vite 5.2.13.
|
2024-03-16 06:43:37 +00:00
|
|
|
```
|
|
|
|
|
|
2024-06-09 14:00:10 +00:00
|
|
|
First, install the Pyodide npm package:
|
2024-03-16 06:43:37 +00:00
|
|
|
|
|
|
|
|
```
|
2024-06-09 14:00:10 +00:00
|
|
|
$ npm install pyodide
|
2024-03-16 06:43:37 +00:00
|
|
|
```
|
|
|
|
|
|
2024-06-09 14:00:10 +00:00
|
|
|
Then, in your `vite.config.js` file, exclude Pyodide from [Vite's dependency
|
|
|
|
|
pre-bundling][optimizedeps] by setting `optimizeDeps.exclude` and ensure that
|
|
|
|
|
all Pyodide files will be available in `dist/assets` for production builds by
|
|
|
|
|
using a Vite plugin:
|
2024-03-16 06:43:37 +00:00
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import { defineConfig } from "vite";
|
2024-06-09 14:00:10 +00:00
|
|
|
import { copyFile, mkdir } from "fs/promises";
|
|
|
|
|
import { join } from "path";
|
|
|
|
|
|
|
|
|
|
export default defineConfig({
|
|
|
|
|
optimizeDeps: { exclude: ["pyodide"] },
|
|
|
|
|
plugins: [
|
|
|
|
|
{
|
|
|
|
|
name: "vite-plugin-pyodide",
|
|
|
|
|
generateBundle: async () => {
|
|
|
|
|
const assetsDir = "dist/assets";
|
|
|
|
|
await mkdir(assetsDir, { recursive: true });
|
|
|
|
|
const files = [
|
|
|
|
|
"pyodide-lock.json",
|
|
|
|
|
"pyodide.asm.js",
|
|
|
|
|
"pyodide.asm.wasm",
|
|
|
|
|
"python_stdlib.zip",
|
|
|
|
|
];
|
|
|
|
|
for (const file of files) {
|
|
|
|
|
await copyFile(
|
|
|
|
|
join("node_modules/pyodide", file),
|
|
|
|
|
join(assetsDir, file),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
2024-03-16 06:43:37 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
You can test your setup with this `index.html` file:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!doctype html>
|
2024-06-09 14:00:10 +00:00
|
|
|
<html lang="en">
|
2024-03-16 06:43:37 +00:00
|
|
|
<head>
|
2024-06-09 14:00:10 +00:00
|
|
|
<title>Vite + Pyodide</title>
|
2024-03-16 06:43:37 +00:00
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
</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);
|
|
|
|
|
});
|
|
|
|
|
```
|
|
|
|
|
|
2024-06-09 14:00:10 +00:00
|
|
|
Make sure this works both in Vite's dev mode:
|
2024-03-16 06:43:37 +00:00
|
|
|
|
|
|
|
|
```
|
2024-06-09 14:00:10 +00:00
|
|
|
npx vite
|
2024-03-16 06:43:37 +00:00
|
|
|
```
|
|
|
|
|
|
2024-06-09 14:00:10 +00:00
|
|
|
And as a production build:
|
2024-03-16 06:43:37 +00:00
|
|
|
|
|
|
|
|
```
|
2024-06-09 14:00:10 +00:00
|
|
|
npx vite build
|
|
|
|
|
npx vite preview
|
2024-03-16 06:43:37 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
[optimizedeps]: https://vitejs.dev/guide/dep-pre-bundling.html
|
|
|
|
|
[pyodide webpack plugin]: https://github.com/pyodide/pyodide-webpack-plugin
|
