Как использовать gulp для создания пакетов JavaScript?

Я хочу использовать gulp для создания пакетов файлов JavaScript.

Например, у меня есть следующая структура в моем проекте:

  1. /vendor/vendor1/vendor1.js
  2. /vendor/vendor2/vendor2.js
  3. /js/includes/include1.js
  4. /js/includes/include2.js
  5. /js/bundle1.js
  6. /js/bundle2.js

Есть вендорские включения (1-2), локальные включения (3-4) и файлы пакетов (5-6).

Поставщик включает только сторонние библиотеки JavaScript, установленные с помощью bower или композитор. Это могут быть CommonJS, AMD или просто старые плагины jQuery.

Я хочу указать зависимости внутри файлов пакета следующим образом:

/js/bundle1.js

(function() {

    // Vendor includes.
    include('vendor1');
    include('vendor2');

    // Local includes.
    include('includes/include1.js');
    include('includes/include2.js');

    // Some code here.

})();

Я хочу, чтобы gulp обработал этот исходный файл и создал окончательный файл дистрибутива (пакет), гарантирующий, что все зависимости (включает) объединены вместе в одном файле. Так что я могу включить foo.js из моего HTML, и все зависимости будут доступны для него.

Я хочу иметь четкую и надежную систему для управления всеми зависимостями внутри проекта и создания файлов дистрибутива.

  • Как я могу этого добиться?
  • Какой формат я должен использовать для своих собственных скриптов (AMD, CommonJS, другой)?
  • Как указать зависимости в исходных файлах пакета?
  • Как построить дистрибутив?

amd javascript gulp commonjs browserify
person Slava Fomin II    schedule 04.04.2014    source источник
comment
Бонусное дополнение к вопросу на 2020 год: как насчет встроенной поддержки Chrome для модулей ES6 в настоящее время? Как насчет Firefox/Edge? Как насчет плагинов/скриптов инъекций для Chrome или Firefox? Изменятся ли наши потребности, если мы нацелимся только на новейшую версию Chrome, а не на поддержку устаревших браузеров?   -  person Josh Desmond    schedule 31.07.2020

Ответы (2)


arrow_upward
6
arrow_downward

Ваш вопрос поставлен так, как будто есть один ответ, но его нет. Проблема, которую вы пытаетесь решить, — это проблема, которую многие люди решили разными способами, и вы определили два основных варианта: AMD и CommonJS. Есть и другие способы, но, учитывая, что вы можете быть новичком в управлении зависимостями Javascript, а также в gulp, я бы порекомендовал использовать что-то относительно простое (хотя эта тема по своей сути непростая).

Я думаю, что самый простой маршрут для вас может быть:

  • используйте CommonJS для выражения зависимостей
  • используйте браузер, чтобы преобразовать их в пакеты
  • в браузере используйте метод «UMD», чтобы получить единый пакет, который будет работать для приложений, использующих AMD или CommonJS или не использующих ни одну из этих систем управления зависимостями.

Оператор gulp для запуска браузера как таковой может выглядеть примерно так:

var browserify = require('gulp-browserify');
gulp.src('bundles/bundle1.js', {read: false})
  .pipe(browserify({
    'standalone': true
  })
  .pipe(rename('bundle1Output.js'))
  .pipe(gulp.dest('dist'));

Это должно дать вам файл dist/bundle1Output.js.

person daphne-d    schedule 12.04.2014
comment
Спасибо за ваш ответ! Не могли бы вы привести пример bundle.js, который можно использовать с этой конфигурацией? - person Slava Fomin II; 15.04.2014
comment
Browserify будет ожидать, что ваш файл bundle1.js укажет ваши зависимости. Это описано здесь. - person daphne-d; 05.05.2014

arrow_upward
1
arrow_downward

Для этого есть плагин gulp:

https://www.npmjs.com/package/gulp-include

Он должен делать то, что вы хотите, за исключением того, что в вашем файле пакета вместо этого:

    (function() {

        // Vendor includes.
        include('vendor1');
        include('vendor2');

        // Local includes.
        include('includes/include1.js');
        include('includes/include2.js');

        // Some code here.

    })();

Вы должны были бы написать:

    //=require vendor1/**/*.js
    //=require vendor2/**/*.js

    //=require includes/include1.js
    //=require includes/include2.js

    // Some code here
person Karolis    schedule 15.12.2015