Looking for a Global Includes(?) Configuration Example Using Parcel.JS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I've been trying to get my head around Parcel but am struggling. I asked a question before here and got a great example so I wanted to post again and see if I can't get some help explaining how I'd do this.

I have a small app that has a lot of the same dependencies (like jQuery, FabricJS, etc), hence wanting to learn Parcel, but not all of the pages use the same functions so I am trying to build something like this:

An index1.html and an index2.html, which would both use different modules (functions?) from let's say an modules.js on an as-needed basis. My understanding is that to achieve that I'd need an .js file for each of those to import the modules/functions from modules.js.

Is this correct? What is the simplest way to go about doing this?

Acceptable solutions should detail how to configure a basic Parcel setup with 2 index files which would take advantage of their own specific index.js files as well as imports from the modules.js file (as needed).

Hopefully this makes sense but if not please let me know and I will try to better explain myself. I will most definitely have follow ups and would be willing to tip for extras.

Thank you in advance.

Perhaps, you could create a modules/ folder with several functions separated in .js files, and then import these functions selectively through the index1.js and index2.js according to the needs of each script file?
kostasx 2 months ago
awarded to kostasx

Crowdsource coding tasks.

1 Solution


It looks like Parcel.JS, has a "Tree shaking" option, enabled using the following commands.
By following the steps below, you will produce 2 HTML files with a separate JS that includes (imports) only the specified method(s) from module.js.

index1.js will only include the index1 function and index2.js only the index2 function.

Commands:

$ parcel build index1.html -d dist --experimental-scope-hoisting
$ parcel build index2.html -d dist --experimental-scope-hoisting

index1.html:

    <html>

    <head>
        <link rel="stylesheet" href="./style.css">
    </head>

    <body>
        <h1>Index 1</h1>
        <canvas id="c"></canvas>
        <input type='text' id="custom" />
        <script src="./index1.js"></script>
    </body>

    </html>

index1.js:

    import { index1 } from "./module";

    index1();
    index2(); // Will produce an: Uncaught ReferenceError: index2 is not defined

index2.html:

    <html>

    <head>
        <link rel="stylesheet" href="./style.css">
    </head>

    <body>
        <h1>Index 2</h1>
        <canvas id="c"></canvas>
        <input type='text' id="custom" />
        <script src="./index2.js"></script>
    </body>

    </html>

index2.js:

    import { index2 } from "./module";

    index2();
    index1(); // Uncaught ReferenceError: index1 is not defined

module.js:

    export const index1 = function(){

      console.log("index1");

    }

    export const index2 = function(){

      console.log("index2");

    }

So, the bundled index1.js and index2.js files will only include the code that was imported, and thus result in smaller file sizes. You must use Parcel 1.9.0 or later in order for this feature to work.


With third party modules that would look like this:

$ npm install jquery fabric --save

index1.js:

    import $ from "jquery";
    import { fabric } from "./node_modules/fabric/dist/fabric";
    import { createFabric } from "./module";
    import { index1 } from "./module";

    $(function() {

        index1();
        createFabric.init();

    });

module.js:

    export const index1 = function(){

      console.log("index1");

    }

    export const index2 = function(){

      console.log("index2");

    }

    export const createFabric = {

      init: function() {
        // create a wrapper around native canvas element (with id="c")
        var canvas = new fabric.Canvas("c");

        // create a rectangle object
        var rect = new fabric.Rect({
          left: 100,
          top: 100,
          fill: "limegreen",
          width: 120,
          height: 120
        });

        // "add" rectangle onto canvas
        canvas.add(rect);
      }

    };
Hey kostasx! Thanks for breaking this down, it's very helpful. I've marked this as a verified solution. Would you care to add a few dependencies, like jQuery, jQuery UI, and FabricJS so that I can see how that'd look in this set up, for a tip of course? Would it basically mean importing the libraries from the node modules folder in each of the index.js files or is there a way to have it in the modules.js just once so that it's less redundant? Thanks again
sharper 2 months ago
Or use the shorter: import { createFabric, index1 } from "./module";
kostasx 2 months ago
Awesome. Thanks again. Tinkering with this now!
sharper 2 months ago