Use the Imba compiler (v2) to build all your *.imba files from source using snowpack.
# npm:
npm install --save-dev imba-snowpack
# yarn:
yarn --dev add imba-snowpackEdit snowpack.config.json to add the imba-snowpack plugin. Remove any other bundling plugins from snowpack, such as webpack or parcel, they are not needed.
{
"plugins": ["imba-snowpack"]
},If you need to install any NPM packages, add the name to the install script in the package.json file. Then run npm install or yarn once again.
"install": [
"cowsay"
],mkdir sample
cd sample
yarn init
yarn --dev add imba-snowpack{
"mount": {
"src": "/static",
"public": "/"
},
"plugins": ["imba-snowpack"],
"devOptions": {
"open": "default",
"bundle": true
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imba project</title>
</head>
<body>
<script type="module" src="/static/app-root.js"></script>
</body>
</html>// use TABS to indent the code. Check how you save the source in your editor!
tag app-root
def render
<self>
<h1> "It works!"
imba.mount <app-root>npx snowpack dev
Any time you modify the sources, the application will reload in the web browser (active and instant hmr).
Once ready to build for publishing on a web server, execute:
npx snowpack build
Copy the contents of ./build to your web server, or launch a local web server pointing to ./build.
Edit snowpack.config.json
- set
sourceMaptotrueinsideinstallOptions - set
bundletofalseinsidedevOptions
{
"mount": {
"src": "/static",
"public": "/"
},
"plugins": ["imba-snowpack"],
"installOptions": {
"sourceMap": true
},
"devOptions": {
"open": "default",
"bundle": false
}
}Launch npx snowpack build
Inspect the amazing Imba code transformation by uploading the generated .js files to the sourcemap visualizer.
Full details on all configuration options available at the snowpack website.
mount maps all your source directories to corresponding destination directories (found under ./build).
Development of source files takes place in the source directories only.
Assets placed in source directories will be copied as is to destination directories.
"mount": {
"source directory": "destination directory"
}All imba-snowpack plugin parameters are optional.
-
entrypointsdefines scripts loaded from html and forming the main entry points to your imba code. Can be.imbaor.js. Only the script name is relevant, path and extension are ignored. -
smartscanscans the<script>tags of all html files to find imba or javascript entrypoints. -
targetspecifies intended browser capabilities support. Check esbuild for additional details. -
splittingenables code splitting during production builds. This has not been tested. -
minifydoes code minification during production builds. -
debugadds debug logs.
Any additional imba-snowpack plugin parameters are passed directly to the Imba compiler.
"plugins": [
[
"imba-snowpack",
{
"entrypoints": ["main script for subproject 1", "main script for subproject 2"],
"smartscan": true,
"target": "es2017",
"splitting": false,
"minify": true,
"debug": false
}
]
]Setting sourceMap to true only has an effect during development (snowpack dev), or in production (snowpack build) once bundle is set to false.
"installOptions": {
"sourceMap": true
}snowpack dev sets up a local development web server. To launch a web browser, specify its name in open, otherwise set open to false.
Setting bundle to false skips the last bundling step. Useful to inspect the compiled .js files or to test run the modules comprising the application. If sourceMap is enabled, then the .js files are mapped to the .imba sources.
"devOptions": {
"open": "default",
"bundle": true
}Javascript code minification, if enabled, only happens during bundling for production.
"buildOptions": {
"minify": true
}