zoxon / gulp-front

Frontend boilerplate and framework based on gulp, pug, stylus and babel
https://zoxon.github.io/gulp-front
MIT License
262 stars 58 forks source link

Не могу подключить jQuery #54

Closed trixter5 closed 6 years ago

trixter5 commented 6 years ago

Понадобился range slider(period) для фильтра по ценам. Было бы быстрее подключить на jQuery готовый плагин. Не могу через модуль подключить jquery так, чтобы все работало. Либо ошибки, либо ничего. Последний вариант без ошибок так Модуль `import {jQuery as _$} from "jquery" import ionRangeSlider from "ion-rangeslider"

export default () => { _$, ionRangeSlider }`

main.js import rangeSlider from "@/modules/range-interval/range-interval";

(function(_$, ionRangeSlider) { _$('.rangeSlider').ionRangeSlider(); });

Буду признателен з аподсказку

zoxon commented 6 years ago

Все намного проще чем кажется

// slider.js
import $ from "jquery";
import "ion-rangeslider"; // делать здесь named import бессмысленно, импортируем глобально

// это простейший вариант модуля
// экспортируем функцию
export default () => $("#example_id").ionRangeSlider();

// если нужно передавать параметры можно сделать так
// лучше сразу так делать, это на много гибче
export default (selector, options) => {
  const defaultOptions = {
    grid: true
  };
  const mergedOptions = Object.assign({}, defaultOptions, options);

  return $(selector).ionRangeSlider(mergedOptions);
}
// main.js
import Slider from "@/modules/slider/slider";
Slider("#slider", {
  type: "double",
  min: 0,
  max: 1000,
  from: 200,
  to: 500,
  grid: false
})
// slider.styl
@import "ion-rangeslider/css/ion.rangeSlider.css"

// ваши стили
zoxon commented 6 years ago

@trixter5 у вас все получилось?

trixter5 commented 6 years ago

@zoxon, да все супер! Спасибо за такой быстрый ответ. Сделал с передачей параметров. Ваша сборка, лучшая из того, что я видел для верстки. По ней можно js учить.

zoxon commented 6 years ago

Спасибо, что пользуетесь