Adding Libraries

Now let's rewrite the class by using the library jQuery. First we have to install the library:

npm i jquery

Then we create a new file which do the same thing, but using jQuery:

src/amazing-button-packages.js

import $ from "jquery";
export default class {
  #maximumNumber = 9;
  #button;
  get maximumNumber() {
    return this.#maximumNumber;
  }
  set maximumNumber(value) {
    this.#maximumNumber = value;
    this.#button.html(`Show number from 1 to ${this.#maximumNumber}`);
  }
  constructor(element) {
    console.debug("Starting jQuery Button");
    $(element).css({
      border: "1px solid red",
      textAlign: "center"
    });
    this.#button = $("<button>")
      .html(`Show number from 1 to ${this.#maximumNumber}`)
      .css("marginTop", "20px")
      .on("click", () => {
        this.resultDiv.html(Math.floor(Math.random() * this.#maximumNumber));
      })
      .appendTo(element);
    this.resultDiv = $("<div>")
      .html("No Result")
      .css({
        border: "1px solid blue",
        margin: "20px"
      })
      .appendTo(element);
  }
}

Let's create another container in which we will start the jQuery based application like before:

src/index.js

import createTestContainer from "./create-test-container";

import { default as MyVanillaApp } from "./amazing-button-vanilla";
import { default as MyPackagesApp } from "./amazing-button-packages";

createTestContainer("Testing Vanilla JS", "test-container-vanilla");
let myVanillaInstance = new MyVanillaApp(
  document.getElementById("test-container-vanilla")
);
myVanillaInstance.maximumNumber = 99;

createTestContainer("Testing Packages", "test-container-packages");
let myPackagesInstance = new MyPackagesApp(
  document.getElementById("test-container-packages")
);
myPackagesInstance.maximumNumber = 49;

Start now the compilation with npm run build and inspect the compiled file walkthrough-env.<hash>.js in the dist directory. The size of this file will be round about 113 kB. This is way too much for our small class. This is because the library jQuery was compiled into this file.

To avoid this we have to use set a CodeCoupler Webpack configuration option. These options can be set in the webpack.config.js:

const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      // Here in the first argument you
      // can set CodeCoupler Webpack
      // configuration options
    },
    env,
    {}
  );

Now add the following property externals to the CodeCoupler Webpack configuration:

webpack.config.js

const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      externals: [
        {
          module: "jquery",
          global: "jQuery",
          entries: ["dist/jquery.min.js"]
        }
      ]
    },
    env,
    {}
  );

Now run again the command npm run build and inspect the dist folder. You will see your walkthrough-env.<hash>.js is shrunk to 25 kB. and an additional directory vendor in which was plaed the jQuery library:

📁 dist
├─ walkthrough-env.<hash>.js
├─ index.html
├─ 📁 manifest
└─ 📁 vendor

If you open the index.html you will find the injected library jQuery from an external file <script src="vendor/jquery-3.6.0/dist/jquery.min.js">.

This means that with this configuration all necessary measures have been taken to copy the jQuery file and inject the HTML file.

With this configuration it is not only possible to externalize JavaScript libraries, but also to inject css files and copy other assets.

We can see this using the example of Bootstrap Icons. First install the package:

npm i bootstrap-icons

Then extend the configuration to copy all needed assets and inject the CSS file bootstrap-icons.min.css into our HTML file:

webpack.config.js

const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      externals: [
        {
          module: "jquery",
          global: "jQuery",
          entries: ["dist/jquery.min.js"]
        },
        {
          module: "bootstrap-icons",
          entries: ["font/bootstrap-icons.min.css"],
          copy: ["font/fonts"]
        }
      ]
    },
    env,
    {}
  );

Now let us add some Bootstrap icons:

src/amazing-button-packages.js

import $ from "jquery";
export default class {
  #maximumNumber = 9;
  #button;
  get maximumNumber() {
    return this.#maximumNumber;
  }
  set maximumNumber(value) {
    this.#maximumNumber = value;
    this.#button.html(`Show number from 1 to ${this.#maximumNumber}`);
  }
  constructor(element) {
    console.debug("Starting jQuery Button");
    $(element).css({
      border: "1px solid red",
      textAlign: "center"
    });
    this.#button = $("<button>")
      .html(`Show number from 1 to ${this.#maximumNumber}`)
      .css("marginTop", "20px")
      .on("click", () => {
        this.resultDiv.html(Math.floor(Math.random() * this.#maximumNumber));
      })
      .appendTo(element);
    this.resultDiv = $("<div>")
      .html("No Result")
      .css({
        border: "1px solid blue",
        margin: "20px"
      })
      .appendTo(element);
    this.fontDiv = $("<div>")
      .html(
        `Test Bootstrap Font Icons: <br>
        <i class="bi bi-0-circle"></i>
        <i class="bi bi-1-circle"></i>
        <i class="bi bi-2-circle"></i>`
      )
      .css({
        border: "1px solid green",
        margin: "20px"
      })
      .appendTo(element);
  }
}

Now if you start the dev server with npm start again and you will see the running example in your browser.