onnxruntime/js/web/test/e2e/exports/testcases/vite-default.md
Yulong Wang 0627a6cb93
[js/web] fix package export for bundlers (#23257)
### Description
<!-- Describe your changes. -->

This PR tries to fix #22615. (see detailed description in the issue)

A perfect solution would be too difficult to make, because there are a
huge number of combinations of usage scenarios, including combinations
of development framework, bundler, dev/prod mode, and so on.

This PR is using the following approach:
- Introduce a new type of end to end test: export test. This type of
tests are complete web apps that use popular web development frameworks,
and the tests are using puppeteer to run the apps and check if the apps
can run without error.
  - added one nextjs based web app and one vite based web app.
- In the test, perform the following test steps:
  - `npm install` for packages built locally
- `npm run dev` to start dev server and use puppeteer to launch the
browser to test
- `npm run build && npm run start` to test prod build and use puppeteer
to launch the browser to test
- Make changes to ort-web, including:
- special handling on Webpack's behavior of rewriting `import.meta.url`
to a `file://` string
  - revise build definitions
  - fix wasm URL for proxy, if used in a bundled build
2025-01-09 11:01:00 -08:00

1.2 KiB

vite-default

Summary

This is a web application created by npm create vite@latest using the following config:

<ORT_ROOT>\js\web\test\e2e\exports\testcases>npm create vite@latest

> npx
> create-vite

√ Project name: ... vite-default
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in <ORT_ROOT>\js\web\test\e2e\exports\testcases\vite-default...

Done. Now run:

  cd vite-default
  npm install
  npm run dev

Small changes were made based on the application template, including:

  • Remove default Logos, images, CSS and SVG
  • Add a client side rendering (CSR) component which contains:
    • a checkbox for multi-thread
    • a checkbox for proxy
    • a "Load Model" button
    • a "Run Model" button
    • a state DIV
    • a log DIV
  • Add a helper module for creating ORT session and run

Tests

Uses puppeteer to simulate the following tests:

  • Tests on npm run dev (dev server)
    • multi-thread OFF, proxy OFF
    • multi-thread OFF, proxy ON
    • multi-thread ON, proxy OFF
    • multi-thread ON, proxy ON
  • Tests on npm run build + npm run start (prod)
    • multi-thread OFF, proxy OFF
    • multi-thread OFF, proxy ON
    • multi-thread ON, proxy OFF
    • multi-thread ON, proxy ON