Как использовать Gulp для создания отдельного пакета поставщиков с компонентами Browserify из Bower

Я использую Gulp и Browserify, чтобы упаковать мой Javascript в 2 отдельных пакета: application.js и vendor.js.

Как связать пакет vendor, если библиотеки моих поставщиков установлены с Bower?

В моем gulpfile я использую следующие модули:

var gulp = require("gulp");
var browserify = require("browserify");
var debowerify = require("debowerify");
var source = require("vinyl-source-stream");

Предполагая, что у меня есть только Phaser framework, установленный с Bower (для этого примера), моя задача Gulp для создания пакета application выглядит как это:

gulp.task("scripts-app", function () {
  browserify("./app/javascripts/index.js")
    .external("phaser")
    .pipe(source("application.js"))
    .pipe(gulp.dest("./tmp/assets"));
});

При этом задача vendor выглядит так:

gulp.task("scripts-vendor", function () {
  browserify()
    .transform(debowerify)
    .require("phaser")
    .pipe(source("vendor.js"))
    .pipe(gulp.dest("./tmp/assets"));
});

Когда я запускаю эту задачу Gulp, я получаю сообщение об ошибке Error: Cannot find module 'phaser' from, а затем все каталоги, в которых выполняется поиск (ни один из которых не является каталогом bower_components).

Любые идеи о том, как их успешно упаковать, приветствуются. Спасибо!


node.js npm gulp bower browserify
person ahuth    schedule 08.06.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Ответил на свой вопрос:

При использовании require в задаче Gulp вам необходимо указать путь к файлу, а не только имя.

gulp.task("scripts-vendor", function () {
  browserify()
    .transform(debowerify)
    .require("./bower_components/phaser/phaser.js")
    .pipe(source("vendor.js"))
    .pipe(gulp.dest("./tmp/assets"));
});

Обратите внимание, что require("phaser") стало require("./bower_components/phaser/phaser.js").

Это работает, хотя сборка пакета занимает целую вечность (около 20 секунд). Вероятно, вам лучше просто загрузить гигантские библиотеки/фреймворки прямо в ваше приложение через тег <script>, а затем использовать Browserify Shim. .

Это позволяет вам require() (в смысле NodeJS/Browserify) глобальные переменные (документация).

person ahuth    schedule 08.06.2014
comment
Вам не нужно debowerify, если требуется полный путь. Кажется, что в этом конкретном примере это работает, потому что debowerify на самом деле ничего не делает. - person Oleg Estekhin; 14.11.2014

arrow_upward
1
arrow_downward

Похоже, вы поняли, как потребовать файл Bower. Надеюсь, вам нужно будет собрать его только один раз, а не каждую сборку. Включение библиотеки через тег скрипта — неплохая идея. Другой метод, который я использую, заключается в использовании scriptjs (полифилл тоже подойдет) для асинхронной загрузки любого поставщика. библиотеки, которые мне нужны, но не забудьте включить любые/все требования после загрузки скрипта. Например, ваш index.js может выглядеть так:

$script.('/assets/vendor', function() {
  var phaser = require('phaser');
  //rest of code


});

Это особенно удобно для загрузки файлов cdn или возможности отложить загрузку определенных библиотек, которые не обязательно используются в основном приложении каждым пользователем, или для загрузки библиотек после маршрутизации на стороне клиента.

person user3606123    schedule 06.07.2014
comment
Это не отвечает на вопрос, как создать браузерный пакет из компонентов Bower. - person Oleg Estekhin; 14.11.2014
comment
Я думаю, что неправильно понял вопрос... у него были все правильные модули, но он не указал путь. Наверное, я думал, что он хочет добавить файлы Bower другим способом, похожим на <script></script> асинхронную загрузку. Я думаю, что в любом случае это хорошая практика - отделять большие фреймворки от локального пакета разработки, и этот шаблон я бы использовал для включения фреймворков Bower / сторонних производителей с помощью браузера (с включенным требованием, так что написание кода идентично, отличается только инициализация потому что он не в комплекте) - person user3606123; 10.08.2016