Modular JavaScript: A Beginners Guide to SystemJS & jspm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container">
  		<p class="spaced">This demo is loading AMD, CommonJS and ES6 modules in the browser using SystemJS</p>
  		
  		<table border="1" class="table" id="articles">
        <thead>
          <tr>
            <th>Title</th>
            <th>A glimpse...</th>
            <th>View Snippet</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="snippetModal" class="modal fade">
      <div role="document" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" data-dismiss="modal" class="close" type="button">
              <span aria-hidden="true">×</span>
            </button>
            <h4 id="myModalLabel" class="modal-title">Snippet</h4>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
          </div>
        </div>
      </div>
    </div>
  
    <script src="https://jspm.io/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('./scripts/display.js');
    </script>
  </body>
</html>

/*global System */
'use strict';

System.config({
  transpiler: "babel",
  packages: {
    './': {
      defaultExtension: false
    }
  },
  map: {
    "jquery": "npm:jquery@2.2.0",
    "jquery-ui": "github:components/jqueryui@1.11.4",
    "github:components/jqueryui@1.11.4": {
      "jquery": "npm:jquery@2.2.0"
    },
    "bootstrap": "github:twbs/bootstrap@3.3.6",    
    "github:twbs/bootstrap@3.3.6": {
      "jquery": "github:components/jquery@2.2.0"
    }
  }
});

.snippet {
	max-width: 400px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.spaced{
  margin: 15px;
  font-weight: bold;
}

var $ = require("jquery");

var wikiSearch = require("./search.js");
var summaryModal = require("./summaryModal.js");

wikiSearch("JavaScript").then(function(result) {
  if (result && result.query && result.query.search) {
    var html = result.query.search.map(function(item) {
      			console.log(item);
      var encodedSnippetText = escape(item.snippet);
      return `
				<tr>
					<td>
						<a href="http://en.wikipedia.org/wiki/${item.title}" target="_blank">${item.title}</a>
					</td>
					<td class="snippet">${item.snippet}</td>
					<td><button class="btn btn-link" data-snippet-text="${encodedSnippetText}">View Full Snippet</button></td>
				</tr>`;
    });

    $("#articles tbody")
      .html(html)
      .find("button").click(function() {
        var snippetText = $(this).data("snippetText");
        summaryModal.showSummaryModal(snippetText);
      });
  }
});

define(["jquery"], function($) {
	function searchOnWikipedia(searchString) {
		return $.ajax({
			url: `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${searchString}&format=json`,
			jsonp: "callback",
			dataType: "jsonp"
		});
	}

	return searchOnWikipedia;
});

import $ from "bootstrap";

export function showSummaryModal(text) {
	var modalWindow = $("#snippetModal");

	modalWindow.find(".modal-body")
		.html(unescape(text));
	modalWindow.modal("show");
}

Ravi Kiran introduces you to jspm and SystemJS that let you load any module format (ES6, AMD, CommonJS and globals) directly from any registry.

http://www.sitepoint.com/modular-javascript-systemjs-jspm