Замена bower

Бери вебпак

Да я как глянул сколько там надо написать и обалдел. Есть вменяемая дока как мне взять боверовский файл и переписать в вебпак (если у нунчак кстати бовер).

Ну если у тебя уже есть система сборки, то лучше просто ничего не трогай и оставь как есть. Новые же проекты лучше начинать со всяких стартер-китов.

Сами разработчики Bower объявили его deprecated https://bower.io/blog/2017/how-to-migrate-away-from-bower/

При сборке жалобы на то, что бовер скоро отключат. Я боюсь в определенный день остаться со сломанной системой. Вот и занимаюсь.

У меня просто самого есть проект, где кто-то когда-то купил корявый шаблон, который хер знает как собирается, с баувером и галпом, конечно. Но менять я ничего не собираюсь, т.к. сервера с пакетами баура вряд ли кто-то потушит, а что-то новое в проект добавлять я не буду, потому просто оставлю, все как есть.

На чем фронтенд написат? Может имеет смысл взять готовый шаблон для какой-то либы и последовательно переехать?

Не. Там бовер используется просто чтоб стянуть отдельные js типа https://github.com/mozilla/nunjucks и сделать из этой кучи 1 js файл. Фронтэнд просто много jquery. Собственно вот https://rentgenogram.ru/exams Я когда занялся этим там было куча всего, я переписал что смог. Но это чужой pet проект и я не в праве ломать его. А на переписывание уйдет время.

А что тогда мешает все стягивать npm-мом и билдить вебпаком?

тяну npm ом а вот как вебпаком собрать например https://github.com/mozilla/nunjucks я не понял. Везде пример создания бандля из своего JS + кучи либ.

Ну так ставишь эту либу через npm, дальше делаешь import в коде и вебпак соберет все.

https://stackoverflow.com/questions/41506436/react-webpack-add-new-npm-packag...

я просто бэкенд программист. Вот вынужден учить фронт. ерминологию понимаю (программирую с 95 года). А вот опыта мало.

Спасибо. Попробую.

Если тебе нужно «прост склеить в один файл кучку других файлов», то вебпак тебе нафиг не нужен. Можно просто взять gulp-concat и все, типо так:

