-
Notifications
You must be signed in to change notification settings - Fork 6
/
README.md
129 lines (93 loc) · 3.66 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
[![Node.js CI](https://github.com/pyodide/pyodide-webpack-plugin/actions/workflows/build-and-test.yml/badge.svg?branch=main)](https://github.com/pyodide/pyodide-webpack-plugin/actions/workflows/build-and-test.yml)
# 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
```
or
```
yarn add -D pyodide @pyodide/webpack-plugin
```
or
```
pnpm add -D pyodide @pyodide/webpack-plugin
```
Add the plugin to your webpack config
```js
const PyodidePlugin = require("@pyodide/webpack-plugin");
module.exports = {
plugins: [new PyodidePlugin()],
};
```
In your javascript application being bundled with webpack
```js
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](#globalLoadPyodide)
- [outDirectory](#outDirectory)
- [packageIndexUrl](#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](https://pyodide.org/en/stable/usage/api/js-api.html) 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](https://github.com/pyodide/pyodide-webpack-plugin/issues/8) deals with this error and pyodide esm. To fix this issue:
- `npm i -D url`
- Add a [fall back](https://webpack.js.org/configuration/resolve/#resolvefallback) to your webpack config
```js
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](https://webpack.js.org/configuration/module/#rule) to your webpack config
```js
{
test: /pyodide\.m?js$/,
use: [
{
loader: 'string-replace-loader',
options: {
search: 'import(',
replace: 'import(/* webpackIgnore: true */ '
}
}
]
}
```
## Contributing
Please view the [contributing guide](./CONTRIBUTING.md) 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://pyodide.org/en/stable/project/governance.html).
https://github.com/pyodide/pyodide/blob/main/CODE-OF-CONDUCT.md
## License
Pyodide Webpack Plugin uses the [Mozilla Public License Version 2.0](https://choosealicense.com/licenses/mpl-2.0/).