mirror of
https://github.com/maplibre/maplibre-rs.git
synced 2025-12-08 19:05:57 +00:00
473 lines
27 KiB
HTML
473 lines
27 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en" class="light" dir="ltr">
|
|
<head>
|
|
<!-- Book generated using mdBook -->
|
|
<meta charset="UTF-8">
|
|
<title>Web - MapLibre Rust Documentation</title>
|
|
|
|
|
|
<!-- Custom HTML head -->
|
|
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="icon" href="../../favicon.svg">
|
|
<link rel="shortcut icon" href="../../favicon.png">
|
|
<link rel="stylesheet" href="../../css/variables.css">
|
|
<link rel="stylesheet" href="../../css/general.css">
|
|
<link rel="stylesheet" href="../../css/chrome.css">
|
|
<link rel="stylesheet" href="../../css/print.css" media="print">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
|
|
<link rel="stylesheet" href="../../fonts/fonts.css">
|
|
|
|
<!-- Highlight.js Stylesheets -->
|
|
<link rel="stylesheet" href="../../highlight.css">
|
|
<link rel="stylesheet" href="../../tomorrow-night.css">
|
|
<link rel="stylesheet" href="../../ayu-highlight.css">
|
|
|
|
<!-- Custom theme stylesheets -->
|
|
<link rel="stylesheet" href="../../diff.css">
|
|
|
|
</head>
|
|
<body class="sidebar-visible no-js">
|
|
<div id="body-container">
|
|
<!-- Provide site root to javascript -->
|
|
<script>
|
|
var path_to_root = "../../";
|
|
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
|
</script>
|
|
|
|
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
|
<script>
|
|
try {
|
|
var theme = localStorage.getItem('mdbook-theme');
|
|
var sidebar = localStorage.getItem('mdbook-sidebar');
|
|
|
|
if (theme.startsWith('"') && theme.endsWith('"')) {
|
|
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
|
}
|
|
|
|
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
|
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
|
}
|
|
} catch (e) { }
|
|
</script>
|
|
|
|
<!-- Set the theme before any content is loaded, prevents flash -->
|
|
<script>
|
|
var theme;
|
|
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
|
if (theme === null || theme === undefined) { theme = default_theme; }
|
|
var html = document.querySelector('html');
|
|
html.classList.remove('light')
|
|
html.classList.add(theme);
|
|
var body = document.querySelector('body');
|
|
body.classList.remove('no-js')
|
|
body.classList.add('js');
|
|
</script>
|
|
|
|
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
|
|
|
|
<!-- Hide / unhide sidebar before it is displayed -->
|
|
<script>
|
|
var body = document.querySelector('body');
|
|
var sidebar = null;
|
|
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
|
|
if (document.body.clientWidth >= 1080) {
|
|
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
|
sidebar = sidebar || 'visible';
|
|
} else {
|
|
sidebar = 'hidden';
|
|
}
|
|
sidebar_toggle.checked = sidebar === 'visible';
|
|
body.classList.remove('sidebar-visible');
|
|
body.classList.add("sidebar-" + sidebar);
|
|
</script>
|
|
|
|
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
|
<div class="sidebar-scrollbox">
|
|
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../../introduction.html">Introduction</a></li><li class="chapter-item expanded affix "><a href="../../supported-platforms.html">Supported Platforms</a></li><li class="chapter-item expanded affix "><a href="../../developer-log.html">Developer Log</a></li><li class="chapter-item expanded "><a href="../../user-guide/index.html"><strong aria-hidden="true">1.</strong> User Guide</a></li><li class="chapter-item expanded "><a href="../../development-guide/index.html"><strong aria-hidden="true">2.</strong> Development Guide</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../development-guide/how-to-run.html"><strong aria-hidden="true">2.1.</strong> How to Run Demos</a></li><li class="chapter-item expanded "><a href="../../development-guide/building-libraries.html"><strong aria-hidden="true">2.2.</strong> Building Libraries</a></li><li class="chapter-item expanded "><a href="../../development-guide/debugging.html"><strong aria-hidden="true">2.3.</strong> Debugging</a></li></ol></li><li class="chapter-item expanded "><a href="../../development-documents/index.html"><strong aria-hidden="true">3.</strong> Development Documents</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../development-documents/architecture.html"><strong aria-hidden="true">3.1.</strong> Architecture</a></li><li class="chapter-item expanded "><a href="../../development-documents/design.html"><strong aria-hidden="true">3.2.</strong> Design</a></li><li class="chapter-item expanded "><a href="../../development-documents/caching.html"><strong aria-hidden="true">3.3.</strong> Caching</a></li><li class="chapter-item expanded "><a href="../../development-documents/stencil-masking.html"><strong aria-hidden="true">3.4.</strong> Stencil Masking</a></li><li class="chapter-item expanded "><a href="../../development-documents/font-rendering.html"><strong aria-hidden="true">3.5.</strong> Font Rendering</a></li><li class="chapter-item expanded "><a href="../../development-documents/library-packaging.html"><strong aria-hidden="true">3.6.</strong> Library Packaging</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../development-documents/library-packaging/apple.html"><strong aria-hidden="true">3.6.1.</strong> Apple</a></li><li class="chapter-item expanded "><a href="../../development-documents/library-packaging/android.html"><strong aria-hidden="true">3.6.2.</strong> Android</a></li><li class="chapter-item expanded "><a href="../../development-documents/library-packaging/web.html" class="active"><strong aria-hidden="true">3.6.3.</strong> Web</a></li></ol></li></ol></li><li class="chapter-item expanded "><a href="../../appendix/index.html"><strong aria-hidden="true">4.</strong> Appendix</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../appendix/link-collection.html"><strong aria-hidden="true">4.1.</strong> Link Collection</a></li></ol></li><li class="chapter-item expanded "><a href="../../rfc/0001-rfc-process.html"><strong aria-hidden="true">5.</strong> RFCs</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../../rfc/0000-template.html"><strong aria-hidden="true">5.1.</strong> 0000-template</a></li><li class="chapter-item expanded "><a href="../../rfc/0001-rfc-process.html"><strong aria-hidden="true">5.2.</strong> 0001-rfc-process</a></li></ol></li></ol>
|
|
</div>
|
|
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
|
|
<div class="sidebar-resize-indicator"></div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Track and set sidebar scroll position -->
|
|
<script>
|
|
var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
|
|
sidebarScrollbox.addEventListener('click', function(e) {
|
|
if (e.target.tagName === 'A') {
|
|
sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
|
|
}
|
|
}, { passive: true });
|
|
var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
|
|
sessionStorage.removeItem('sidebar-scroll');
|
|
if (sidebarScrollTop) {
|
|
// preserve sidebar scroll position when navigating via links within sidebar
|
|
sidebarScrollbox.scrollTop = sidebarScrollTop;
|
|
} else {
|
|
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
|
|
var activeSection = document.querySelector('#sidebar .active');
|
|
if (activeSection) {
|
|
activeSection.scrollIntoView({ block: 'center' });
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div id="page-wrapper" class="page-wrapper">
|
|
|
|
<div class="page">
|
|
<div id="menu-bar-hover-placeholder"></div>
|
|
<div id="menu-bar" class="menu-bar sticky">
|
|
<div class="left-buttons">
|
|
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
|
<i class="fa fa-bars"></i>
|
|
</label>
|
|
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
|
<i class="fa fa-paint-brush"></i>
|
|
</button>
|
|
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
|
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
|
|
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
|
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
|
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
|
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
|
</ul>
|
|
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<h1 class="menu-title">MapLibre Rust Documentation</h1>
|
|
|
|
<div class="right-buttons">
|
|
<a href="../../print.html" title="Print this book" aria-label="Print this book">
|
|
<i id="print-button" class="fa fa-print"></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="search-wrapper" class="hidden">
|
|
<form id="searchbar-outer" class="searchbar-outer">
|
|
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
|
</form>
|
|
<div id="searchresults-outer" class="searchresults-outer hidden">
|
|
<div id="searchresults-header" class="searchresults-header"></div>
|
|
<ul id="searchresults">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
|
<script>
|
|
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
|
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
|
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
|
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
|
});
|
|
</script>
|
|
|
|
<div id="content" class="content">
|
|
<main>
|
|
<h1 id="web"><a class="header" href="#web">Web</a></h1>
|
|
<p>This document describes issues and challenges when packaging maplibre-rs as a npm package.</p>
|
|
<h2 id="required-formats"><a class="header" href="#required-formats">Required Formats</a></h2>
|
|
<h3 id="esm"><a class="header" href="#esm">ESM</a></h3>
|
|
<p>The ESM module format is the standard nowadays which should be followed. If a JS bundler encounters an ESM
|
|
module it can resolve WebAssembly files or WebWorkers dynamically.
|
|
The following syntax is used to resolve referenced WebWorkers:</p>
|
|
<pre><code class="language-ts">new Worker(new URL("./multithreaded-pool.worker.ts", import.meta.url), {
|
|
type: 'module'
|
|
});
|
|
</code></pre>
|
|
<p>Similarly, the following works:</p>
|
|
<pre><code class="language-ts">new URL('index_bg.wasm', import.meta.url);
|
|
</code></pre>
|
|
<h3 id="iife-immediately-invoked-function-expression"><a class="header" href="#iife-immediately-invoked-function-expression">IIFE (immediately-invoked function expression)</a></h3>
|
|
<blockquote>
|
|
<p>This format is used when including maplibre-rs in a <code><script></code> tag. The library is "written" onto the window/global
|
|
object. This allows quick prototyping/playgrounds/experiments using maplibre-rs.</p>
|
|
</blockquote>
|
|
<p>In order to support this we need to create a bundle which works on any modern browser. Additionally, a WASM file and
|
|
WebWorker needs to be deployed at a predictable path, because there is no bundler active which manages assets. Users of
|
|
these libraries have to specify where WASM or non-inlined WebWorkers are located.</p>
|
|
<p>Both assets could be inlined theoretically. This is common for WebWorkers, but not for WASM files.</p>
|
|
<h3 id="umd"><a class="header" href="#umd">UMD</a></h3>
|
|
<blockquote>
|
|
<p>UMD modules are needed when creating a library which should run in Node as well as browsers. This is not a use case
|
|
for maplibre-rs. If we support node, then we probably would ship a separate package called "maplibre-rs-node" which
|
|
bundles to CJS directly.</p>
|
|
</blockquote>
|
|
<h3 id="cjscommonjs"><a class="header" href="#cjscommonjs">CJS/CommonJS</a></h3>
|
|
<blockquote>
|
|
<p>Not needed for the browser build of maplibre-rs, possibly needed when supporting Node</p>
|
|
</blockquote>
|
|
<p>With a CommonJS module its is not possible for bundlers to dynamically resolve WebWorkers or WASM files.</p>
|
|
<p>The <code>import.meta.url</code> token can not exist in a CommonJS module. Therefore, bundlers which encounter a CommonJS module
|
|
have to use a different mechanism of resolving files.</p>
|
|
<p>Generally, we do not need to support CommonJS, because we are not targeting Node with maplibre-rs. It's properly good to
|
|
support it as a fallback though, for bundlers which can not deal with ESM modules yet.
|
|
This is for example true for test runners like Jest which require that dependencies are available as CJS module.</p>
|
|
<h2 id="wasm-pack-output"><a class="header" href="#wasm-pack-output">wasm-pack output</a></h2>
|
|
<p>wasm-pack can output <a href="https://rustwasm.github.io/docs/wasm-pack/commands/build.html#target">multiple formats</a>. The <code>web</code>
|
|
and <code>bundler</code> outputs offer the most modular modules.
|
|
Unfortunately, the
|
|
function <a href="https://docs.rs/wasm-bindgen/0.2.80/src/wasm_bindgen/lib.rs.html#1208-1217">wasm_bindgen::module()</a>
|
|
is only supported in <code>web</code> and <code>no-modules</code>. We currently are using this in order to send loaded instances
|
|
of <code>WebAssembly.Module</code> to WebWorkers. <code>nodejs</code> should not be used because MapLibre does not target Node.
|
|
Therefore, we should stick to the <code>web</code> output format.</p>
|
|
<h2 id="required-features"><a class="header" href="#required-features">Required Features</a></h2>
|
|
<ul>
|
|
<li>WASM Bundling: Make the WASM binary available to users of the maplibre-rs library</li>
|
|
<li>WebWorker Bundling: Make the WebWorker available to users of the maplibre-rs library. This could also be achived by inlining.</li>
|
|
<li>WebWorker Inlining: Inline the WebWorker bundle in the library bundle as a string.</li>
|
|
<li>Predictable Paths: Without predictable paths, it's difficult for users to reference the wasm file directly from the <code>node_modules</code> directory if requried.</li>
|
|
</ul>
|
|
<h2 id="bundler-feature-comparison"><a class="header" href="#bundler-feature-comparison">Bundler Feature Comparison</a></h2>
|
|
<div class="table-wrapper"><table><thead><tr><th>Bundler</th><th><em>ESM</em></th><th><em>IIFE</em></th><th>CJS</th><th>UMD</th><th><em>WebWorker Inlining</em></th><th>Web Worker Bundling</th><th><em>WASM Bundling</em></th><th><em>Predictable Paths</em></th><th>Inlining Environment Variables</th></tr></thead><tbody>
|
|
<tr><td>Babel 1)</td><td>✅</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td></tr>
|
|
<tr><td>TypeScript 1)</td><td>✅</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>❌</td><td>✅</td><td>❌</td></tr>
|
|
<tr><td>Webpack</td><td>❌ 4)</td><td>❓</td><td>❌</td><td>❓</td><td>❌ 2)</td><td>✅</td><td>✅</td><td>❓</td><td>✅</td></tr>
|
|
<tr><td>Parcel</td><td>✅</td><td>❌</td><td>✅</td><td>❌</td><td>🛠️ 3)</td><td>✅</td><td>✅</td><td>❌ 5)</td><td>✅</td></tr>
|
|
<tr><td>ESBuild</td><td>✅</td><td>✅</td><td>✅</td><td>❌</td><td>✅ 6)</td><td>❓</td><td>✅ 6)</td><td>✅</td><td>✅</td></tr>
|
|
<tr><td>Rollup</td><td>❓</td><td>❓</td><td>❓</td><td>❓</td><td>❓</td><td>❓</td><td>❓</td><td>❓</td><td>✅</td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
<p>Features in <em><strong>italic</strong></em>s are required for maplibre-rs.</p>
|
|
<blockquote>
|
|
<ol>
|
|
<li>Technically not a bundler but can be used to emit ES modules</li>
|
|
<li>Was Supported in Webpack 4, but currently is not supported</li>
|
|
<li>https://github.com/parcel-bundler/parcel/issues/8004</li>
|
|
<li>As of the time of writing Webpack can not output ESM libraries</li>
|
|
<li>Plugins exist, but they don't work reliably</li>
|
|
<li>Plugins exist, and work reliably</li>
|
|
</ol>
|
|
</blockquote>
|
|
<h3 id="esbuild"><a class="header" href="#esbuild">ESBuild</a></h3>
|
|
<p>ESBuild supports CJS, ESM and IIFI modules equally well. Plugins exist for WebWorker inlining and resolving assets
|
|
through <code>import.meta.url</code>. The plugin quality seems to be superior compared to Parcel. It is also very fast compared to
|
|
all other bundlers.</p>
|
|
<ul>
|
|
<li>IIFI: The esbuild bundler translates to <code>new URL('index_bg.wasm', import.meta.url);</code> to
|
|
<pre><code class="language-js">var __currentScriptUrl__ = document.currentScript && document.currentScript.src || document.baseURI;
|
|
new URL("./assets/index_bg.wasm?emit=file", __currentScriptUrl__);
|
|
</code></pre>
|
|
</li>
|
|
</ul>
|
|
<p>See config in <code>web/lib/build.mjs</code> for an example usage.</p>
|
|
<h3 id="babel--typescript"><a class="header" href="#babel--typescript">Babel & TypeScript</a></h3>
|
|
<p>Babel and TypeScript both can produce ESM modules, but they <strong>fail with transforming references within the source code</strong>
|
|
like <code>new URL("./multithreaded-pool.worker.ts", import.meta.url)</code>. There exist some Babel plugins, but none of them is stable.
|
|
Therefore, we actually need a proper bundler which supports outputting ESM modules.
|
|
The only stable solution to this is Parcel. Parcel also has good documentation around the bundling of WebWorkers.</p>
|
|
<h3 id="webpack"><a class="header" href="#webpack">WebPack</a></h3>
|
|
<p>WebPack supports older module formats like CommonJS or UMD very well. It falls short when bundling the format ESM
|
|
format which is not yet stable. It also does not support inlining WebWorkers in version 5. The wasm-pack plugin
|
|
for WebPack makes including Cargo projects easy.</p>
|
|
<ul>
|
|
<li>CJS: Webpack translates <code>new URL('index_bg.wasm', import.meta.url);</code> to something that is equivalent to <code>'./index_bg.wasm'</code>
|
|
. It just expects that assets are resolvable from the current file.</li>
|
|
</ul>
|
|
<p>Example scripts for <code>package.json</code>:</p>
|
|
<pre><code class="language-json">{
|
|
"scripts": {
|
|
"webpack": "webpack --mode=development",
|
|
"webpack-webgl": "npm run build -- --env webgl",
|
|
"webpack-production": "webpack --mode=production",
|
|
"webpack-webgl-production": "npm run production-build -- --env webgl"
|
|
}
|
|
}
|
|
</code></pre>
|
|
<p>Example config:</p>
|
|
<pre><code class="language-js">const path = require("path");
|
|
const webpack = require("webpack");
|
|
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
|
|
|
|
let dist = path.join(__dirname, 'dist/maplibre-rs');
|
|
module.exports = (env) => ({
|
|
mode: "development",
|
|
entry: "./src/index.ts",
|
|
experiments: {
|
|
syncWebAssembly: true,
|
|
},
|
|
performance: {
|
|
maxEntrypointSize: 400000,
|
|
maxAssetSize: 400000000,
|
|
},
|
|
output: {
|
|
path: dist,
|
|
filename: "maplibre-rs.js",
|
|
library: {
|
|
name: 'maplibre_rs',
|
|
type: 'umd',
|
|
},
|
|
},
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.ts$/,
|
|
exclude: /node_modules/,
|
|
use: [
|
|
{
|
|
loader: 'ts-loader',
|
|
options: {}
|
|
}
|
|
]
|
|
},
|
|
],
|
|
},
|
|
resolve: {
|
|
extensions: ['.ts', '.js'],
|
|
},
|
|
plugins: [
|
|
new webpack.DefinePlugin({
|
|
'process.env.WEBGL': !!env.webgl
|
|
}),
|
|
new WasmPackPlugin({
|
|
crateDirectory: path.resolve(__dirname, '../'),
|
|
|
|
// Check https://rustwasm.github.io/wasm-pack/book/commands/build.html for
|
|
// the available set of arguments.
|
|
//
|
|
// Optional space delimited arguments to appear before the wasm-pack
|
|
// command. Default arguments are `--verbose`.
|
|
//args: '--log-level warn',
|
|
// Default arguments are `--typescript --target browser --mode normal`.
|
|
extraArgs: ` --target web -- . -Z build-std=std,panic_abort ${env.webgl ? '--features web-webgl' : ''} ${env.tracing ? '--features trace' : ''}`,
|
|
|
|
// Optional array of absolute paths to directories, changes to which
|
|
// will trigger the build.
|
|
// watchDirectories: [
|
|
// path.resolve(__dirname, "another-crate/src")
|
|
// ],
|
|
|
|
// The same as the `--out-dir` option for `wasm-pack`
|
|
outDir: path.resolve(__dirname, 'src/wasm-pack'),
|
|
|
|
// The same as the `--out-name` option for `wasm-pack`
|
|
// outName: "index",
|
|
|
|
// If defined, `forceWatch` will force activate/deactivate watch mode for
|
|
// `.rs` files.
|
|
//
|
|
// The default (not set) aligns watch mode for `.rs` files to Webpack's
|
|
// watch mode.
|
|
// forceWatch: true,
|
|
|
|
// If defined, `forceMode` will force the compilation mode for `wasm-pack`
|
|
//
|
|
// Possible values are `development` and `production`.
|
|
//
|
|
// the mode `development` makes `wasm-pack` build in `debug` mode.
|
|
// the mode `production` makes `wasm-pack` build in `release` mode.
|
|
// forceMode: "production",
|
|
|
|
// Controls plugin output verbosity, either 'info' or 'error'.
|
|
// Defaults to 'info'.
|
|
// pluginLogLevel: 'info'
|
|
}),
|
|
]
|
|
});
|
|
</code></pre>
|
|
<h3 id="parcel"><a class="header" href="#parcel">Parcel</a></h3>
|
|
<p>Parcel supports CommonJS and ESM modules equally good. The documentation about <code>import.meta.url</code> is very good. In other
|
|
bundlers documentations around this feature is missing. In the latest Parcel version inlining WebWorkers is not working.</p>
|
|
<ul>
|
|
<li>CJS: The Parcel bundler translates to <code>new URL('index_bg.wasm', import.meta.url);</code>
|
|
to <code>new URL("index_bg.wasm", "file:" + __filename);</code>
|
|
While depending on <code>file:</code> and <code>filename</code> works for NodeJS, it is unsupported in the browser.</li>
|
|
</ul>
|
|
<p>Example scripts for <code>package.json</code>:</p>
|
|
<pre><code class="language-json">{
|
|
"scripts": {
|
|
"parcel": "npm run clean && npm run wasm-pack && WEBGL=false parcel build --no-cache src/index.ts",
|
|
"parcel-webgl": "npm run clean && FEATURES=web-webgl npm run wasm-pack && WEBGL=true parcel build --no-cache src/index.ts"
|
|
}
|
|
}
|
|
</code></pre>
|
|
<p>Example config in `package.json:</p>
|
|
<pre><code class="language-json">{
|
|
"module": "dist/parcel-esm/module.js",
|
|
"main": "dist/parcel-cjs/main.js",
|
|
"types": "dist/parcel/types.d.ts",
|
|
"targets": {
|
|
"main": {
|
|
"distDir": "./dist/parcel-cjs",
|
|
"context": "browser",
|
|
"outputFormat": "commonjs"
|
|
},
|
|
"module": {
|
|
"distDir": "./dist/parcel-esm",
|
|
"context": "browser",
|
|
"outputFormat": "esmodule"
|
|
}
|
|
},
|
|
"@parcel/transformer-js": {
|
|
"inlineFS": false,
|
|
"inlineEnvironment": [
|
|
"WEBGL"
|
|
]
|
|
}
|
|
}
|
|
</code></pre>
|
|
<h3 id="rollup"><a class="header" href="#rollup">Rollup</a></h3>
|
|
<p>Not yet evaluated</p>
|
|
|
|
</main>
|
|
|
|
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
<!-- Mobile navigation buttons -->
|
|
<a rel="prev" href="../../development-documents/library-packaging/android.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
<i class="fa fa-angle-left"></i>
|
|
</a>
|
|
|
|
<a rel="next prefetch" href="../../appendix/index.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
<i class="fa fa-angle-right"></i>
|
|
</a>
|
|
|
|
<div style="clear: both"></div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
<a rel="prev" href="../../development-documents/library-packaging/android.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
<i class="fa fa-angle-left"></i>
|
|
</a>
|
|
|
|
<a rel="next prefetch" href="../../appendix/index.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
<i class="fa fa-angle-right"></i>
|
|
</a>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
window.playground_copyable = true;
|
|
</script>
|
|
|
|
|
|
<script src="../../elasticlunr.min.js"></script>
|
|
<script src="../../mark.min.js"></script>
|
|
<script src="../../searcher.js"></script>
|
|
|
|
<script src="../../clipboard.min.js"></script>
|
|
<script src="../../highlight.js"></script>
|
|
<script src="../../book.js"></script>
|
|
|
|
<!-- Custom JS scripts -->
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|