为基于 TVML 的 Apple TV 应用程序使用外部 JavaScript 库？答案

【问题标题】：Use external javascript libraries for TVML based Apple TV apps?为基于 TVML 的 Apple TV 应用程序使用外部 JavaScript 库？
【发布时间】：2015-09-13 23:15:18
【问题描述】：

是否可以加载和使用外部 javascript 库以在 TVML Apple TV 应用程序上使用？

例如，我可以加载 Firebase js 库并使用它来获取数据吗？或者加载lodash来使用它的功能？

【问题讨论】：

我通过 browserfy 成功使用了 require。去承诺！
@mcabe 你能举个例子吗？
当然。我设置了一个repo 来演示我的架构。但它的清单是我使用 npm 安装任何体面，只需要它们和我的视图控制器。 browserify 只是捆绑我的文件。
@mcabe 哇，太棒了！谢谢！
当然，架构不是很好，但它应该让你开始

标签： javascript tvos apple-tv tvml

【解决方案1】：

您可以使用 evaluateScript 函数加载外部 JavaScript 库。

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

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

})

【讨论】：

【解决方案2】：

我很幸运使用 webpack 将我的所有依赖项打包到一个缩小的 application.js 文件中。 Webpack 将处理捆绑所需的 commonjs 模块和第三方库，您可以使用 babel-loader 添加缺少的 es6 支持（导入/导出、const/let、箭头函数等）。

这是我的 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);
  });
}

还有我的 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']
        }
      }
    ]
  }
};

【讨论】：

以及如何使用 safari web inspector 调试 webpack 输出 js？
这应该是公认的答案，使用evaluateScripts 是非常有限的。但是，我确实和@zfu 有同样的问题：你如何调试 webpack 输出？
@jpcarreira 我可以调试 web web 检查器，只需在 webpack 的配置中启用选项 devtool: "inline-source-map"。
嘿 Cezary，在这种情况下，您如何评估脚本？您的资源加载器和演示者是做什么的？谢谢
@cezary-wojtkowski 谢谢你的帖子。我在使用 Webpack 时遇到问题，我的 App 被公开为模块而不是执行的代码。你是如何解决这个问题的？

【解决方案3】：

https://github.com/emadalam/tvml-catalog-using-atvjs

请参阅使用atvjs 框架重写的原始示例代码的此端口，该框架使用Handlebars、lodash、atvjs 等外部库。

【讨论】：