Обзор с помощью Zurb Foundation Framework

РЕШЕНИЕ ПОСЛЕ РЕШЕНИЯ

Вот генератор Yeoman для создания проекта с помощью Foundation и Browserify: https://github.com/dougmacklin/generator-foundation-browserify

Я пытаюсь выяснить, как правильно связать базовый фреймворк js с http://browserify.org/.

В папке моего проекта я устанавливаю его вместе с jQuery (от которого это зависит):

npm install jquery foundation-sites --save

Тогда по моему main.js У меня есть следующее:

var $ = jQuery = require('jquery');
var foundation = require('foundation-sites');
$(document).foundation();

Я включаю $ = jQuery = ... потому что если я не получу jQuery is not defined ошибка.

Однако компоненты js не работают. Например, элементы оповещения не закрываются должным образом.

<div data-alert class="alert-box">
    <!-- close functionality not working -->
    <a href="#" class="close">&times;</a>
</div>

Если это поможет, вот plunkr, который включает в себя мой index.html, main.js, bundle.js, package.json а также gulpfile.js,

Я все еще промокаю ногами от browserify, должен ли я использовать для этого browserify-shim или я делаю что-то еще неправильно?

Источник

2 ответа

Решение

С фундаментом 6 и недавним jquery ("^2.1.0") шимминг больше не нужен. Вы можете просто использовать

global.$ = global.jQuery = require('jquery');
require('what-input');
require('foundation-sites');
$(document).foundation();

в вашем main.js файл. Обратите внимание, что установка обоих $ а также jQuery для глобального (т. е. присоединения их к объекту окна) требуется в качестве основы 6 по той или иной причине выбрать зависимость от глобального jQuery (вместо использования require).

Отметим также, что alert механизм был отброшен в фундаменте 6, если вы хотите увидеть рабочий пример, используйте вместо этого закрывающую выноску предупреждения.

Источник

Я полагаю, что вы должны просмотреть библиотеку. В настоящее время я делаю это в своем проекте, и он работает правильно. Я использую бауэр для управления фундаментом, но он должен быть похож на npm. Соответствующая настройка в моем package.json следующая:

"browser": {
  "jquery": "./src/bower_components/jquery/dist/jquery.min.js",
  "foundation": "./src/bower_components/foundation/js/foundation.js"
},
"browserify-shim": {
  "jquery": "$",
  "foundation": "foundation"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
}

Тогда я могу просто потребовать фундамент, как обычно, var foundation = require('foundation'); после запроса jQuery и использовать его для инициализации в документе.

Источник
Другие вопросы по тегам