Создайте отдельные пакеты JavaScript с общей общей библиотекой, используя Browserify и Gulp

Для моей команды на работе я пытаюсь настроить полуавтоматическую автоматическую JavaScript script и систему управления зависимостями с помощью Gulp и Browserify.

Я даже не уверен, что то, что я пытаюсь достичь, возможно с помощью имеющегося в настоящее время набора инструментов (и моих ограниченных знаний JavaScript). Я считаю, что то, что я пытаюсь достичь, - довольно распространенный сценарий, но я не смог найти информацию, которую я искал.

Рассмотрим следующую диаграмму:

enter image description here

Строки указывают на зависимости. Для общих модулей, таких как Module-v и Module-y, я не хочу, чтобы сценарии дублировались, будучи включенными в каждый из их соответствующих пакетов.

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

A похожее Q & A здесь Я думаю, имеет ту же самую суть того, что я пытаюсь спросить, но для меня это не совсем понятно. Он также ссылается на gulp -browserify, который с тех пор был внесен в черный список.

В моей диаграмме я вижу, что у меня есть три точки входа в браузер, но мой недостаток Gulp/Node/Browserify experience означает, что я изо всех сил пытаюсь оборачивать голову тем, как я могу попытаться добиться того, что я хотите.

Я рад выполнить эту работу, чтобы попытаться собрать ее вместе, как я уже пытался, однако руководители проектов дышат мне по шее, поэтому мне нужно взломать временное "решение", пока я не смогу реализовать что-то более автоматизированное и надежное.

Спасибо заранее.

Edit

Похоже, что обозревать документацию плагина, что можно было бы достичь, используя factor-bundle, который substack указал мне; однако из-за моего отсутствия опыта Node/Browserify/Gulp я изо всех сил пытаюсь собрать все части.

Вопросы, относящиеся

Ответы

Ответ 1

Выяснилось, делитесь знаниями:

Пример кода:

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify'),
    factor = require('factor-bundle');

gulp.task('browserify', function(){

    return browserify({
        entries: ['blog.js', 'page.js']
    })
    .plugin(factor, {
        // File output order must match entry order
        o: ['bundle/blog.js', 'bundle/page.js']
    })
    .bundle({
        debug: true
    })
    .pipe(source('common.js'))
    .pipe(gulp.dest('bundle/'));

});

Основное различие между этим выходом и диаграммой состоит в том, что файл common.js автоматически создается на основе общих зависимостей между blog.js и page.js. Это описано в документации factor-bundle.

Примечания: