@pyodide/webpack-plugin NPM

Pyodide Webpack Plugin

A Webpack plugin for integrating pyodide into your project.

works with pyodide >=0.21.3

Getting Started

Install pyodide and @pyodide/webpack-plugin

npm install --save-dev pyodide @pyodide/webpack-plugin

yarn add -D pyodide @pyodide/webpack-plugin

pnpm add -D pyodide @pyodide/webpack-plugin

Add the plugin to your webpack config

const PyodidePlugin = require("@pyodide/webpack-plugin");

module.exports = {
  plugins: [new PyodidePlugin()],
};

In your javascript application being bundled with webpack

async function main() {
  let pyodide = await loadPyodide({ indexURL: `${window.location.origin}/pyodide` });
  // Pyodide is now ready to use...
  console.log(
    pyodide.runPython(`
    import sys
    sys.version
  `)
  );
}
main();

Options

globalLoadPyodide
outDirectory
packageIndexUrl

globalLoadPyodide

Type: boolean\ Default: false\ Required: false\ Description:Whether or not to expose loadPyodide method globally. A globalThis.loadPyodide is useful when using pyodide as a standalone script or in certain frameworks. With webpack we can scope the pyodide package locally to prevent leaks (default).

outDirectory

Type: string\ Default: pyodide\ Required: false\ Description: Relative path to webpack root where you want to output the pyodide files.

packageIndexUrl

Type: string\ Default: https://cdn.jsdelivr.net/pyodide/v${installedPyodideVersion}/full/\ Required: false\ Description: CDN endpoint for python packages. This option differs from loadPyodide indexUrl in that it only impacts pip packages and does not affect the location the main pyodide runtime location. Set this value to "" if you want to keep the pyodide default of accepting the indexUrl.

Known issues with esm

Depending on your webpack configuration you may run into issues with webpack trying to parse your pyodide.mjs file.

Can't resolve 'url' in ...

Issue #8 deals with this error and pyodide esm. To fix this issue:

npm i -D url

Add a fall back to your webpack config

resolve: {
  fallback: {
    url: require.resolve("url/"),
  },
},

Cannot find module '<...>/pyodide.asm.js.

This can happen when webpack munges esm import statements to __webpack_require__ when you actually intend import to work in the browser.

npm i -D string-replace-loader

Add a rule to your webpack config

{
  test: /pyodide\.m?js$/,
  use: [
    {
      loader: 'string-replace-loader',
      options: {
        search: 'import(',
        replace: 'import(/* webpackIgnore: true */ '
      }
    }
  ]
}

Contributing

Please view the contributing guide for tips on filing issues, making changes, and submitting pull requests. Pyodide is an independent and community-driven open-source project. The decision-making process is outlined in the Project governance.

https://github.com/pyodide/pyodide/blob/main/CODE-OF-CONDUCT.md