Javascript Tools

Last updated on July 13, 2023

Modules

Good reference guide here

JavaScript programs started off pretty small — most of its usage in the early days was to do isolated scripting tasks, providing a bit of interactivity to your web pages where needed, so large scripts were generally not needed. Fast forward a few years and we now have complete applications being run in browsers with a lot of JavaScript, as well as JavaScript being used in other contexts (Node.js, for example).

It has therefore made sense in recent years to start thinking about providing mechanisms for splitting JavaScript programs up into separate modules that can be imported when needed. Node.js has had this ability for a long time, and there are a number of JavaScript libraries and frameworks that enable module usage (for example, other CommonJS and AMD-based module systems like RequireJS, and more recently Webpack and Babel).

Use of native JavaScript modules is dependent on import and export statements.

.mjs vs .js

Usually JavaScript files ends with .js extension, however, .mjs extension can be used to make it clear that these files are modules and are regular JavaScript. Also it helps build tools such as Babel to parse these files as modules or interpretated by runtimes such as Node.js as modules.

Exporting any iteam from a module

The easiest way to use it is to place it in front of any items you want exported out of the module, for example:

export const name = "Square";

export function draw(ctx, length, x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, length, length);

    return  { length, x, y, color };
}

You can export fucntions, var, let, const, class. They need to be top-level items; you can’t use export inside a function.

You can export all the items using a single export statement at the end of your module file, followed by commaa-separated list of features you want to export wrapped in curly braces.

export { name, draw, reportArea, reportPerimeter };

Importing features into your script

Once you’ve exported some features out of your modules, you need to import them into your script to be able to use them. The simplest way to do so is:

import { name, draw, reportArea, reportPerimeter } from "./modules/square.js";

Once you’ve imported the features into your script, you can use them just like they were defined inside the same file.

The imported values are read-only views of the features that were exported. Similar to `const` variables, you cannot re-assign the variable that was imported, but you can still modify properties of object values. The value can only be re-assigned by the module exporting it.

Parcel

Parcel is zero configuration build tools for almost everything needed for UI development (such as TypeScript, SASS, React, Elm, Vue, images, svg etc). it combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

javascript

This is a sapling 🌱 in my digital garden 🏡.

Notes mentioning this note

There are no notes linking to this note.