Как подключить библиотеку node_modules Gulp?

Question

[ForSureN1]

Добрый день, возникла трудность, пытаюсь подключить либу mapbox в свой файл js, и получаю ошибки по типу "Cannot use import statement outside a module",
вот так выглядит подключение

import mapboxgl from 'mapbox-gl';
mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')

mapboxgl.accessToken = 'pk.eyJ1IjoiZ3VsYWsxMjMiLCJhIjoiY2wyNDgzbjUyMGluczNncDk1MHlheGNsNiJ9.4nOUSEub8-sL4CUDVdQR-A';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11'
});

P.S. думал что делаю ошибку в путях, но нет, испробовал все варианты, через CDN все прекрасно работает к слову

Comments

[Сергей delphinpro]

Нельзя использовать import вне модуля.
Либо подключайте свой скрипт как модуль <script type="module">, либо собирайте бандлером (например, webpack)

[Сергей delphinpro]

И зачем два импорта сразу? Выберите что-то одно, либо commonJs либо Native modules

[ForSureN1]

Сергей delphinpro, Данный пример я взял из их доки, там было точь в точь написано

[ForSureN1]

Сергей delphinpro, А нет, стоп, я сам зафейлил.

var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
 
mapboxgl.accessToken = 'pk.eyJ1IjoiZ3VsYWsxMjMiLCJhIjoiY2wyNDgzbjUyMGluczNncDk1MHlheGNsNiJ9.4nOUSEub8-sL4CUDVdQR-A';
var map = new mapboxgl.Map({
container: 'YOUR_CONTAINER_ELEMENT_ID',
style: 'mapbox://styles/mapbox/streets-v11'
});

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

[Сергей delphinpro]

ForSureN1, у вас какое-то неполное понимание работы. галп - это всего лишь таск-раннер. Запустил задачу, что-то там сделал с файлами и выплюнул результат. В него ничего не подключается. Библиотеки вы подключаете в ваш код. Функцию require() браузер не знает, и споткнётся здесь. Такой код пропускают через сборщик, он преобразует импорты в какой-то код, перевариваемый браузером. Для вашего пакета https://docs.mapbox.com/mapbox-gl-js/guides/install/ есть примеры в документации, как настроить webpack для сборки.
Webpack вы можете запускать отдельно, а можете из задачи галпа (например, используя webpack-stream).

[ForSureN1]

Сергей delphinpro, Да, я вас прекрасно понимаю, но дело в том что я не пользуюсь вебпаком, а пользуюсь только галпом, просто я нашел на одном форуме способ подключения jquery, выглядит это вот таким образом

import $ from 'jquery';
window.jQuery = window.$ = $;

и после этого я могу пользоваться jquery как обычно $('').....
И я думал что могу сделать тоже самое и с mapbox, просто не знал что для того чтобы воспользоваться какой то другой библиотекой нужно писать для этого таску галпу

[Сергей delphinpro]

ForSureN1, вы в галпе как скрипты собираете? Можете показать этот таск?

[ForSureN1]

Сергей delphinpro,

import webpack from "webpack-stream";

export const js = () => {
    return app.gulp.src(app.path.src.js, { sourcemaps: true })
        .pipe(app.plugins.plumber(
            app.plugins.notify.onError({
                title: "JS",
                message: "Error <%= error.message =>"
            })
        ))
        .pipe(app.gulp.dest(app.path.build.js))
        .pipe(webpack({
            mode: 'development',
            output: {
                filename: 'app.min.js',
            }
        }))
        .pipe(app.gulp.dest(app.path.build.js))
        .pipe(app.plugins.browsersync.stream());
}

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

[Сергей delphinpro]

ForSureN1, вы выше говорили, что не пользуетесь вебпаком. А по факту я вижу, что сборка как раз им и осуществляется.
Если вы хотите отделить вендорные либы, то смотрите документацию по webpack. У него есть возможность разделения выходного бандла на части по разным условиям.

[Сергей delphinpro]

ForSureN1, Если вы хотите просто использовать отдельную либу, то не нужно ее никуда импортировать. Просто подключайте в html javascript файл с библиотекой

<script src='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css' rel='stylesheet' />

и используйте без импорта

const map = new mapboxgl.Map({});

[ForSureN1]

Сергей delphinpro, Вебпак тут исключительно подключен 1 модуль для JS'a, знаю что можно подключать CDN, но это вроде плохая практика, но в целом чтобы не создавать лишние траблы, то можно просто прописать заранее script в body, и подключить CDN, а потом уже при отправке проекта удалить CDN и закинуть скрипты в папку, пока только такое вижу самое простое решение

[Сергей delphinpro]

ForSureN1, cdn просто для примера скопипастил. Можете скопировать файлы к себе в проект

[ForSureN1]

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

[Сергей delphinpro]

ForSureN1, она и не должна попасть в сборку, если вы планируете подключать ее глобально, в теге script.
Для таких файлов обычно пишут отдельную задачу, типа copy:vendors, которая просто копирует файлы из папки исходников (или из node_modules) в вашу папку dist. а оттуда файл уже подключается через script

[ForSureN1]

Сергей delphinpro, А нет, файл попадает в сборку, но когда я его подключаю в body, то уже в браузере этой строчки нет, вот показываю

[Сергей delphinpro]

Вот, например, я так делаю (тут я миксом сборку делаю, но не суть, аналогичная задача делается в галпе)

mix.sass('src/scss/bootstrap.scss', 'css');

  mix.copy([
    'node_modules/bootstrap/dist/js/bootstrap.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js.map',
    'node_modules/swiper/swiper.min.css',
    'node_modules/air-datepicker/air-datepicker.css',
  ], 'dist/vendor');

  mix.copyDirectory('src/img', 'dist/images');

[ForSureN1]

Сергей delphinpro, Именно поэтому я стал искать способы как импортировать какую то библиотеку в файл app.js, так как кроме CDN по другому не получается сделать

[Сергей delphinpro]

ForSureN1, а, я понял. нужно посмотреть почему строка пропадает из выходного html. решить эту проблему и всё. =)

[ForSureN1]

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

[goshaLoonny]

Палить токен не самая лучшая идея

[ForSureN1]

goshaLoonny, он публичный, не переживайте

Answer 1

[wakenbyWork]

В gulp так никак, подключайте webpack, https://www.npmjs.com/package/webpack-stream