Skip to content

Packaging and Deploying

Define Exports

To deploy our library we have to define some exports. We do this in our main entry file index.js:

src/index.js

1
2
3
4
5
6
7
8
export { default as AmazonButtonJs } from "./amazing-button";
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 AmazingButton } from "./amazing-button-vue";
let myClass = new AmazingButton(document.getElementById("test-container"));
myClass.maximumNumber = 99;

But deploying this library and using in another project would automatically execute the lines 6-8 what is not wanted. On the other hand are these lines very useful for live testing our library.

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
export { default as AmazonButtonJs } from "./amazing-button";
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 AmazingButton } from "./amazing-button-vue";
if (process.env.NODE_ENV === "development") {
  let myClass = new AmazingButton(document.getElementById("test-container"));
  myClass.maximumNumber = 99;
}

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.

A good practice is to set the port of the development server of libraries to another port. It is common in some cases for library development and UI development to be developed in parallel. The Port 8081 should be a good choice, in contrast to the default port 8080:

webpack.config.js

1
2
3
4
5
module.exports = {
  devServer: {
    port: 8081
  }
};

Finalize and Deploy

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

1
2
3
{
  "main": "dist/library-name.js"
}

Replace library-name.js with the final filename of the library which is derived by default from the package name defined in the property name.

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 with archive with:

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

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

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

If you want to publish the package to a public repository like npmjs.org you have to remove the following property from package.json:

1
2
3
{
  "private": true
}

Further details can be found here.