To bundle or not to bundle: differences of creating plugins with or without a build process
In our Creating a custom block type from scratch recipe, we built a custom block type using a single file component with a build process. Single file components are a reformatted way of writing regular JS components, with certain advantages. They keep your code clean and self-contained. Anything that belongs to a component is in a single file: the HTML template, the logic and the styles. But this comes at the price of having to use a bundler.
The final code from that recipe can be converted to a regular
index.js with the steps below. Let's start with the code of the single file component from that recipe.
Note that this is not a complete recipe. Regarding the other files needed for the audio-block, please head over to main recipe. While we use the example of the audio-block, the steps described here are generic.
Original single file component
Structure of plugin folder without single file component
When we remove the single file component, the logic and the template live in the main
index.js file and the styles in the
For the rest of the code, please head over to the original recipe.
Moving the script part
Everything that is between the script tag goes into the main
index.js file. So
Translated to our
Everything in the
<template> part of our example above goes into the
Translated to our
Move the styles
Everything between the
… goes into a separate
For the real-life example:
That's it. Just in case, here is the complete
index.js file again:
While it is possible to bypass the extra complexity a build process introduces into our workflow, this way of creating Panel blocks or other Panel extension has its limits. With more complex logic and templates, it easily gets messy, and particularly if you want to have more than one extension in a single plugin.