Preparing the development environment

The examples in this book will use both the web browser environment and the Node.js environment. While Node.js Version 8 and higher has support for ES6+, not all browser vendors have complete support yet for ES6+ features, and we will therefore be using Babel to transpile all of our code regardless.

This book will try its best to use the same project structure for all examples, whether they're executed on the command line in Node.js or run in the browser. Because we're attempting to standardize this project structure, not every project will use all of the features we set up in this section.

The tools you will need are:

• Your favorite code editor, such as Vim, Emacs, Sublime Text, or WebStorm
• An up-to-date web browser such as Chrome or Firefox
• Node.js Version 8 LTS or higher; this book will use version 9.4.0 for all examples
• The Yarn package manager (optional; you may use npm instead)
• Various build tools such as Babel and Browserify

Installing Node.js

If you're a macOS user, the easiest way to install Node.js is through a package manager such as Homebrew or MacPorts. For best compatibility with the examples in this book, install Node.js version 9.4.0 or greater.

Windows users can also use the Chocolatey package manager to install Node.js, otherwise you may follow the instructions on the Node.js current download page: https://nodejs.org/en/.

Linux users should be careful if installing Node.js through their distribution's package manager, as the shipped version of Node.js may be a much older version. If your package manager uses a version older than V8, you may either add a repository to your package manager, build from source, or install from binary, as appropriate for your system.

Once you've installed Node.js, ensure that it runs and is the correct version by running node --version from the command line. The output will look like the following:

$ node --version
 V9.4.0

This is also a good time to test that npm also works:

$ npm --version
 5.6.0

Optionally installing Yarn

Yarn is a package management tool similar to and compatible with npm, though I find it is faster and easier to work with. If using Homebrew on macOS, you may simply install it using brew install yarn; otherwise follow the instructions found on Yarn's installation guide page (https://yarnpkg.com/en/docs/install#windows-stable).

If you want to use npm instead of Yarn, you may; both respect the same format for package.json, though they have slightly different syntaxes for commands such as add, require, and install. If you're using npm instead of Yarn, simply replace the commands with the correct function; the package names used will all be the same.

Creating and initializing an example project

Use the command line, your favorite IDE, or your file browser to create a directory somewhere on your machine called MLinJSBook, with a subdirectory called Ch1-Ex1.

Navigate your command line to the Ch1-Ex1 folder, and run the command yarn init, which like npm init will create a package.json file and prompt you for basic information. Respond to the prompts, answering appropriately. You will not be publishing this package so the answers aren't too important, however, when prompted for the application's entry point, type in dist/index.js.

Next, we need to install a few build tools that we'll use for the majority of our example projects:

• babel-core: The Babel transpiler core
• babel-preset-env: The Babel parser preset that parses ES6, ES7, and ES8 code
• browserify: A JavaScript bundler which can compile multiple files into a single file
• babelify: The Babel plugin for Browserify

Install these as development environment requirements by issuing the following command:

yarn add -D babel-cli browserify babelify babel-preset-env

Creating a Hello World project

To test that everything is building and running, we'll create a very simple two-file Hello World project and add our build script.

First, create two subdirectories under your Ch1-Ex1 folder: src and dist. We'll use this convention for all projects: src will contain JavaScript source code, dist will contain built source code and any additional assets (images, CSS, HTML files, and so on) required by the project.

In the src folder, create a file called greeting.js with the following code:

const greeting = name => 'Hello, ' + name + '!';
export default greeting;

Then create another file called index.js with the following:

import greeting from './greeting';
console.log(greeting(process.argv[2] || 'world'));

This small application tests whether we can use basic ES6 syntax and module loading, as well as access command-line arguments given to Node.js.

Next, open up the package.json file in Ch1-Ex1, and add the following section to the file:

"scripts": {
 "build-web": "browserify src/index.js -o dist/index.js -t [ babelify -  
  -presets [ env ] ]",
 "build-cli": "browserify src/index.js --node -o dist/index.js -t [  
  babelify --presets [ env ] ]",
 "start": "yarn build-cli && node dist/index.js"
},

This defines three simple command-line scripts:

• Build-web uses Browserify and Babel to compile everything that src/index.js touches into a single file called dist/index.js
• Build-cli is similar to build-web, except it also uses Browserify's node option flag; without this option we would not be able to access command-line arguments given to Node.js
• Start is intended only for CLI/Node.js examples, and both builds and runs the source code

Your package.json file should now look something like the following:

{
"name": "Ch1-Ex1",
"version": "0.0.1",
"description": "Chapter one example",
"main": "src/index.js",
"author": "Burak Kanber",
"license": "MIT",
"scripts": {
  "build-web": "browserify src/index.js -o dist/index.js -t [ babelify --presets [ env ] ]",
  "build-cli": "browserify src/index.js --node -o dist/index.js -t [ babelify --presets [ env ] ]",
  "start": "yarn build-cli && node dist/index.js"
},
"dependencies": {
  "babel-core": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babelify": "^8.0.0",
  "browserify": "^15.1.0"
}}

Let's put this simple application through a few tests. First, make sure that yarn build-cli works. You should see something like the following:

$ yarn build-cli
yarn run v1.3.2
$ browserify src/index.js --node -o dist/index.js -t [ babelify --presets [ env ] ]
Done in 0.59s.

At this point, confirm that the dist/index.js file has been built, and try running it directly, using the following code:

$ node dist/index.js
Hello, world!

Also try passing in your name as an argument to the command, using the following code:

$ node dist/index.js Burak
Hello, Burak!

Now, let's try the build-web command, as shown in the following code. Because this command omits the node option, we expect that our argument will not work:

$ yarn build-web
yarn run v1.3.2
$ browserify src/index.js -o dist/index.js -t [ babelify --presets [ env ] ]
Done in 0.61s.
$ node dist/index.js Burak
Hello, world!

Without the node option, our arguments are not forwarded to the script, and it defaults to saying Hello, world!, which is the expected result here.

Finally, let's test our yarn start command, using the following code, to make sure it builds the CLI version of the application and also forwards our command-line arguments, using the following code:

$ yarn start "good readers"
yarn run v1.3.2
$ yarn build-cli && node dist/index.js 'good readers'
$ browserify src/index.js --node -o dist/index.js -t [ babelify --presets [ env ] ]
Hello, good readers!
Done in 1.05s.

The yarn start command successfully built the CLI version of the application and forwarded our command-line arguments to the program.

We will try our best to use the same structure for each of the examples in this book, however, pay attention to the beginning of each chapter as each example may require some additional setup work.