Plugin

The bundler plugin

Popular JavaScript frameworks provide a convention for creating components. For example, some frameworks let developers define a new file with a specific extension dedicated to describing a component. This type of component is called SFC (Single File Component). To reproduce this feature we need to create a plugin that extends the module bundler and instruct it to manage those files with a specified extension. We use the following import statement for this:

import Example from "./components/Example.assma";

At this point, the module bundler should know how to deal with this type of file. Below is an example of a bundler plugin that works with Parcel. All we need to do is to create an index.js file and export a function that takes a bundler variable as an argument. We can associate our specified extension to an Asset. An Asset represents the way to handle this type of file. To create an asset, we should define a class that extends Asset (from the parcel package) and override an async method, generate(). In this method, we write the logic of reading the imported file and converting it to known formats such as JavaScript or CSS code. The name of the imported file is injected into a basename class property, and the content is injected into a contents class property.