Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/parkertomatoes/ds4qb-web-example-vite
Example of using ds4qb-web with Vite
https://github.com/parkertomatoes/ds4qb-web-example-vite
Last synced: 19 days ago
JSON representation
Example of using ds4qb-web with Vite
- Host: GitHub
- URL: https://github.com/parkertomatoes/ds4qb-web-example-vite
- Owner: parkertomatoes
- License: mit
- Created: 2024-12-14T21:21:08.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2024-12-15T14:17:19.000Z (27 days ago)
- Last Synced: 2024-12-15T15:25:42.280Z (27 days ago)
- Language: JavaScript
- Size: 1.42 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ds4qb-web Example Application
This repo provides an example of using ds4qb-web in a Vite application.
Try it out:
[](https://stackblitz.com/github/parkertomatoes/ds4qb-web-example-vite)
## Getting Started
ds4qb-web can be used in a Vite application, but needs a few configuration tweaks:
1. Bundle V86
2. Disable some dependency optimization
After that, the library can be used as expected
3. HTML
4. CSS
5. Javascript
### 1. Bring your own V86
ds4qb-web uses the V86 emulator to emulate a DOS PC, but V86 is not distributed in a bundler-friendly package. To avoid packaging issues, V86 should be [downloaded](https://github.com/copy/v86/releases/tag/latest) and included as a static asset by placing it in the public folder, or using [vite-plugin-static-copy](https://www.npmjs.com/package/vite-plugin-static-copy) plugin:
```js
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { defineConfig } from 'vite';
export default defineConfig({
// ...
plugins: [
viteStaticCopy({
targets: [
{
src: './v86',
dest: 'v86'
}
]
})
],
// ...
});
```
V86 requires a few other static assets, which should be copied the same way:
* An x86 BIOS image (e.g. [seabios](https://github.com/coreboot/seabios))
* A VGA BIOS ([Bochs](https://github.com/bochs-emu/VGABIOS) includes a good one)
* A DOS boot disk ([FreeDOS](https://www.freedos.org/) or MS-DOS)
### 2. Disable dependency optimizations for fatfs-wasm and chiptune3
Vite dependency optimization has issues in dev mode bundling Webassembly and worker scripts. Leaving this out makes these libraries work in Vite's dev mode:
```js
import { defineConfig } from 'vite';
export default defineConfig({
// ...
optimizeDeps: {
exclude: ['fatfs-wasm', 'chiptune3']
}
// ...
});
```
### 3. HTML
In the HTML of your page, you need to include V86 with a `` tag before your own script:
```html
<!DOCTYPE html>
<html>
<head>
<!-- Include V86 first to add the object to window -->
<script src="v86/libv86.js">