My JavaScript Journey: Basic ES6 CLI Skeleton

I’ve been writing in this space as a sometimes journalist/essayist. Recently, it occurred to me I should share what I’m learning about JavaScript. One of the difficulties, for me, has been finding complete examples of how to set things up. I’ve been setting up bare-bones implementations—skeletons, aka, boilerplates—of projects. I have not taken good notes and I have not added them to my public repository. I’m going to change that, starting today.

The first project is a basic ES6 JavaScript CLI skeleton. I’m making an assumption that readers are fairly new to setting up their own projects. I do expect git and nodejs to already be installed.

If you are starting a new Javascript project, you should create it using ES6 JavaScript. This will mean using a transpiler to create ES5 code for browsers that don’t support ES6. babel is the accepted method to do this.

Initialize git Project

Start by creating a project directory.

mkdir JavaScriptEs6CliSkeleton
cd JavaScriptEs6CliSkeleton

Then, initialize it.

git init

Output:
Initialized empty Git repository in /Users/user/src/Closet/JavaScriptEs6CliSkeleton/.git/

Initialize npm Package

npm init -y

The -y argument creates a default package.json without prompting.

Output:
Wrote to /Users/ramonaridgewell/src/Closet/JavaScriptEs6CliSkeleton/package.json:

{
  "name": "JavaScriptEs6CliSkeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Add the App

Add a folder, /src.
Add a file, /src/index.js:

function main() {
    var args = process.argv;
    if (args[2] && args[2] === '--v' ) {
        console.log('Es6CliSkeleton - version 1.0.0');
    } else {
        console.log('Hello');
    }
}
main();

In /src, run:

node index

Output:
Hello

Checkin Code

See http://gitref.org/basic/

From the project directory, run:

git st

Output:
On branch master
Initial commit
Untracked files:
(use "git add ..." to include in what will be committed)
package.json
src/
nothing added to commit but untracked files present (use "git add" to track)

From the project directory, run:

git add .
git st

Output:
On branch master
Initial commit
Changes to be committed:
  (use "git rm --cached ..." to unstage)
new file:   package.json
new file:   src/index.js

git commit -m "initial checkin"

Output:
[master (root-commit) 3b2adb4] initial checkin
2 files changed, 22 insertions(+)
create mode 100644 package.json
create mode 100644 src/index.js

To put the code into your GitHub repository, you need to push it.

git push origin master

If you go to your repo, you’ll see your checkin.

Add ES6 Code

For an example of how babel transpiles, add a new file, /src/hello.js.

const hello = 'Hello';
export default hello;

Modify index.js to import this module, then use it to get the text “hello.”

import hello from './hello';
function main() {
  let args = process.argv;
  if (args[2] && args[2] === '--v' ) {
    console.log('Es6CliSkeleton - version 1.0.0');
  } else {
    console.log(hello);
  }
}
main();

In /src, run:

node index

Output:
/Users/user/src/Closet/JavaScriptEs6CliSkeleton/src/index.js:1
(function (exports, require, module, __filename, __dirname) {
import hello from './hello';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

Do the next step to fix it.

Add babel Components

See https://babeljs.io/

Add babel basics

npm install babel-core --save-dev
npm install babel-preset-env --save-dev

If you wish, this can be done on a single line:

npm install babel-core babel-preset-env --save-dev

Add .babelrc

{
  "presets": [
    "env"
  ]
}

Add .babel-register

See https://babeljs.io/docs/usage/babel-register/

The require hook will bind itself to node’s require and automatically compile files on the fly.

npm install babel-register --save-dev

Add dev version of index.js, called _index.js. This is just my coding convention to differentiate between my working app and the one that will be distributed. Since index.js is written in ES6, it will not run without being transpiled. The act of requiring it from _index.js is what causes the transpiling to take place. Here is the code:

require("babel-register");
require("./index");

In /src, run:

node _index

Output:
Hello

If you run:

node index

Output (same as above):
SyntaxError: Unexpected token import

Note: Using npm install --save-dev (or --save), adds devDependencies (or dependencies) in package.json. At this point, it should look like this:

{
  "name": "JavaScriptEs6CliSkeleton",
  "version": "1.0.0",
  "description": "JavaScript ES6 CLI Skeleton",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-preset-env": "^1.2.2",
    "babel-register": "^6.24.0"
  }
}

Add .gitignore

In the project directory, run:

git st

Output:
On branch master
Changes not staged for commit:
(use "git add ..." to update what will be committed)
(use "git checkout -- ..." to discard changes in working directory)
modified: package.json
modified: src/index.js
Untracked files:
(use "git add ..." to include in what will be committed)
.DS_Store
.babelrc
node_modules/
src/_index.js
src/hello.js

You don’t want to check in node_modules/ or .DS_Store (.DS_Store shows up as soon as you view the folder heirarchy in the Finder). Add .gitignore to the project directory to ignore these at checkin.

.DS_Store
/node_modules/

Checkin Code

To see current modifications, from the project directory, run:

git diff

Output:

diff --git a/package.json b/package.json
index cfc2e4f..f33febf 100644
--- a/package.json
+++ b/package.json
@@ -8,5 +8,10 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-register": "^6.24.0"
+  }
 }
