Ich versuche Seriousy.js in eine Meteor-Anwendung zu importieren, erhalte ein Objekt typeerror

Question

Ich versuche, die Seriousy.js-Bibliothek (https://github.com/brianchirls/Seriously.js/) in einer Meteor-Anwendung zu verwenden. Ich habe die Bibliothek in einem/Import Ordner in meinem Meteor Anwendung gebracht, und ich bin eine Variable im Ernst von seriously.js an der Spitze über die gesamte Funktion exportieren:

export var Seriously = (function (root, factory) { 
'use strict'; 
if (typeof define === 'function' && define.amd) { 
    // AMD. Register as an anonymous module. 
    define('seriously', function() { 
     var Seriously = factory(root); 
     if (!root.Seriously) { 
      root.Seriously = Seriously; 
     } 
     return Seriously; 
    }); 
} else if (typeof exports === 'object') { 
    // Node. Does not work with strict CommonJS, but 
    // only CommonJS-like enviroments that support module.exports, 
    // like Node. 
    module.exports = factory(root); 
. 
. 
. 
etc. 

Der Rest des Seriously.js Code ist dasselbe. Dann importiere ich in einem Client-Skript:

Ich habe dann Client-Code. Wenn jedoch der Code ausgeführt wird, führt der Browser diesen Fehler:

meteor.js?hash=ae8b8af…:930 Exception from Tracker afterFlush function: 
2016-06-09 21:30:19.486 meteor.js?hash=ae8b8af…:930 TypeError: _seriously.Seriously is not a constructor 

, die diesen Teil meines Code verweist:

var seriously = new Seriously(); 

und kompiliert in Meteor:

var seriously = new _seriously.Seriously();     

ich versucht habe, verschiedene Möglichkeiten, die Seriously-Klasse in Meteor zu exportieren, aber nichts scheint zu funktionieren, und ich stoße in den gleichen Fehler. Gibt es eine Möglichkeit, diese Bibliothek richtig in Meteor zu importieren?

Answer 1

Da Sie Probleme, mit einer brandneuen Meteor-Anwendung als auch, werden wir von einer neuen App starten:

meteor create myapp 
cd myapp 
meteor npm install 
meteor 

Nichts Besonderes, hier sind wir nur eine einfache Anwendung erstellen. Wir möchten das von Meteor zur Verfügung gestellte Modulsystem verwenden, das sicherstellt, dass unser Code nur ausgeführt wird, wenn wir ihn anfordern. Dazu platzieren wir unsere Bibliothek im Ordner imports, und Meteor wird diese Datei nur dann bündeln und einbeziehen, wenn sie aus einer anderen Datei mit einer import-Anweisung referenziert wird. Wir können unsere seriously.js im folgenden Ordner abgelegt:

imports/seriously/seriously.js 

Wenn wir unsere Standard neue App bleiben, können wir die client/main.js Datei bearbeiten, um sie zu importieren, und das ist, wo die Dinge unterscheiden.

Wir müssen wie eine Import-Anweisung ohne geschweifte Klammern verwenden:

import Seriously from '/imports/seriously/seriously.js'; 

Der Teil in geschweiften Klammern in einer import Anweisung genannt Exporte. Um dies zu unterstützen, muss die Bibliothek so etwas wie export { Something, SomethingElse, etc. } tun.

Ernsthaft ist standard JS-Bibliothek von Drittanbietern und verwendet diese Syntax nicht, so dass wir auf export default Something zurückgreifen. Beim Importieren ohne geschweifte Klammern weisen wir diesen Standardexport einfach der Variablen-ID zu, die wir ausgewählt haben, z. B. Seriously.

Mit dem import arbeiten, können wir jetzt ernsthaft nutzen, wenn die Vorlage wiedergegeben wird:

Template.hello.onRendered(function helloOnRendered() { 
    var seriously = new Seriously(); 

    var icon = seriously.source('#icon'); 
    var target = seriously.target('#canvas'); 
    target.source = icon; 

    seriously.go(); 
}); 

die Auswirkungen angeht, wenn man sie braucht, die offensichtlich der Fall sein wird, werden wir mehr Probleme begegnen aufgrund des neuen Parsing/Import-Codes, der von Meteor in 1.3 verwendet wird.

Wenn Sie versuchen, einen Effekt wie diese zu importieren:

import Seriously from '/imports/seriously/seriously.js'; 
import '/imports/seriously/effects/seriously.vignette.js'; 

Die Ausgabe von Meteor wird:

Unable to resolve some modules: 

    "seriously" in /Users/HiDeo/test/myapp/imports/seriously/effects/seriously.vignette.js (web.browser) 

If you notice problems related to these missing modules, consider running: 

    meteor npm install --save seriously 

Laden der in einem Web-Browser in Uncaught Error: Cannot find module 'seriously' führen.

Dieses Problem wird in this post auf ihrem Forum beschrieben, aber im Moment nicht angesprochen.

Wenn wir the source code für diesen Vignette-Effekt betrachten, können wir sehen, dass der Lademechanismus identisch ist mit dem im Forum Post beschriebenen und Probleme haben.

In unserem Fall wird factory(require('seriously')); ausgeführt, aber es gibt kein Modul "ernst". Bei der Angabe in der Post und bis das Problem behoben ist, müssen wir diesen Lademechanismus ändern, um stattdessen factory(require('/imports/seriously/seriously.js')); auszuführen. Der ganze Block würde wie folgt aussehen:

if (typeof define === 'function' && define.amd) { 
    // AMD. Register as an anonymous module. 
    define(['seriously'], factory); 
} else if (typeof exports === 'object') { 
    // Node/CommonJS 
    factory(require('/imports/seriously/seriously.js')); 
} else { 
    if (!root.Seriously) { 
    root.Seriously = { plugin: function (name, opt) { this[name] = opt; } }; 
    } 
    factory(root.Seriously); 
} 

Wir können dann unseren Code modifizieren neuen Effekt zu nutzen:

Template.hello.onRendered(function helloOnRendered() { 
    var seriously = new Seriously(); 

    var icon = seriously.source('#icon'); 
    var target = seriously.target('#canvas'); 

    var vignette = seriously.effect('vignette'); 
    vignette.source = icon; 
    vignette.amount = 10; 

    target.source = vignette; 

    seriously.go(); 
}); 

Und nach einem Reload, wird der Effekt angewendet werden:

Leider müssen wir dies für alle in der Anwendung verwendeten Effekte tun, bis das Problem behoben ist.