Как подключить JS-скрипт (ES5/6...) используя Gulp?

Question

[Andreo]

Короче, есть задача в gulpfile которая собирает в один файл сторонние библиотеки:

gulp.task('vendor', function() {
    var src = [
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/lodash/lodash.min.js',
        'node_modules/vue/dist/vue.min.js',
        'node_modules/vue-resource/dist/vue-resource.min.js',
        'node_modules/blockui-npm/jquery.blockUI.js',
        'node_modules/sweetalert/dist/sweetalert.min.js',
        'node_modules/moment/min/moment.min.js',
        'node_modules/sprintf-js/dist/sprintf.min.js',
    ];

    gulp.src(src)
        .pipe(concat('vendor.build.js'))
        .pipe(gulp.dest('public/js'));
});

Слава богам - с этим разобрался!
Но появилась необходимость юзать библиотеку из node_modules, но с этими всякими exports, require и прочей дичью новейшего синтаксиса JS... Как правильно внедрить такой скрипт в мой js-файл?

Answer 1

[Антон Спирин]

Слава богам - с этим разобрался!

Больше никому это не показывайте.

Но появилась необходимость юзать библиотеку из node_modules, но с этими всякими exports, require и прочей дичью новейшего синтаксиса JS... Как это правильно сделать, в моем случае?

Либо изучать "все эти exports, require и прочую дичь", либо искать себе работу полегче.

Чем можно собрать бандл:
webpack
browserify

Comments

[Andreo]

Поверьте. Бекендеру не легко врубиться в эту анархию, которая происходила с фронтэндом, за которым не следил уже лет 5 как.
Но дело не в этом. Мне не очень верится чтоб подключить одну какую-то такой библиотеку (или правильней - модуля) нужно возводить целый нефтеперерабатывающий завод и рядом еще строить мегаполис. Должен быть способ попроще, наверное...

[Andreo]

Что такое бандл? Разжуйте, пожалуста.

[Антон Спирин]

Андрулєс, самый простой способ использовать в проекте UMD версии библиотек. И ничего изучать не придется. Но так сейчас мало кто делает.

Если хотите сделать сборку(bundle), то вам надо использовать сборщик. Для удобной разработки так же понадобится devServer который будет заменять модули налету без перезагрузки страницы.
Советую для этих задач использовать webpack, это золотой стандарт во фронтенд разработке.
Почитайте уроки по vue.js, почитайте документацию. Поробуйте vue-cli.

Answer 2

[Константин Величко]

Используйте webpack
Пример того как использовать webpack с gulp