A lightweight bundler that transpiles and bundles deno typescript
files for the web.
Typescript as of today does throw an error if an import has a .ts
extension or a url.
import { foo } from "bar.ts" // Typescript Error
import * as path from "https://deno.land/std/path/mod.ts" // Typescript Error
Deno on the other hand does not allow the suspension of extensions.
import { foo } from "bar" // Deno Error
Bundler bundles deno syntax files (url imports, .ts extensions) for the web.
deno bundle
…Deno offers deno bundle
to transpile a file to a standalone module. This might work in some occations but is limited. Bundler works in a similar way to deno bundle
but splits dynamic imports to separate files and injects paths.
typescript
to javascript
for the webBundler is available as a CLI.
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 |
---|---|
-c, --config | Load tsconfig.json configuration file |
-d, --dir |
Name of out_dir |
-h, --help | Prints help information |
–importmap | UNSTABLE: Load import map file |
-o, --optimize | Minify source code |
-r, --reload | Reload source code |
-w, --watch | Watch files and re-bundle on change |
Bundler uses the Bundler API to transpile typescript
files to javascript
.
import { bundle } from "deno.land/x/bundler/mod.ts"
const inputMap = {
"src/index.ts": `console.log("Hello World")`
}
const outputMap = {
"src/index.ts": "dist/index.js"
}
const fileMap = await bundle(inputMap, outputMap)
Bundler CLI supports css imports by default. It supports postcss-preset-env with stage 2 features and nesting-rules enabled so you can use the latest css features out of the box.
Before
/* styles.css */
article {
& p {
color: #333;
}
}
import styles from "styles.css"
console.log(styles) // div { background: red; }
After
/* 380B7B38760DD442E897EB0164C58F6A17DA966CCACA6318017A468C163979B1.js */
export default `article p { color: #333; }`
import styles from "./380B7B38760DD442E897EB0164C58F6A17DA966CCACA6318017A468C163979B1.js"
console.log(styles) // div { background: red; }
This is a proof of concept registry. Do not use in production!
Author: timreichen
Source Code: https://github.com/timreichen/Bundler
#deno #nodejs #node #javascript