Use external javascript libraries for TVML based Apple TV apps?

Question

Is it possible to load and use external javascript libraries for use on TVML Apple TV apps?

For example, can I load the Firebase js library and use it to fetch data? Or load lodash to use it's functions?

Answer 1

You can load external JavaScript libraries using the evaluateScript function.

evaluateScripts([“ARRAY OF JS URLS”], function(success) {

// do work here once the JavaScript files have been evaluated

})

Answer 2

I've had luck using webpack to package all of my dependencies into a single minified application.js file. Webpack will handle bundling required commonjs modules and third-party libraries and you can use babel-loader to add missing es6 support (import/export, const/let, arrow functions, etc).

Here's my application.js:

require('babel-polyfill');
import Presenter from './presenter';
import ResourceLoader from './resourceLoader';

App.onLaunch = function(options) {
  let resourceLoader = new ResourceLoader(options.BASEURL);

  Presenter.resourceLoader = resourceLoader;

  let index = resourceLoader.loadResource(`${options.BASEURL}templates/Index.xml.js`, (resource) => {
    let doc = Presenter.makeDocument(resource);
    doc.addEventListener('select', Presenter.load.bind(Presenter));
    navigationDocument.pushDocument(doc);
  });
}

and my webpack.config.js:

var webpack = require('webpack');

module.exports = {
  entry: "./src/js/application.js",
  output: {
      path: __dirname + "/public/js",
      filename: "application.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          presets: ['es2015']
        }
      }
    ]
  }
};