1. Installation

Installing JSData

npm - npm install --save js-data
bower - bower install --save js-data
jsdelivr - http://www.jsdelivr.com/?query=js-data
cdnjs - https://cdnjs.com/libraries/js-data

Installing dependencies

JSData requires the presence of a Promise constructor in the global environment. In the browser, window.Promise must be available. In Node.js, global.Promise must be available. Here is a handy library for polyfilling Promise: https://github.com/jakearchibald/es6-promise.

JSData also requires full ES5 support from the runtime. Here is a handy library for polyfilling ES5 support: https://github.com/afarkas/html5shiv

Adding JSData to your app

Import JSData's components into your app:

<script type="text/javascript" src="path/to/js-data.min.js"></script>
<script>
  console.log(JSData.version.full);
  const UserService = new JSData.Mapper({
    name: 'user'
  });
</script>

const JSData = require('js-data');
const {Mapper, version} = JSData;

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});

define(['js-data', (JSData) => {
  const {Mapper, version} = JSData;
  
  console.log(version.full);
  const UserService = new Mapper({
    name: 'user'
  });
}])

import {Mapper, version} from 'js-data';

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});

Configuring builds

r.js

Running `r.js -o require.config.js` will produce `bundle.js`

In `index.html` switch `script/main` between `main` (load scripts dynamically) and `bundle` (load bundled scripts)

({
  name: 'main',
  mainConfigFile: 'main.js',
  out: 'bundle.js',
  optimize: 'none'
})

require.config({
  paths: {
    'js-data': '/path/to/node_modules/js-data/dist/js-data'
  }
});

require([
  'app'
], (app) => {
  console.log(app)
});

define('app', [
  'js-data'
], (JSData) => {
  const {Mapper, version} = JSData;
  
  console.log(version.full);
  const UserService = new Mapper({
    name: 'user'
  });
  
  const app = {}
  app.UserService = UserService
  return app
})

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load scripts dynamically -->
  <script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>

  <!-- load bundled scripts -->
  <!--<script data-main="bundle" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>-->
</head>
<body>
<h1>My App</h1>
</body>
</html>

browserify

Running `browserify app.js > bundle.js` will produce `bundle.js`

const JSData = require('js-data');
const {Mapper, version} = JSData;

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>

webpack

Running `webpack` will produce `bundle.js`

const JSData = require('js-data');
const {Mapper, version} = JSData;

console.log(version.full);
const UserService = new Mapper({
  name: 'user'
});

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
};

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- load bundled scripts -->
  <script src="bundle.js"></script>
</head>
<body>
<h1>My App</h1>
</body>
</html>