Как использовать библиотеку Lodash внутри шаблонов Pug-а?

Question

[lorentso]

Добрый день
Буду рад, если кто-то подскажет, как можно работать с Lodash непосредствено внутри шаблонов Pug-а.
Два года назад нашел решение, но теперь вспомнить не могу. Буду признателен, если кто-то напишет подробную инструкцию, ибо я бросил изучать и все уже забыл.

Answer 1

[Андрей Хохлов]

Подключите внутри конфига сборщика, который вы используете

Например:
https://stackoverflow.com/questions/28870322/using...

Comments

[lorentso]

Спасибо! Я смутно припоминаю, что действовал именно так, но, вроде бы, подключением этих опций не обошлось., Lodash не вызывался. Пришлось искать еще что-то дополнительно. Один человек мне помог в свое время найти обходной путь. Рецепт я утратил, но, каким-то образом, сохранился результат -- кусочки кода с использованием. Остальное я в сердцах удалил. Что я делал и для чего уже не вспомниь сейчас и разобрать. Просто экспериментировал.

Выглядело это примерно так.

-var uniq = L._.uniq([2, 1, 2]);
		each y in uniq
			div= y
	- var rypdal = [' Rypdal ', ' norske ', ' jazz' ];
	- var fripp = [' Fripp ', ' UK ',' art-rock '];
	- var pyart = [' Pyart ', ' est ', ' conemporary '];
	- var art = [rypdal,	fripp, pyart];
	- var zip = L._.zip(rypdal,	fripp, pyart);
		each z in zip
			div= z
	ul
		each q in art
			li #{q}

	- var join = L._.join(['a', 'b', 'c'], ' -- ');
		p= join
	- var Uniq1= L._.uniq(['jazz', 'jazz', 'rock', 'jazz', 'jazz', 'contemporary' ]);
		ul список
			each item in Uniq1
				li= item

	- var take = L._.take(['artist', 'albom', 'genre'], 2);
		each item in take
			p= item
	-var array = [{name: 'Terje Rypdal', genre:'jazz'}, {name: 'Robert Fripp', genre:'art-rock' }];
	-var filter = L._.filter(array, {genre:'jazz'});

..точно помню, что одним разрешением на нижнее подчеркивание не обошлось, приходилось еще вызвать отдельно Lodash командой. Вот эта заглавная " L " с точкой перед каждым методом , то есть пред каждым нижним подчеркиванием и есть условная команда, которую пришлось прописать. Без этого ничего не работало, но вот как эту команду я прописывал, уже найти нигде не могу.

[Андрей Хохлов]

lorentso, так вы попробовали то что по ссылке или нет?

[lorentso]

Андрей Хохлов, еще пока не успел. настраиваю заново сборку. как попробую -разу напишу!)

[lorentso]

Андрей Хохлов, что-то увы, не работает у меня как в совете по ссылке. Установил lodash (gulp-lodash упорно в мою сборку устанавливаться не хочет) , и попробовал прикрутить. В итоге? когда использую lodash , система выдает, что не опознает "_".

кусок кода из gulpfile.js был таким.

function pug2html() {
return gulp.src('src/pug/pages/*.pug')

.pipe(gulpPlumber())
.pipe(gulpPug( {
data: function(dest, src) {
return {
_: require('lodash'),
};
}

[Андрей Хохлов]

lorentso, скиньте архивом, так не понятно

[lorentso]

Андрей Хохлов, я, к счастью, вспомнил, как это делается.

первым делом установил Lodash

-----
lodash = require('lodash'),
_ = require('lodash');
---
Затем прописал в опциях обработчика файлов следующий код:

data : {
locals: lodash,
"lsh" : lodash,

}
-- ----
на второй строке ключ может быть разным -- просто условный вызов
----
получилось в целом так

function html() {
return src(path.src.html)
.pipe(gulpPug( {plugins: [pugbem],
pretty: true,
data: {
locals: lodash,
"lsh" : lodash
}
}))
.pipe(dest(path.build.html))
.pipe(browsersync.stream())
}

теперь я могу писать примерно так:

- var concat = lsh._.concat(arr1, arr2)

----
что важно! -- после вызова lodash через ' lsh' необходимо обязательно поставить " ." -- без точки почему-то не работает, то есть точки получается две, -- одна после вызова Lodash, вторая, как и положено, перед методом, то есть нижние подчеркивание окаймлено двумя точками.
---
P.S
Несмотря на то, что я пользуюсь сборщиком gulp, я установил не gulp- lodash, а просто lodash. -- со вторым у меня всегда были проблемы, и по-моему, этот прием не работал.
P.P.S
Способ предложенный по ссылке не работает как и многие другие методы, которые я перепробовал раньше.

[Андрей Хохлов]

lorentso, всё работает:

package.json

{
  "name": "pug-lodash-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-pug": "^5.0.0",
    "pug": "^3.0.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

gulpfile.js

const { src, dest } = require('gulp');
const pug = require('gulp-pug');
const _ = require('lodash');

exports.views = () => {
  return src('./src/*.pug')
    .pipe(
      pug({
        data: {
          message: 'Hello, world!',
          _,
        },
      }),
    )
    .pipe(dest('./dist'));
};

src/index.pug

h1
    =message
h2
    =_.camelCase('Foo Bar')

[lorentso]

Андрей Хохлов, Спасибо большое. Все работает!

Оказывается это так просто.

...Но ваш вариант, однако, отличается от приведенного в ссылке выше.

[lorentso]

Андрей Хохлов, Хорошо бы отметить как решенный вопрос. Только на комменте не поставишь

[Андрей Хохлов]

lorentso, отметьте решением ответ. Я сделал ровно то, что там написано.

[lorentso]

Андрей Хохлов, хорошо, отмечу, только ваш ответ оличается -- вот именно он работает, а предложенное на stackoverflow.com. -- для меня нет, хотя я копировал все в точности и неоднократно.