Browserify + Babelify

Back-end JavaScript has modules

example_module.js

module.exports = {
    example_function:
        () => "This is example output"
}

module_example.js

var example_module = require('./example_module')

console.log(example_module.example_function())

output

This is example output

Back-end JavaScript is modern

modern.js

const mad_lib =
    (proper_name, adverb, verb, adjective, noun) =>
        `${proper_name} ${adverb} ${verb} their ${adjective} ${noun}`

console.log(
    mad_lib(
        'The Penguin',
        'studiously',
        'poured over',
        'impressive',
        'collection of etruscan snoods'))

output

The Penguin studiously poured over their
impressive collection of etruscan snoods

Wouldn't it be nice if we could bring this coolness to

the front-end?

BROWSERIFY GIVES US NODE-LIKE MODULES ON THE FRONT END

browserify source.js -o destination.js

Babel compiles modern JavaScript to JavaScript that will run in most browsers

babel source.js --out-file destination.js

Babelify is a plugin that adds the babel transformation to browserify's transformation

browserify source.js -o destination.js -t [ babelify --presets [ es2015 ] ]

You can add this to your NPM scripts in your package.json file

{
  "name": "browserifybabelify",
  "version": "1.0.0",
  "description": "A simple demonstration of how to have modern JavaScript along with CommonJS modules in your browser code.",
  "main": "index.js",
  "dependencies": {
    "express": "^4.14.0",
    "pug": "^2.0.0-beta3"
  },
  "devDependencies": {
    "browserify": "^13.0.1",
    "babel-preset-es2015": "^6.9.0",
    "babelify": "^7.3.0"
  },
  "scripts": {
    "test": "jasmine",
    "build": "browserify front-end/js/main.js -o public/js/main.js -t [ babelify --presets [ es2015 ] ]"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/NerdcoreSteve/browserifybabelify.git"
  },
  "author": "Steve Smith",
  "license": "Apache-2.0",
  "bugs": {
    "url": "https://github.com/NerdcoreSteve/browserifybabelify/issues"
  },

github.com/NerdcoreSteve/browserifybabelify

@ProSteveSmith

funkyjavascript.com