Как я могу использовать ссылки CDN famo.us в метеорном приложении?

С выпуском 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.

Источник

3 ответа

Решение

Вы пытались загрузить main.js непосредственно в теге script вместо использования тега script, чтобы "потребовать" его. Я делаю нечто подобное, когда я вставляю код 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>

ЯШ:

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

});
Источник

Вы пытались импортировать пакет mjn: known в ваш метеоритный проект?

Метеор добавить MJN: известный

Источник

Отличный вопрос; 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>
Источник
Другие вопросы по тегам