(arg1, arg2) => {
       // do stuff here
       const iAmNotVisibleOutside = true
    }

const myModule = (() => {
  const privateFoo = () => { /* ... */ }
  const privateBar = [ /* ... */ ]

  const exported = {
    publicFoo: () => { /* ... */ },
    publicBar: [ /* ... */ ]
  };
	
  return exported
})()

myModule.publicFoo()
myModule.publicBar[0]

myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined

var $, jQuery
$ = jQuery = (() => { 
  return { /* ... */ }
})()


// ... use $ or jQuery in the global scope

$.find('.button').remove()

// loDash.js
const loDash = {
  /* ... */
}

module.exports = loDash

// app.js

// import full module
const _ = require('./loDash')
_.concat([1], [2], [3])

// or import single functionality
const { concat } = require('./loDash')
concat([1], [2], [3])

// jquery-1.9.0.js

define(
  'jquery',
  ['sizzle', 'jqueryUI'],
  function (sizzle, jqueryUI) {
    // Returns the exported value
    return function () {
     // ...
    }
  }
)

// app.js

// define paths
requirejs.config({
  baseUrl: 'js/lib',
  paths: {
    jquery: 'jquery-1.9.0'
  }
})

define(['jquery'], function ($) {
  // this is executed only when jquery
  // and its deps are loaded
});

const $ = require('zepto')
const tippy = require('tippy.js')
const UUID = require('uuidjs')
const { confetti } = require('dom-confetti/src/main')
const store = require('store2')
const Favico = require('favico.js')

!(function () {
  const colors = ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a']

  const todoApp = (rootEl, opt = {}) => {
    const todos = opt.todos || []
    let completedTasks = opt.completedTasks || 0
    const onChange = opt.onChange || (() => {})

    const list = rootEl.find('.todo-list')
    const footer = rootEl.find('.footer')
    const todoCount = footer.find('.todo-count')
    const insertInput = rootEl.find('.add-todo-box input')
    const insertBtn = rootEl.find('.add-todo-box button')

    const render = () => {
      let tips
      list.html('')
      if (todos.length === 0) {
        list.html('<div class="nothing"><p>Nothing to do</p><p><small>It\'s good to be lazy 🎉</small></p></div>')
      } else {
        const listContainer = $('<ul></ul>')
        todos.forEach(item => {
          const el = $(`<li id="${item.id}"><a title="Click to mark as done" href="#">${item.text}</a></li>`)
          el.on('click', (e) => {
            e.preventDefault()
            const elId = $(e.target).parent().attr('id')
            if (tips) tips.destroyAll()
            remove(elId)
          })
          el.on('keyup', (e) => {
            if (e.code === 'Enter' || e.code === 'Space') {
              e.preventDefault()
              const elId = $(e.target).parent().attr('id')
              if (tips) tips.destroyAll()
              remove(elId)
            }
          })
          const link = el.find('a')
          link.on('focus', (e) => {
            $(e.target).attr('title', 'Press [space] or [enter] to mark as done')
          })
          link.on('blur', (e) => {
            $(e.target).attr('title', 'Click to mark as done')
          })
          el.appendTo(listContainer)
        })
        listContainer.appendTo(list)
        tips = tippy(list.find('li').toArray(), {
          dynamicTitle: true,
          placement: 'top',
          animation: 'shift-away',
          arrow: 'up',
          target: 'a',
          trigger: 'focus mouseenter',
          theme: 'poo'
        })
      }

      let footerText = todos.length ? `<strong>${todos.length}</strong> task${todos.length !== 1 ? 's' : ''} to get done!` : ''
      footerText += completedTasks ? ` <strong>${completedTasks}</strong> completed task${completedTasks !== 1 ? 's' : ''}</strong>` : ''
      todoCount.html(footerText)
    }

    const add = (text) => {
      const item = { id: UUID.generate(), text }
      todos.push(item)
      render()
      onChange(todos, completedTasks)
      return item
    }

    const remove = (id) => {
      const elIndex = todos.findIndex((item) => item.id === id)
      const removedItem = todos.splice(elIndex, 1)[0]
      completedTasks++
      // every 10 todos completed spread some confetti!
      if (completedTasks % 10 === 0) {
        confetti(rootEl.get(0), {colors, angle: 45})
      }
      render()
      onChange(todos, completedTasks)
      return removedItem
    }

    const getAll = () => todos
    const getRootEl = () => rootEl

    insertInput.on('keyup', (e) => {
      if (insertInput.val() && e.key === 'Enter') {
        e.preventDefault()
        add(insertInput.val())
        insertInput.val('')
      }
    })

    insertBtn.on('click', (e) => {
      e.preventDefault()
      if (insertInput.val()) {
        add(insertInput.val())
        insertInput.val('')
      }
    })

    render()
    return ({ add, remove, getAll, getRootEl })
  }

  const returning = store.get('init')
  const storedTodos = store.get('todos', [])
  const storedCompletedTasks = store.get('completedTasks', 0)

  const favicon = new Favico({
    animation: 'popFade', position: 'up'
  })
  favicon.badge(storedTodos.length)

  const app = todoApp($('#app'), {
    todos: storedTodos,
    completedTasks: storedCompletedTasks,
    onChange: (todos, completedTasks) => {
      favicon.badge(todos.length)
      store('todos', todos)
      store('completedTasks', completedTasks)
    }
  })
  store.set('init', true)

  if (!returning) {
  // for the first init
    app.add('Buy soy milk')
    app.add('Do homeworks')
    app.add('Prepare material for the talk')
    app.add('Read SPAM emails')
    app.add('Write a module bundler')
    app.add('Tick some todos')
    app.add('Find a better name for this example')
  }
})()

// app.js

const calculator = require('./calculator')
const log = require('./log')

log(calculator('2 + 2 / 4'))


// log.js

module.exports = console.log


// calculator.js

const parser = require('./parser')
const resolver = require('./resolver')

module.exports = (expr) => resolver(parser(expr))


// parser.js

module.exports = (expr) => { /* ... */ }


// resolver.js

module.exports = (tokens) => { /* ... */ }

((modulesMap) => {
  const require = (name) => {
    const module = { exports: {} }
    modulesMap[name](module, require)

    return module.exports
  }

  require('./app')
})(
  {
    './app': (module, require) => { … },
    './calculator': (module, require) => { … },
    './log': (module, require) => { … },
    './parser': (module, require) => { … },
    './resolver': (module, require) => { … }
  }
)

const { resolve, join } = require('path')
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  entry: './app.js',
  output: {
    path: resolve(join(__dirname, 'build')),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env']
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new CompressionPlugin()
  ]
}

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
      </div>
    );
  }
}

export default App

{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9',
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    }
  ]
}

yarn global add create-react-app

create-react-app newapp

cd newapp

yarn

yarn eject

cat ./config/webpack.config.{dev,prod}.js