I have two .html files using the same Javascript code and assets. As they are representing different language versions of the same site, I would like to build them to different subdirectories with parcel.
Currently, I'm building these in an asymmetric way. The .html files are the entry points, index.html being the English language version:
Current input:
|-*.css, *.js, ...
|–index.html
|-de.html
Current output:
dist
|-*.css, *.js, ...
|-index.html
|-de.html
Current build command
parcel build --public-url . index.html de.html
However, I would like to have them in a more symmetric way:
Desired input:
|-*.css, *.js, ...
|–en
|-index.html
|-de
|-index.html
Desired output:
dist
|-*.css, *.js, ...
|–en
|- index.html
|-de
|- index.html
I'm wondering two things here:
index.html and de.html to en/index.html and de/index.html, do I have move up the relative links in the html files, e. g. from <link rel="stylesheet" href="example.css"> to <link rel="stylesheet" href="./example.css"> or is this automatically cared for by changing the build command?I was able to solve it myself using this example from a bug report here. As I want to preserve only the file structure of my entry points (the html files in my case), this can be achieved pretty easily.
For example, with the following input:
|- test.js
|- locales
|- en
|- index.html
|- de
|- index.html
I get the following output:
dist
|- test.js
|- en
|- index.html
|- de
|- index.html
Using this command in my package.json:
parcel build locales/**/*.html --public-url ../
To use test.js in one of the html files, it is necessary to go up two directories up with this structure:
<script src="../../test.js"></script>
Of course it's also possible to omit the subdirectory locales, then only ../ needs to be used in the script.
It seems to be not as easy if one wants to preserve the directory structure of non-entry points but for my case it turned out to be very easy.