Looking for an Example of a Parcel Application (Dependencies)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

In Short; I'd like a basic Parcel App configured w/ a few dependencies, specifically jQuery, Fabric.js, and Bulma (CSS) to get a better idea of how dependencies work with Parcel.

I've been struggling with cofiguring something like the above and as I'm very visual thought it might be great to see a working example.

Acceptable solutions should be bundled with Parcel, and include the above dependencies. Commented code and a working example of a Fabric.js canvas with an imported jQuery function from another JS file would be a plus. Feel free to use an online tool, like CodeSandbox.io, for example.

Please let me know if I can answer any questions that will help you create a solution. Thank you.


Some Context

I have a few projects with a bunch of dependencies and it's getting difficult to manage. I've tried experimenting with Webpack but decided that Parcel might be a better fit. My biggest goal is to consolidate my code; currently I have several "sub applications" which all use a lot of the same code and my thinking is that I can use Parcel to use my jQuery functions as modules. I've gotten as far as adding Bulma (CSS) correctly but I tried for some time to get a Fabric.js canvas working but couldn't quite include it right- I'd include the dependency and then in my main JS file include it. Some things would work in the resulting page, like the color of the canvas that I set in JS, but not things like height, width, etc. Anyways, SOS!

Maybe you can paste the code that you are trying to execute and I can check it with my configuration which seems to be running fine.
kostasx 3 months ago
awarded to kostasx

Crowdsource coding tasks.

1 Solution

Winning solution

These are the steps I used:

Install Dependencies

$ npm i -g parcel-bundler
$ npm init -y
$ npm install jquery bulma fabric --save

Download External Libraries

Go to: http://bgrins.github.io/spectrum/
Click on Download Zip
Copy spectrum.css and spectrum.js into /libs/

index.html

<html>

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

<body>
    <canvas id="c"></canvas>
    <input type='text' id="custom" />
    <script src="./app.js"></script>
</body>

</html>

style.css

@import "bulma/css/bulma.css";
@import "./libs/spectrum.css";

app.js

import $ from "jquery";
import { fabric } from "fabric";
import { createFabric } from "./module";
import "./libs/spectrum.js";

$(function() {

  createFabric.init();
  $("#custom").spectrum({ color: "#f00" });

});

module.js

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);
}
};

Then I just ran the parcel command:

$ parcel index.html

And I get a limegreen box being rendered in the browser via the module.js.

Thank you. This helps a bunch. :)
sharper 3 months ago
Regarding the question about importing the spectrum-colorpicker, here are the required steps: 1) Go here: http://bgrins.github.io/spectrum/ and click Download Zip 2) Unzip and move the spectrum.js and spectrum.css into a folder named /libs/ on your project's root folder 3) Open the style.css file and add the following line: @import "./libs/spectrum.css"; 4) Open index.html and add the following line: < input type='text' id="custom" / > 5) Open app.js and add: import "./libs/spectrum.js"; Inside the $(function) add the following line which initializes the color picker: $("#custom").spectrum({ color: "#f00" });
kostasx 3 months ago
I've updated the code to include the spectrum-colorpicker library.
kostasx 3 months ago
Thanks so much kostasx
sharper 3 months ago