[Web] Add wasm and mjs files to package.json exports to improve bundler support#26394
Conversation
|
@fs-eire when I'm trying to run |
Looks like the CI passes, so this may indicate that you are not running |
|
@fs-eire Thanks for the info, I've added some e2e tests which test the said exports with |
|
@microsoft-github-policy-service agree |
|
/azp run Linux QNN CI Pipeline, Win_TRT_Minimal_CUDA_Test_CI, Windows ARM64 QNN CI Pipeline, Windows GPU Doc Gen CI Pipeline |
|
Azure Pipelines successfully started running 4 pipeline(s). |
…er support (microsoft#26394) ### Description Currently the files which are needed for wasm aren't exported from the package at all. The files in question are: ``` ort-wasm-simd-threaded.wasm ort-wasm-simd-threaded.jsep.wasm ort-wasm-simd-threaded.asyncify.wasm ort-wasm-simd-threaded.mjs ort-wasm-simd-threaded.jsep.mjs ort-wasm-simd-threaded.asyncify.mjs ``` This PR changes that and adds them to `exports` field in the `package.json`. ### Motivation and Context Bundlers like `webpack` use the `copyPlugin` to move those files into the `public` directory, so the files can be accessed by a stable url. However more advanced and "state of the art" bundlers like `vite` are able to [import asset urls directly](https://vite.dev/guide/assets.html#explicit-url-imports). Vite takes the asset, moves it to to public assets folder (possibily renames the asset and adds a hash etc.). The imported value then is the bundled assets final url. Those urls can then be used in the `env.wasm.wasmPaths` directly. In vites case the full code example is: ```js import wasmUrl from 'onnxruntime-web/ort-wasm-simd-threaded.wasm?url'; import mjsUrl from 'onnxruntime-web/ort-wasm-simd-threaded.mjs?url'; env.wasm.wasmPaths = { wasm: wasmUrl, mjs: mjsUrl, }; ``` With those added exports we can leverage more of the bundlers capabilities and in vites case there isn't any need to add any additional configs. It would just work. When importing we also get proper suggestions: <img width="1604" height="498" alt="imports" src="https://github.com/user-attachments/assets/2678ccc2-ae46-4289-aa6e-607ecbc5388b" /> ---- I would like additional tests to ensure that the exports are available, but I couldn't make the `e2e` tests work on my system. I would appreciate some guidance on that topic.
2 participants
Description
Currently the files which are needed for wasm aren't exported from the package at all.
The files in question are:
This PR changes that and adds them to
exportsfield in thepackage.json.Motivation and Context
Bundlers like
webpackuse thecopyPluginto move those files into thepublicdirectory, so the files can be accessed by a stable url. However more advanced and "state of the art" bundlers likeviteare able to import asset urls directly. Vite takes the asset, moves it to to public assets folder (possibily renames the asset and adds a hash etc.). The imported value then is the bundled assets final url.Those urls can then be used in the
env.wasm.wasmPathsdirectly. In vites case the full code example is:With those added exports we can leverage more of the bundlers capabilities and in vites case there isn't any need to add any additional configs. It would just work.
When importing we also get proper suggestions:
I would like additional tests to ensure that the exports are available, but I couldn't make the
e2etests work on my system. I would appreciate some guidance on that topic.