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

随着famo.us的发布，它将所有库作为CDN托管的库。我怎样才能在流星应用程序中使用它们？如何在流星应用程序中使用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>

然后，我已经采取了main.js锅炉板的src文件夹，放入的客户端/兼容性文件夹流星。但它并不真正起作用。回来与

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); 
});

从查看源，它看起来像它的，因为流星编制main.js并列入在famo.us的东西被加载之前。

来源

2014-05-23 Keith Nicholas

你试过把它作为一个包裹来添加吗？ –

流星没有办法添加单个JS文件作为Atmosphere包不可用吗？如果是这样，只需从CDN下载famous.js并将其保存到您的项目中。这样Meteor的构建系统就可以打包。 –

与famo.us的作品 –

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

很明显，我也对代码做了一些修改而不是使用define，但是这个改变是直截了当。下面是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 

});

来源

2014-05-25 21:20:22 rich

不一样那么简单，流星的作品有点不同。它可以找到你项目中的所有js，并将它们集中在一起，似乎在加载CDN脚本之前就这样做了。 –

实际上，随着一些黑客入侵，我得到了这个工作，谢谢！ –

截至2015年2月，与Meteor一起使用Famo.us的推荐方式是添加一个[Famo.us包]（https://atmospherejs.com/?q=famous）。 –

很大的问题; famo.us正在从约曼/咕噜

远

清理丰富的答案，这里有一个简单的的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>

来源

2014-05-28 20:59:13 neaumusic

截至2015年2月，与流星一起使用Famo.us的推荐方式是添加一个[Famo.us软件包]（https://atmospherejs.com/?q=famous）。 –

由您推荐 – neaumusic

号码[由几百人推荐]（https://github.com/gadicc/meteor-famous-views）。 –

您是否尝试导入MJN：著名的包到您的流星的项目？

meteor add mjn：着名的

来源

2015-02-11 20:47:26

截至2015年2月，推荐使用Famo的方式。我们与Meteor是添加一个[Famo.us包]（https://atmospherejs.com/?q=famous）。 –

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

回答

相关问题