How to Use Typescript Modules with Browserify

Aug 5, 2020 • 5 Minute Read

Introduction

React apps consist of tons of NPM packages that consume third-party functionalities, such as form, material components, validation packages, etc. Browserify is a tool that simplifies the app bundling mechanism by absorbing all the included NPM packages into an app after the code compilation.

Through this guide, you will learn how to use Browserify in a React app with TypeScript using the NPM package, and you will also learn how to configure modules with the Browserify package.

Installation of Browserify

When using TypeScript with a React app, it is essential to compile the modules present in your app. The Browserify package does this to do the bundling of your React app.

The main goal of using Browserify is to convert the modules to browser-friendly JavaScript code, so before using the Browserify package, install it using the following command.

      npm install --global browserify

After installing the above package, you will be able to configure your Typescript.

Configuring Modules for Browserify

Now that you have installed the NPM package Browserify, the next step is to configure your modules to run with it.

For that, you need to make changes in the file tsconfig.json, as explained below.

      {
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
	      "sourceMap": true
    },
    "files": [
        "../typings/index.d.ts",
        "../typescript/main.ts"
    ]
}
    

As you can see in the above file, there is an array called a file that consists of the main TypeScript file to be loaded once the application is loaded.

Once you have done the above configuration, you will be able to compile your React with TypeScript app without any difficulty.

Using Browserify CLI

To execute the actual application, compile the React with TypeScript app using the below command.

tsc

The React with TypeScript app is now compiled, and the next step is to runBrowserify to bundle your whole application using a given command.

      browserify typescript/main.js -o javascript/bundle.js

The above command suggests that typescript/main.js is an entry file for the app, and the javascript/bundle.js file used to generate the bundling of the whole React app at once.

Alternatively, you can also use another command, as demonstrated below.

      browserify main.ts -p [ tsify --noImplicitAny] > bundle.js

The above command determines that you need to generate the bundle.js file based on the existing configuration mentioned in the main.ts file, which is an entry point of the React with the TypeScript app.

But before you use the above command to bundle the app, install an additional package using the below command.

      npm install tsify

The above command installs tsify and uses that package to compile the TypeScript code into JavaScript-based code, which is suitable for the browser.

Using Browserify API

So far, you have gotten a basic introduction to Browserify and how to install the required packages. The next step is to configure the tsify and Browserify packages with the TypeScript app, as demonstrated below.

      var browserify = require('browserify');
var tsify = require('tsify');

browserify()
    .add('main.ts') // main entry of an application
    .plugin(tsify, { noImplicitAny: true })
    .bundle()
    .on('error', function (error) { console.error(error.toString()); })
    .pipe(process.stdout);
    

Use two different packages, Browserify and tsify, to bundle the app, and after that the Browserify configuration happens.

The configuration of the main entry point of the app is shown below.

      browserify()
    .add('main.ts') // main entry of an application
    

The main.ts file is the main entry point of the React with TypeScript application, so you need to configure it because all the primary settings are there.

So, this is the first and necessary configuration to use Browserify in your TypeScript with React app.

Conclusion

Bundling is one of the standard operations to compile a TypeScript application before running it. You can make use of a package called Browserify, which provides a simpler syntax to configure the bundling.

The aim is to normalize the bundling process using Browserify, which helps to maintain the app. I hope this guide helps you understand the bundling process. Happy learning!