CODEWITHSUNDEEP
javascripthtmlnpmparceljs
Moehrengulasch
Moehrengulasch

Reputation: 217

ParcelJS: Build HTML to different subdirectories using the same code

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:

Upvotes: 1

Views: 1575

Answers (1)

Moehrengulasch
Moehrengulasch

Reputation: 217

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.

Upvotes: 2

Related Questions