如何在流星应用程序中使用 famo.us CDN 链接？答案

【问题标题】：How can I use the famo.us CDN links in a meteor application?如何在流星应用程序中使用 famo.us CDN 链接？
【发布时间】：2015-02-12 04:47:26
【问题描述】：

随着 famo.us 的发布，它拥有所有库作为 CDN 托管库。如何在流星应用中使用这些？

famo.us 代码中的“定义”有很多问题...

我所做的是创建一个新的流星应用程序，然后从 famo.us 样板中提取 html 并将其放入客户端文件夹中，使其看起来像

<head>  
  <title>famo.us App</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />

        <!-- shims for backwards compatibility -->
        <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>

        <!-- module loader -->
        <script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>

        <!-- famous -->
        <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.2/famous.css" />
        <script type="text/javascript" src="http://code.famo.us/famous/0.2/famous.min.js"></script>

        <!-- app code -->
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <script type="text/javascript">
            require.config({'localhost:3000': 'public/'});
            require(['main']);
        </script>

</head>

<body>  
</body>

然后我把样板的 src 文件夹中的 main.js 放到了流星的 client/compatibility 文件夹中。但它并没有真正起作用。回来了

Uncaught ReferenceError: define is not defined

来自 main.js

main.js 看起来像

define(function(require, exports, module) {
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var ImageSurface = require('famous/surfaces/ImageSurface');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var logo = new ImageSurface({
        size: [200, 200],
        content: 'http://code.famo.us/assets/famous_logo.svg',
        classes: ['double-sided']
    });

    var initialTime = Date.now();
    var centerSpinModifier = new Modifier({
        origin: [0.5, 0.5],
        transform : function(){
            return Transform.rotateY(.002 * (Date.now() - initialTime));
        }
    });

    mainContext.add(centerSpinModifier).add(logo);
});

从源码看，好像是因为meteor已经编译了main.js，并且在famo.us的东西被加载之前就被包含进来了。

【问题讨论】：

你试过把它作为一个包添加吗？
Meteor 没有办法添加不能作为 Atmosphere 包使用的单个 JS 文件吗？如果是这样，只需从 CDN 下载 Famous.js 并将其保存到您的项目本地。这样 Meteor 的构建系统就可以将其打包。
famo.us 的工作方式并不是那么简单

标签： meteor famo.us

【解决方案1】：

您是否尝试过将 main.js 直接加载到脚本标记中，而不是使用脚本标记来“要求”它。我正在做类似的事情，将 main.js 代码直接注入到 html 中，但这里是一个我已经将它拆分出来并且它可以工作的例子（虽然我没有使用流星。）

显然，我还对代码进行了一些更改，而不是使用定义，但这种更改是直截了当的。这是html和js... html:

<html>
<head>
<title>Debug Output</title>
<meta name='viewport' content='width=device-width, maximum-scale=1, user-scalable=no' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<script type='text/javascript' src='http://code.famo.us/lib/functionPrototypeBind.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/classList.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/requestAnimationFrame.js'></script>
<script type='text/javascript' src='http://code.famo.us/lib/require.js'></script>
<link rel='stylesheet' type='text/css' href='http://code.famo.us/famous/0.2/famous.css' />
<script type='text/javascript' src='http://code.famo.us/famous/0.2/famous.min.js'></script>
<link rel='stylesheet' type='text/css' href='styles/app.css' />
<script type='text/javascript' src='tstPackage.js'>
</script>
</head>
<body>
</body>
</html>

js:

require(['famous/core/Engine','famous/core/Surface'],function(Engine,Surface) {
// Famo.us Context Example 
//var Engine  = require('famous/core/Engine');
//var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var surface = new Surface({
    size: [200, 200],
    content: 'Hello World',
    classes: ['red-bg'],
    properties: {
    lineHeight: '200px',
    textAlign: 'center'
}
});

mainContext.add(surface);
// from https://famo.us/examples/0.2.0/core/context/example

});

【讨论】：

meteor 的工作方式有点不同。它会在您的项目中找到所有 js 并将它们全部组合在一起，它似乎在加载 CDN 脚本之前执行此操作。
实际上，经过一番修改，我得到了这个工作，谢谢！
截至 2015 年 2 月，将 Famo.us 与 Meteor 一起使用的推荐方法是添加 Famo.us packages 之一。

【解决方案2】：

您是否尝试过将 mjn: Famous 包导入您的流星项目？

流星添加mjn：著名

【讨论】：

截至 2015 年 2 月，将 Famo.us 与 Meteor 一起使用的推荐方法是添加 Famo.us packages 之一。

【解决方案3】：

好问题； famo.us 正在远离 Yeoman / Grunt

要清理 Rich 的答案，这里有一个简单的 index.html

<html>
  <script src='http://code.famo.us/lib/require.js'></script>
  <script src='http://code.famo.us/famous/0.2/famous.min.js'></script>

  <script>
    require([
      'famous/core/Engine',
      'famous/core/Surface',
      'famous/core/Modifier'
    ], function(Engine, Surface, Modifier){
      var context = Engine.createContext();

      var helloSurf = new Surface({
        content: 'hello world',
        properties: {
          backgroundColor:'red'
        }
      });

      var helloMod = new Modifier({
        size: [100, 100],
        origin: [.5, 0]
      });

      context.add(helloMod).add(helloSurf);
    });
  </script>
<html>

【讨论】：

截至 2015 年 2 月，将 Famo.us 与 Meteor 一起使用的推荐方法是添加 Famo.us packages 之一。
没有。由a few hundred people推荐。