3

I'm working on updating an application so it is more maintainable. This application currently uses a very large JS file with many JS classes. I have separate the code so each JS class is in its own JS file. I would like to use Parcel to combine all JS files into a single JS file I can link to from my index.html.

I have added export default to each main class. Eg. export default class MyJSClass. Then I import classes as needed from index.js file such as import MyJSClass from './MyJSClass.js';

The application I'm updating uses framework with structure below:

resources
  |-Public
    |-JS
      |-singleHugeJSFile.js
  |-Templates
    |-index.html

I want to use Parcel and keep the same structure such as

resources
  |-Public
    |-JS
      |-index.js // Entry point JS file
      |-MyJSClass.js
      |-SomeOtherClass.js
      |-AnotherClass.js
      ...

  |-Templates
    |-index.html

I have install Parcel on resources dir and run:

parcel build public/js/index.js

However this generate files on dist dir.

How can I generate a single entry JS file containing all the JS using Parcel and keep the same structure of the application so I can continue using default path to link to this JS from index.html?

user2300867
  • 593
  • 1
  • 12
  • 28

1 Answers1

1

Parcel doesn't support this feature out of the box, but I've developed a plugin for it. Check it out https://www.npmjs.com/package/parcel-plugin-custom-dist-structure

It is suitable for all types of web/node development projects, it will generate the dist structure you specify while also handle your imports.

In your case, the configuration that you would provide to my plugin would look like this:

"customDistStructure": {
    "config": {
      ".js": "Public/JS",
      ".html": "Templates"
    },
    "options": {
      "development": true
    }
}

Let me know what you think!

Vladimir Mikulic
  • 153
  • 3
  • 6