Skip to content

Compiling a Library

As a final step, we will now rebuild our application so that we can publish a library instead of a full application.

Define Exports

To deploy a library we have to define some exports. These exports can then be used by the user of the library. We do this in our main entry file index.js:

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export { default as AmazonButtonVanilla } from "./amazing-button-vanilla";
export { default as AmazonButtonJQuery } from "./amazing-button-jquery";
export { default as AmazonButtonBootstrap } from "./amazing-button-bootstrap";
export { default as AmazonButtonVue } from "./amazing-button-vue";

import { default as MyVanillaApp } from "./amazing-button-vanilla";
import { default as MyJQueryApp } from "./amazing-button-jquery";
import { default as MyBootstrapApp } from "./amazing-button-bootstrap";
import { default as MyVueApp } from "./amazing-button-vue";

let myVanillaInstance = new MyVanillaApp(
  document.getElementById("test-container-vanilla")
);
myVanillaInstance.maximumNumber = 99;

let myJQueryInstance = new MyJQueryApp(
  document.getElementById("test-container-jquery")
);
myJQueryInstance.maximumNumber = 49;

let myBootstrapInstance = new MyBootstrapApp(
  document.getElementById("test-container-bootstrap")
);
myBootstrapInstance.maximumNumber = 79;

let myVueInstance = new MyVueApp(document.getElementById("test-container-vue"));
myVueInstance.maximumNumber = 39;

But deploying this library and using in another project would automatically execute all the command below the line 6, what is not wanted. On the other hand are these lines very useful for live testing our library and we do not want to remove them.

The solution is to enclose these lines in a condition which will stay in a development environment but will not included in the production build:

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export { default as AmazonButtonVanilla } from "./amazing-button-vanilla";
export { default as AmazonButtonJQuery } from "./amazing-button-jquery";
export { default as AmazonButtonBootstrap } from "./amazing-button-bootstrap";
export { default as AmazonButtonVue } from "./amazing-button-vue";

import { default as MyVanillaApp } from "./amazing-button-vanilla";
import { default as MyJQueryApp } from "./amazing-button-jquery";
import { default as MyBootstrapApp } from "./amazing-button-bootstrap";
import { default as MyVueApp } from "./amazing-button-vue";

if (process.env.NODE_ENV === "development") {
  let myVanillaInstance = new MyVanillaApp(
    document.getElementById("test-container-vanilla")
  );
  myVanillaInstance.maximumNumber = 99;

  let myJQueryInstance = new MyJQueryApp(
    document.getElementById("test-container-jquery")
  );
  myJQueryInstance.maximumNumber = 49;

  let myBootstrapInstance = new MyBootstrapApp(
    document.getElementById("test-container-bootstrap")
  );
  myBootstrapInstance.maximumNumber = 79;

  let myVueInstance = new MyVueApp(
    document.getElementById("test-container-vue")
  );
  myVueInstance.maximumNumber = 39;
}

Testing Compilation

Please remember that from now on the application that will be build in the dist folder will not run whenever you use npm run build or npm run build:cdn. You have to build instead a development version with npm run build:dev or npm run build:dev:cdn.

Of course, this does not replace a proper test environment, but it is very efficient for quick library development and quick testing in a browser. A test environment is (for now) not in the scope of the CodeCoupler Webpack environment.

Prepare Deployment

Now install the external package to exclude the Vue packages from your library. This is very important if you export Vue applications:

1
npm i @cc-external/vue

As a last step you have to add only one property in the package.json which cannot be handled automatically:

1
2
3
{
  "main": "dist/walkthrough-lib.js"
}

The library name walkthough-lib.js is the final filename of the library which is derived by default from the package name defined in the property name.

Deploy as .tar.gz

Now you can with npm run build && npm pack create an .tar.gz file which you can deploy and use in other projects. In this file you will find only the relevant JavaScript and CSS files without any external libraries.

The other project can install your library from this archive with:

1
npm i --force ./path/to/your/file.tar.gz

All relevant external libraries will be installed automatically.

To use the provided exports of your library in the other project, you have to import them by name:

1
2
3
4
5
6
import {
  AmazonButtonVanilla,
  AmazonButtonJQuery,
  AmazonButtonBootstrap,
  AmazonButtonVue,
} from "your-library-name";