Setting Up Webpack For A JavaScript Library

A couple of days ago I decided to learn how to write a simple javascript library. I wanted to make a javascript library with a couple of function in it which could be used by anyone just like jquery.

I decided to use webpack for bundling. I got webpack set up but when I embedded my bundled script in my code I could not use any of the functions that I wanted to make available in library.

<script src="myLibrary.js"></script>
<script type="text/javascript">
 /* 
 using any of my library functions here gave me reference error.  
 */
</script>

I knew I was trying to do what other libraries like Redux, jquery etc do. But I did not understand how they did it. So I dug deeper into webpack to understand how to do that.

I have created a small project for the demonstration of how I did it. The github repo can be found at

vyasriday / webpack-js-library

webpack setup for writing a javascript library and making it availabe as scirt or npm package

Webpack Set Up For Writing Your Own JavaScript Library

How to Make the Project Work

1. Clone the repository

2. npm install

3. npm run build

There is a index.js generated inside dist directory. Add it as an external script to any of your projects. Any method can be accessed on $ in in your code after embedding the bundled file.

For example you can use $.capitalize in your javascript to use capitalize method

The babelrc is used by jest for code transpilation.

View on GitHub

I created a src directory in which all of my source code is present. index.js is the entry file for my project.

• src
  • index.js
  • capitalize.js
  • unique.js
  • distinctString.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: '$',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
    modules: [path.resolve(__dirname, 'src')],
  },
  mode: 'development',
  devtool: 'sourceMap',
};

In webpack config there are two important properties in the output for bundling a javascript library.

• library: '$'
• libraryTarget: 'umd'

The library is the name of the variable, the code can be accessed as. For example jquery is available as $, just like that. Any function can be accessed like $.name_of_method and the libraryTarget is the library will be exposed. I am using babel-loader for code transpilation with webpack. The bundled file is put into dist directory after running build script.

package.json

{
  "name": "webpack-js-library",
  "jest": {
    "roots": [
      "test/"
    ]
  },
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "homepage": "https://github.com/vyasriday/webpack-js-library#readme",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "eslint": "^6.1.0",
    "jest": "^24.9.0",
    "webpack": "^4.39.2",
  }
}

In package.json there is one important property main. The main property of a package.json is a direction to the entry point to the module that the package.json is describing. Here I want to it to point to the bundled file which is the compiled code for the library.

I am also using jest for a basic test setup. It is good to have tests for a library.

src/index.js

import capitalize from './capitalize';
import unique from './unique';
import longestDistinctSubstring from './distinctString';

export { capitalize, unique, longestDistinctSubstring };

It is important tha you must export whatever you want to expose in your library. Here I am exposing three functions in the library. While bundling, webpack knows that it is supposed to put these functions on library.

Now I can easily access my library like -

<script src="dist/index.js"></script>
<script type="text/javascript">
  console.log($.capitalize('hridayesh'))
</script>

That's how you can set up webpack to write a javascript library.

Comments

[Rishi Agarwal]

Is there any way that we can export components in this so as to be used by the consumers of this library?