Skel import dans Meteor Project

Question

Je travaille depuis peu avec Meteor, j'essaie d'importer un fichier javascript: skel.min.js, skel-layout.min.js et skel-viewport.min.js dans un projet . Les fichiers se trouvent sur le chemin client/js (client/js/skel.min.js, client/js/skel-layout.min.js et client/js/skel-viewport.min.js).

J'ai la mise en page de base "client/baselayout/baseLayout.js" et je livrerai comme suit:

import angular from 'angular'; 
import angularMeteor from 'angular-meteor'; 
import uiRouter from 'angular-ui-router'; 
import * as skel from '../js/skel.min.js'; 


(function ($) { 
    skel.breakpoints ({ 
        xlarge: '(max-width: 1680px)', 
        large: '(max-width: 1280px)', 
        medium: '(max-width: 980px)', 
        small: '(max-width: 736px)', 
        xsmall: '(max-width: 480px)', 
        'xlarge-to-max': '(min-width: 1681px)', 
        'small-to-xlarge': '(min-width: 481px) and (max-width: 1680px)' 
    }); 
. 
. 
. 

Mais il me montre toujours l'erreur suivante:

Uncaught ReferenceError: skel is not defined 
    at skel-layout.min.js (app.js? hash = e2c356f13dbdbc8f5ea02b405b7c429aff6b8bef: 699) 
    at fileEvaluate (modules-runtime.js? hash = 8587d188e038b75ecd27ed2469a52b269e38fb62: 343) 
    at require (modules-runtime.js? hash = 8587d188e038b75ecd27ed2469a52b269e38fb62: 238) 
    at app.js? hash = e2c356f13dbdbc8f5ea02b405b7c429aff6b8bef: 1157 

J'ai essayé pour déplacer les fichiers mais ça ne marche pas non plus.

Qu'est-ce que je fais mal?

Mes paquets:

# Meteor packages used by this project, one per line. 
# Check this file (and the other files in this directory) into your repository. 
# 
# 'meteor add' and 'meteor remove' will edit this file for you, 
# but you can also edit it by hand. 

meteor-base@1.1.0    # Packages every Meteor app needs to have 
mobile-experience@1.0.5  # Packages for a great mobile UX 
mongo@1.2.2     # The database Meteor supports right now 
blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views 
reactive-var@1.0.11   # Reactive variable for tracker 
tracker@1.1.3     # Meteor's client-side reactive programming library 

standard-minifier-css@1.3.5 # CSS minifier run for production mode 
standard-minifier-js@2.1.2 # JS minifier run for production mode 
es5-shim@4.6.15    # ECMAScript 5 compatibility for older browsers 
ecmascript@0.8.3    # Enable ECMAScript2015+ syntax in app code 
shell-server@0.2.4   # Server-side component of the `meteor shell` command 

insecure@1.0.7    # Allow all DB writes from clients (for prototyping) 
iron:router 
twbs:bootstrap 
rlespagnol:skeleton-css 
johnantoni:meteor-skeleton 
jquery 
fourseven:scss 

à remercier

Answer 1

On dirait que la question n'est pas votre code qui vous avez publié, mais quand Meteor charge avec impatience les fichiers, il fait deux choses.

1. Il les charge par ordre alphabétique, donc skel-layout est en cours d'exécution avant skel.min qui est l'erreur dans votre console. skel.min doit être exécuté en premier. Il les enveloppe dans une nouvelle fermeture, de sorte qu'ils ne polluent pas l'espace de nom global.

En plus de cela, parce que skel.min utilise le modèle UMD et Meteor utilise common.js, il s'enregistre avec le chargeur de modules de sorte qu'il peut être appelé avec require(), au lieu de chargement lui-même sur la fenêtre globale.

En regardant le code dans le repo skel, skel-layout et skel-viewport ne pas utiliser UMD ou tentative de require() ou import skel, juste attend qu'il soit disponible dans le cadre actuel.

En d'autres termes. Skel a à moitié arsed leur modèle de module.

Heureusement, il existe une solution rapide. Mettez tous les trois fichiers dans le dossier client/compatibility et le préfixe des noms avec l'ordre de chargement:

1-skel.min.js 
2-skel-layout.min.js 
3-skel-viewport.min.js 

Pour les fichiers dans le dossier compatibility, Meteor ne les charge pas dans une nouvelle fermeture et ils peuvent polluer librement le monde portée.