A Bundler with the web in mind.
- Bundler
Bundler is a web bundler for deno. It allows to write code for the web like we are used to with deno.
- handles relative and absolute imports as well as url imports
- handles dynamic
import()
andfetch()
statements - handles
css
@import
statements and supports postcss-preset-env stage 2 and nesting-rules by default - smart splits dependencies
- handles
html
<link>
,<script>
,<img>
and<style>
tags,<div style="">
attributes as well aswebmanifest
files - handles
WebWorker
andServiceWorker
imports - handles
ts
,tsx
,js
,jsx
html
,css
,json
,png
,jpg
,jpeg
,ico
,svg
,wasm
- built in code optimazation and minification with
--optimize
option - built in file watcher with
--watch
option
deno emit
can transpile and bundle a file to a standalone module. This might
work for some occations but is limited to script files. Bundler works similar to
deno emit
but with the web in mind.
deno install --unstable --allow-read --allow-write --allow-net --allow-env --name bundler https://deno.land/x/bundler/cli.ts
Info: You might need to specify --root /usr/local
.
bundler bundle index.ts=index.js
Option | Description | Default |
---|---|---|
-c, --config <FILE> | Load tsconfig.json configuration file | {} |
--out-dir <DIR> | Name of out_dir | "dist" |
-h, --help | Prints help information | |
--import-map <FILE> | UNSTABLE: Load import map file | {} |
--optimize | Optimize source code | false |
-L, --log-level | Set log level [possible values: debug, info] | debug |
-q, --quiet | Suppress diagnostic output | false |
-r, --reload | Reload source code | false |
--watch | Watch files and re-bundle on change | false |
The file path must end with .ts
, .tsx
, .js
, .jsx
.
Typescript code will be transpiled into javascript code.
Bundler will bundle javascript
sources toghether similar to deno bundle
but
smart split dependencies and inject other file paths.
Bundler will optimize and minify code with the --optimize
option.
Bundler extracts dependencies from the following statements:
Name | Example | Support |
---|---|---|
Imports | ||
default import |
|
✅ |
import statement |
|
✅ |
named import |
import { x } from "./x.ts"; |
✅ |
namespace import |
import * as x from "./x.ts"; |
✅ |
Exports | ||
default export |
export default "./x.ts"; |
✅ |
variable export |
export const x = "x"; |
✅ |
function export |
export function x() {} |
✅ |
class export |
export class X {} |
✅ |
named export |
export { x } from "./x.ts"; |
✅ |
namespace export |
export * as x from "./x.ts"; |
✅ |
unnamed export |
export * from "./x.ts"; |
✅ |
Others | ||
fetch statement |
fetch("./x.ts"); |
✅ |
WebWorker |
new Worker("./x.ts"); |
✅ |
ServiceWorker |
navigator.serviceWorker.register("./x.ts"); |
✅ |
The file must end with .json
or any kind of extension.
A json
file will be transformed into an esm module if it is imported diretcly
into typescript or javascript.
/* src/data.json */
{
"foo": "bar"
}
/* src/x.ts */
import data from "./data.json";
console.log(data); // { "foo": "bar" }
Bundler will minify code with the --optimize
option.
Webmanifest files are specially treated json
files and src properties in
icons
are extracted as dependencies.
<!-- src/index.html -->
<html>
<head>
<link rel="manifest" href="manifest.json">
</head>
<body>
</body>
</html>
// src/manifest.json
{
"icons": [
{
"src": "images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}
]
}
The file can have any extension but must be imported with rel="webmanifest"
.
Bundler does not yet minify code with the --optimize
option.
Bundler extracts dependencies from the following statements:
Name | Example | Support |
---|---|---|
script tag |
|
✅ |
inline script |
|
✅ |
link tag |
|
✅ |
img tag |
|
✅ |
style tag |
|
✅ |
style attribute |
|
✅ |
The file must have .css
extension.
A css file will be transformed into a esm module with a default string export if it is imported into typescript or javascript.
/* src/style.json */
div {
color: red;
}
/* src/x.ts */
import data from "./style.css";
console.log(data); // div { color: red }
Bundler will optimize and minify code with the --optimize
option.
postcss-preset-env with stage 2 features and nesting-rules is enabled by default so you can use the latest css features out of the box.
The functionality of css has grown in recent years and is native to browsers. Therefore bundler focuses on making css usage really easy instead of supporting preprocessors like sass, scss, less or stylus. Most features a preprocessor does should be covered with todays css and postcss.
The file must have .ico
, .png
, .jpg
, .jpeg
or .svg
extension.
Bundler does not yet optimize or compress images with the --optimize
option.
wasm files cannot be imported directly into typescript or javascript (yet), so
they will not be transformed in any way. Instead they should be fetched with via
fetch API
.
Bundler does not optimize or compress wasm with the --optimize
option.
Bundler automatically analyzes the dependency graph and splits dependencies into separate files, if the code is used in different entry points. This prevents code duplication and allows bundle files to share code. You can check out this example to see smart splitting in action.
This module requires deno to run with the --unstable
flag. It is likely to
change in the future.