If you’re familiar with ES6 module imports, it works in a similar way. Using require also makes it easier to tell which functionality our code is using, and it avoids relying on everything being available globally. As an added benefit, we can combine Browserify and Babel, so that we don’t need to include the Babel browser.js file on the page either. All of the required files are bundled together into a single file which we can then include on our page. Managing the scripts and especially the correct order of scripts can become tedious, especially if we use a lot of small libraries as is popular with npm.īrowserify helps us solve this by letting us use CommonJS style require('filename') in our code. Normally when we want to include some library code in our project, we include another script tag on the page. This is similar to Grunt or Gulp, but somewhat simpler.īrowserify allows us to use Node-style modules in the browser. Npm can also help by allowing us to run scripts, such as build scripts or test scripts, without having to remember complex command line invocations.
#$ npm install slack keep presence install
It also makes it easy for others to collaborate in our project, as they can simply run npm install and get all the libraries our project uses. One of the big benefits of using npm in our project is being able to use the huge amount of libraries available on npm. Npm is Node.js’ package repository / package manager. So, in this article, we’ll move our previous code to use npm and Browserify.
Npm and Browserify are useful tools which will make our lives easier in the long run as our app starts becoming more complex. We want to start adding features to it – such as actually supporting multiple people chatting – but before we do that, let’s set up some tools. So far, in the previous article, we’ve built a simple prototype.
This is the second article in a series where we build a Slack-style chat app with React.