Deno To Bundle A Simple Map

Recently I was started to explore Deno, because is hype and is an interesting tool for JS Developers. If you don’t know Deno basically is a runtime for JS and Typescript … that’s all.

Deno presents a lot of interesting features: include last features of ES, is secure environment, typescript out of the box, inspired by the web, etc.

Nothing is better to test an environment that code some sample, so I decided to make a little Google Maps sample (Download and make the setup to can run sample and understand this post).

Project structure

The first thing I notice is the import, we don’t need babel to use import and syntax is a little different compared with another tools or environments, when i works with NodeJS projects or web projects (build using node) the syntax doesn’t require the extension .js and index.js is taken by default when you load a folder, but in Deno we need to set the path for the resource(Can be a local path or a external URL)

Loading keys and map module

You can do it this way too using a URL :3

Loading keys and map module using URL

In the project my “entrypoint” is main.js, if you want you can edit index.html and add import the script (removing bundle.js)

Loading a web module

And it works, this imports are compatible with the web … but wait a moment, where is Deno?

I can run main.js using Deno because my projects needs to load somethings in the DOM, but an Deno has a command called bundle (goodbye rollup and webpack)

So I Just need run the command

deno bundle main.js bundle.js

And if everything is fine and you run a server o load index.html, you will be able to see an map like this

Map loaded

When I built this project one problem was add environment variables, Deno can access to them, but just in runtime.

I can use Deno not just like runtime, I can use it like a build tool too.

You can follow me and give me a like in my facebook page, I hope this likes you and if it is, share it :)