var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('javascript', function() {
  return gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('all.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

Спасибо. Мне не это надо. Дело в том, что если заглянуть в https://github.com/mozilla/nunjucks/tree/master/src Я так понимаю, что файлы склеиваются в определенной последовательности. Иначе я их вообще cat >> out.js склеил.

У меня bower:

"dependencies": {
    "bootstrap": "~3.3.7",
    "bootstrap-file-input": "~1.1.0",
    "bootbox": "~4.4.0",
    "jquery-cookie": "~1.4.1",
    "jquery-ui": "*",
    "EasyAutocomplete": "*",
    "eonasdan-bootstrap-datetimepicker": "*",
    "bootstrap-multiselect": "*",
    "moment": "*",
    "sly": "*",
    "nunjucks": "*",
    "markitup": "*",
    "showdown": "*",
    "animate.css": "*",
    "summernote": "*"
  },

Собственно он каждый собирает в 1 js. Тоесть для каждой строки свой js. Но у них есть еще зависимости. Вот. Я как пишут создатели bower хочу отказаться от него ибо они сказали что пора. как варианты yarn (не нравится, что я должен в системе сборки (которая потом в контейнер пойдет) будет curl что то качать). Либо Parcel, либо как посоветовали webpack (я не понял пока как его поставить чтоб он заработал с командной строки).

Я так понял, что parcel рассчитан чтоб собрать бандл. Поэтому он все оборачивает в какую то структуру образуя пространство имен. А у меня на страницах есть <script>код</script> И этот код не видит такие библиотеки.

Ну раз тебе нужна полноценная сборка то кури документацию к webpack ибо это стандарт индустрии для сборки. Я сам бекендер и не очень хорошо в нем шарю. Но судя по тому что ты используешь у почти всех библиотек есть бандлы которые тупо можно подключить к странице и все заработает, их склеивать и нужно. Я бы пошел по этому пути. Но думаю написать конфиг для вебпака под твои нужды не сильно сложнее.

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

Да что за дурацкая мода склеивать всё в одно ещё и минифицировать. Кто эту тупость запустил?? Теперь js на сайте просто не расковырять — а мне надо смотреть, что там мне хотят подсунуть на выполнение.

Чем фронтендерам набор <script async src=...> не угодил? В этих ваших системах сборки вообще есть возможность не склеивать?

Сейчас какой выбрать инструмент решает мода, а не рациональность

В небольших проектах достаточно просто подключать через script

Yarn для этого более чем достаточно

Потому, что новые фреймворки и библиотеки требуют компиляции. Вуй, реакт, ангуляр. Их просто так не подключишь скриптом в страницу (ну кроме вуя), потом файлов в проекте может быть тысячи. А ангуляр без минификации вообще мегабайт 15 весит, а с минификацией полтора.

Куда npm кладет склеенное?

а зачем они прячут снаружи бандл?

тут правильней сказать куда мантейнер пакета кладет собранный,
вот например bootstrap установленый через npm

ls -R -1 node_modules/bootstrap/dist/

./css:
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map

./fonts:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2

./js:
bootstrap.js
bootstrap.min.js
npm.js

Так мантейнер дает уже собранный?

да, и в bower так было

Вебпак тормозное УГ, используй роллап, он собирает за 60-100 мс в среднем аппликуху на js, типа всяких vue, react. https://github.com/rollup/rollup

Вся проблема в том, что я могу выискивать откуда качать уже собранное или с помощью npm брать от поставщика последние версии и там я вынужден собирать сам. Хочется как и раньше собирать самому. Я там на гитхаб давал ссылку. Там нет собранного и npm мне собранный не поставит. Вот это и беда.

пробовал ставить и смотреть что поставилось?

npm ом? Так кажется я кривоглазый.

Не я не кривоглазый. Через npm sly.js ставится не собранным. А вот bower собирает. А нунчаки собранные. Так я наверное пойду посплю. 2-е суток с этим мучаюсь и туплю уже.

вот как вебпаком собрать например https://github.com/mozilla/nunjucks я не понял

Ты не поверишь, но оно из коробки собирается вебпаком.

Пруфы:

https://github.com/mozilla/nunjucks/blob/master/package.json#L69

https://github.com/mozilla/nunjucks/blob/master/scripts/bundle.js#L9

Спасибо.

yarn + webpack

webpack уже научился собирать подпроекты с раздельными конфигами?

так понимаю, что файлы склеиваются в определенной последовательности.

Вебпак берёт то, что у тебя написано в entry и пытается это рекурсивно переварить с помощью loader'ов. JS он умеет из коробки (но многие включают babel вместо изкоробочного).

Вебпак пройдёт по каждому import'у (или require) и пропустит их через loader, которые подходят под тип импортируемого файла. Глобально доступные вещи (вроде jquery), которые не импортируются/странно импортируются, подключаются отдельно, гугль скажет, как именно. При этом вебпак с loader'ами переварит ВСЁ, что ты хочешь включить в бандл, будь это js, jsx, typescript, es-next (тут всё понятно), css, less, scss (включит прямо в бандл с JS если нет ExtractTextPlugin, вытащит в отдельный файл если есть. Да, он пройдёт по каждому импорту), каждый шрифт и каждый background из этих стилей (некоторые loader'ы конфигурябельны на уровне «инлайнить до X байт, остальное отдельным файлом», но он сам скопирует этот файл в директорию с выхлопом) и так далее. При желании — можно импортировать, скажем, html (строкой, angular-шаблоном, underscore-шаблоном, да чем угодно, для чего найдёшь loader).

Суть — в том, что он рекурсивно пройдёт от каждого entry и вытащит только то, что ему нужно (импортируется) и будет жаловаться каждый раз когда не найдёт loader хоть для чего-то.

Ну и оно настраивабельнее, чем всякие хипстерские rollup'ы. Плата за это — медленная работа.

Не вижу вообще никаких проблем сделать N конфигов и добавить N вызовов webpack'а хоть напрямую в package.json, хоть в отдельный билд-скрипт (на ноде или ещё чём).

Не вижу вообще никаких проблем сделать N конфигов и добавить N вызовов webpack'а хоть напрямую в package.json, хоть в отдельный билд-скрипт (на ноде или ещё чём).

watch не осилил.

watch же встроен в вебпак вместе с (опционально) hmr.

Как ты watch для нескольких вебпак-конфигов завернёшь в один package.json?

https://duckduckgo.com/?q=parallel package.json&t=ffab&ia=qa

Точно так же, как и несколько вообще любых задач в одном package.json.

Точно так же, как и несколько вообще любых задач в одном package.json.

Терпимо, спасибо.

Зачем N вызовов, просто в webpack.config.js экспортируешь массив конфигов и все. https://webpack.js.org/configuration/configuration-types/#exporting-multiple-...

Если тебе не нужна система сборки и достаточно подключения через тэг <script>, то посмотри на https://www.jsdelivr.com/

не не CDN зло.

bower вообще ничего не собирает. Да и не хранит тоже ничего. Он скачивает из git-репозитория и всё. А вот автор пакета собирает и коммитит в него в какой-нибудь каталог типа dist. Конкретно в nunjucks этот католог назывался browser. Кажется, его убрали в версии 3.1.0.