diff --git a/src/index.js b/src/index.js
index 25e17da..2d42343 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,11 @@
+import hello from './hello';
+
 function main() {
     var args = process.argv;
     if (args[2] && args[2] === '--v' ) {
         console.log('Es6CliSkeleton - version 1.0.0');
     } else {
-        console.log('Hello');
+        console.log(hello);
     }
 }

From the project directory, run:

git add .
git commit -m "added Babel components"

Output:
[master 0502202] added Babel components
6 files changed, 21 insertions(+), 2 deletions(-)
create mode 100644 .babelrc
create mode 100644 .gitignore
create mode 100644 src/_index.js
create mode 100644 src/hello.js

Build ES5 Compatible App

Next, build with babel-cli, which will transpile the ES6 to ES5. This also creates a build that babel-register does not compile each time it is run.

Add babel-cli

npm install babel-cli --save-dev

Add a script to package.json to “build” using babel and to have “start” run index:

{
  "name": "JavaScriptEs6CliSkeleton",
  "version": "1.0.0",
  "description": "JavaScript ES6 CLI Skeleton",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d dist",
    "start": "node dist/index",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-preset-env": "^1.3.2",
    "babel-register": "^6.24.0"
  }
}

In the project directory, run:

npm run build

Output:
babel src -d dist
src/_index.js -> dist/_index.js
src/index.js -> dist/index.js
src/hello.js -> dist/hello.js

In the project directory, run:

npm start

Output:
node dist/index
Hello

Update .gitignore

/dist/

Checkin code

From the project directory, run:

git diff

Output:

diff --git a/.gitignore b/.gitignore
index cfca405..17a7dd4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
 /node_modules/
+/dist/
diff --git a/package.json b/package.json
index f33febf..8b7c9c2 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,15 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "build": "babel src -d dist",
+    "start": "node dist/index",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "babel-cli": "^6.24.0",
     "babel-core": "^6.24.0",
     "babel-preset-env": "^1.3.2",
     "babel-register": "^6.24.0"

From the project directory, run:

git add .
git commit -m "added Babel CLI"

Output:
[master cddf638] added Babel CLI
2 files changed, 4 insertions(+)

In Conclusion

And there you have it. An ES6 JavaScript skeleton ready for you to flesh out. You can find the code in my github repository, skeleton-cli-js.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Advertisements
This entry was posted in #Education, Coding, Education, JavaScript, Programming, Software Development and tagged , , , , . Bookmark the permalink.

One Response to My JavaScript Journey: Basic ES6 CLI Skeleton

  1. Pingback: My JavaScript Journey: Basic ES6 Browser Skeleton | RamonaRidgewell

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s