Как подключать к странице библиотеки из node_modules?

Question

[Денис Букреев]

Такие дела.

Все было лень разобраться с этим вопросом и постоянно то перекопировал весь код в созданный файл и сливал с основным app.js, то скачивал через браузер и запехивал вручную в папку libs и потом уже подключал - неудобно и надоело.

Вот у меня есть npm, gulp и моя страница, состоящая из index.html и app.js.
app.js конкатенируется в gulp из множества файлов в соседней папке.

И вот я, например, качаю babel-polyfill через npm, он аккуратно ложится в node_modules и.. что дальше? Как его подключить?
В последний раз я ручками прописал путь в gulp concat от корня проекта до нужного файла в node_modules - node_modules/babel-polyfill/dist/polyfill.min.js - но это полный бред. Должен быть способ проще. Может просто прописывать название модуля и gulp его найдет по своим алгоритмам?

Answer 1

[Олег]

Взгляните на gulp-inject
Указываете в gulpfile пути к файлам которые хотите подключить, и они подключатся в место, которое укажете в нужный файл .html

Comments

[Денис Букреев]

да, но мне надо чтоб все сливалось с одним файлом
я отдельно подрубаю только библиотеки из CDN

Answer 2

[mayor-jojo]

require('babel-polyfill')
Browserify

Answer 3

[Антон]

rollupjs.org - вроде как лучший на данный момент загрузчик модулей

пример

import $ from "jquery";
import 'utils/myutil'; // .js на конце не обязателен

$(document)...

И делаем билд (рекомендую через npm scripts)
rollup src/main.js --output bundle.js

Answer 4

[Дмитрий Беляев]

Попробуйте webpack
Имхо, лучший инструмент для работы с модулями

Answer 5

[bezalkogoln1y-coder]

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

// Библиотека CSS
function libsCSS() {
   return src([
      'node_modules/bootstrap/dist/css/bootstrap.css',
      'node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css',
   ])
      .pipe(concat('libs.min.css'))
      .pipe(csso())
      .pipe(dest('build/css'));
}

//Библиотека JS
function libsJS() {
   return src([
      'node_modules/jquery/dist/jquery.js',
      'node_modules/@popperjs/core/dist/umd/popper.js',
      'node_modules/bootstrap/dist/js/bootstrap.js',
      'node_modules/lodash/lodash.js',
      'node_modules/@fancyapps/fancybox/dist/jquery.fancybox.js',
   ])
      .pipe(concat('libs.min.js'))
      .pipe(minifyjs())
      .pipe(dest('build/js'));
}

Но лучше вариант юзера Олег.