Импорт скеля в проект "Метеор"

Question

Я недавно работаю с Meteor, я пытаюсь импортировать файл javascript: skel.min.js, skel-layout.min.js и skel-viewport.min.js в проект.

3 файла находятся по пути client/js (client/js/skel.min.js, client/js/skel-layout.min.js а также client/js/skel-viewport.min.js).

У меня есть базовый макет в "client/baseLayout/baseLayout.js", и я поставляю следующим образом:

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

Но это всегда показывает мне следующую ошибку:

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

Я пытался переместить файлы, но это тоже не работает.

Что я делаю неправильно?

Мои пакеты:

# 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

благодарить

Answer 1

Похоже, проблема не в том, какой код вы опубликовали, но когда Meteor с нетерпением загружает файлы, он делает две вещи.

1. Он загружает их в алфавитном порядке, так что skel-layout работает раньше skel.min что является ошибкой в ​​вашей консоли. skel.min должен бежать первым.
2. Это оборачивает их новым замыканием, поэтому они не загрязняют глобальное пространство имен.

В дополнение к этому, потому что skel.min использует шаблон UMD, а Meteor использует common.js, он регистрируется в загрузчике модулей, поэтому его можно вызывать с помощью require(), вместо того, чтобы загружать себя в глобальное окно.

Глядя на код в skel Сделки рЕПО, skel-layout а также skel-viewport не использует UMD и не пытается require() или же import skel, он просто ожидает, что он будет доступен в текущем объеме.

Другими словами. Скели полузакрыты свои модульные схемы.

К счастью, есть быстрое решение. Поместите все три файла в client/compatibility Папка и префикс имен с порядком загрузки:

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

Для файлов в compatibility Папка Meteor не загружает их в новом закрытии, поэтому они могут свободно загрязнять глобальный охват.