Create Separate Javascript Bundles With A Shared Common Library Using Browserify And Gulp

Are you looking to streamline your JavaScript development and create separate bundles for more organized code management? If so, you're in the right place! In this article, we'll walk you through the process of creating separate JavaScript bundles with a shared common library using Browserify and Gulp. By the end of this guide, you'll be equipped with the knowledge to enhance your code structure and optimize your workflow efficiently.

First things first, let's clarify the tools we'll be using: Browserify and Gulp. Browserify is a fantastic tool that allows you to write Node.js-style modules that can be used in the browser. It resolves dependencies and bundles all your scripts into a single file. Gulp, on the other hand, is a task runner that helps automate repetitive tasks like minification, compilation, and more.

To get started, make sure you have Node.js and npm installed on your system. Once you have these prerequisites ready, you can begin by setting up your project directory and initializing it with npm:

mkdir my-project
cd my-project
npm init -y

Next, let's install the necessary packages. Run the following commands in your terminal:

npm install --save-dev browserify gulp gulp-browserify vinyl-source-stream

With the packages installed, you can create a simple project structure with directories for your source code and the shared common library. Here's an example structure:

my-project/
|_ src/
  |_ index1.js
  |_ index2.js
|_ shared/
  |_ common.js
|_ dist/

In this structure, `src/` contains your entry files (`index1.js` and `index2.js`), `shared/` holds your common library `common.js`, and `dist/` will store the bundled output files.

Now, let's set up your Gulp tasks. Create a `gulpfile.js` in the root of your project directory and define the following tasks:

const gulp = require('gulp');
const browserify = require('gulp-browserify');
const source = require('vinyl-source-stream');

gulp.task('bundle-index1', function () {
    return gulp.src('./src/index1.js')
        .pipe(browserify())
        .pipe(source('bundle1.js'))
        .pipe(gulp.dest('./dist'));
});

gulp.task('bundle-index2', function () {
    return gulp.src('./src/index2.js')
        .pipe(browserify())
        .pipe(source('bundle2.js'))
        .pipe(gulp.dest('./dist'));
});

Lastly, create an entry point for each of your index files. Within `index1.js` and `index2.js`, you can import your common library like this:

const common = require('../shared/common');

Now, you're all set to run your Gulp tasks. Simply execute `gulp bundle-index1` and `gulp bundle-index2` in your terminal, and you should see the bundled output files in the `dist/` directory.

That's it! You've successfully created separate JavaScript bundles with a shared common library using Browserify and Gulp. This methodology enhances code organization, promotes reusability, and simplifies maintenance. We hope this guide has been helpful, and happy coding!