流星项目中的Skel导入

Question

I'm new working with Meteor, I'm trying to import a javascript file: skel.min.js, skel-layout.min.js and skel-viewport.min.js into a project.

The 3 files are on the client/js path ( client/js/skel.min.js , client/js/skel-layout.min.js and client/js/skel-viewport.min.js ).

I have the base layout in "client/baseLayout/baseLayout.js" and I deliver as follows:

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

But it always shows me the following error:

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

I tried to move the files but it does not work either.

What am I doing wrong?

My packages:

# 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

to thank

Answer 1

Looks like the issue isn't your code that you posted, but when Meteor eagerly loads files it does two things.

1. It loads them alphabetically, so skel-layout is running before skel.min which is the error in your console. skel.min needs to run first.
2. It wraps them in a new closure, so they don't pollute the global namespace.

In addition to that, because skel.min uses the UMD pattern and Meteor uses common.js, it registers itself with the module loader so it can be called with require() , instead of loading itself onto the window global.

Looking at the code in the skel repo, skel-layout and skel-viewport doesn't use UMD or attempt to require() or import skel, it just expects it to be available in the current scope.

In other words. Skel have half-arsed their module pattern.

Thankfully there's a quick fix. Put all three files in the client/compatibility folder and prefix the names with the load order:

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

For files in the compatibility folder, Meteor doesn't load them in a new closure and so they can freely pollute the global scope.