Set Up the Development Environment

To use webpack and Babel, you must install Node.js on your computer. Refer to the instructions on the Node.js website^[10] to install Node.js for your operating system. Both the long-term-support (LTS) and the latest release should work, but generally, the LTS version is a safer choice. If you already have Node.js installed, ensure it’s at least the latest release in the 6.x series. The application won’t need Node.js installed to run; you’ll only need Node.js to prepare the files before you upload them to your web server.

Once you have installed Node.js, check that the npm command is on your PATH. The Node.js installer should set things up correctly, but double-check by running npm --version in your terminal:

If the npm version is less than 3, some of the examples in this book might not work and you might need to use a more recent Node.js version.

JavaScript build tools and practices are in flux, so it makes sense to isolate the build tools and dependencies for each project; this way, incompatible versions won’t clash with each other. npm is the Node.js package manager, but it also offers a lot of functionality to run builds in a repeatable and cross-platform way. We’ll use the npm command to manage our build and isolate each project’s dependencies.

Navigate into the directory where you created the word counter. We’re going to turn it into an npm package by adding a package.json. package.json documents your project dependencies and allows anyone to reinstall a compatible version that only your project can access. The npm init command creates a starting package.json automatically. Type:

The -y switch chooses a set of default configuration options for your project. Most of these options only matter if you plan to publish your project, so you can accept the defaults.

The directory structure for the project now looks like this:

The package.json file stores the project information. By the time we’ll complete this chapter and the next, it will look something like this:

We’re mostly interested in the scripts, dependencies, and devDependencies sections. Other properties like name, description, and main are only useful if you want to publish your project, so you can ignore them. The scripts section defines commands to manage our project. package.json records development and production dependencies separately. Development dependencies are tools like webpack that you use to develop your code but won’t need when it runs. Production dependencies are the libraries that you must distribute together with your code to make it run on users’ browsers. Production dependencies go into the dependencies section, while development dependencies go into devDependencies section. Specifying this information allows someone else to install the required dependencies when they install your code with npm, but it’s also very useful as documentation.

Now that we’ve transformed our project into an npm package, install the webpack^[11] module bundler and record it as a development dependency with this command:

i stands for install. --save-dev saves the version of webpack in package.json as a development dependency. If you leave the repository URL empty, npm will issue warnings every time you run a command. You can ignore them or add "private": "true" to package.json to silence them.

Open package.json to see the new devDependencies section that npm created.

To indicate acceptable versions of a library or tool, npm uses special characters in front of the version numbers. npm packages are encouraged to follow semantic versioning^[12] to express compatibility between versions. If a package breaks compatibility with a previous version, the author should change the first number; the caret ^ means that the package is compatible with all webpack versions that start with 3.

npm stores the libraries you install and their dependencies in the node_modules directory inside the current directory. Delete node_modules, and re-install all your dependencies with:

npm reads the project dependencies from package.json and installs the webpack version required to build the project.

If you’re using npm 5.0.0 or greater, you might have noticed that npm printed this message when you installed webpack:

package-lock.json records the exact version of every package and of its dependencies to provide even more reproducible builds.

You now have npm running and you can install the packages you need to create your application. Next, let’s start setting up the build.