Blocks simple index.js preview template with syntax highlighting

The CMS Questions
1

First of all thank you for all the guides. Most of the time I can find what I need and help myself.

I am following the “Custom block type” guide. Now I am stuck at the Simple index.js because I don’t want to hit of creating a single file component.
My problem is the template part because I am not a fan of inline html where I can’t see any syntax highlighting.
My question: can I just outsource the html part to a file and refer to it?

So instead of

audio: {
      template: `
        <div>
          <h1>{{ content.title }}</h1>
          <audio controls>
            <source :src="content.source[0].url" type="audio/mpeg">
          </audio>
        </div>
      `
    }

something like

audio: {
      template: my-external-template.php
    }

I understand the advantages of building a single file component however I don’t want to get into the workflow of compiling things again and again while developing my website at this moment. If I intend to get deeper into building individual blocks, I will of course follow that road.

Thank you for your help

2

Once you start importing files you are in build workflow land again

What’s the problem with compiling things given that a watcher keeps track of changes and does that automatically?

3

Ok. Thank you for the response.
It is just that I am thinking of creating some individual blocks on a website and I don’t want to have to take care of all these watching and compiling. But maybe I have to change my workflow then. As I said, I am aware of that, it is the more professional way of developing.
I just thought that because in Plugins I can import code from different files, I could do the same in this case. Like in this example

\Kirby::plugin('name/mysnippet', [
    'snippets' => [
        'mysnippet' => __DIR__ . '/snippets/mysnippet.php'
    ]
]);