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 :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joel H. Gomez Paredes

Frontend Developer at Platzi, Google Developer Expert in Web Technologies And Google Maps Platform, A Reverse Developer & Fullsnack JS Developer