Плагин Gulp, чтобы сделать JavaScript "включить"

Есть ли плагин Gulp, который позволяет мне включать / объединять файлы JavaScript вместе?

Я пытаюсь найти способ, которым я могу "включить" содержимое одного файла JavaScript в другие. Под включением я имею в виду что-то вроде этого:

// main.js
var a = 2;
///include an-include-file.import.js

// an-include-file.import.js
var b = 5;

"Компилировать" что-то вроде этого:

// compiled.js
var a = 2;
var b = 5;

Или, возможно, даже лучше, что-то вроде этого:

 // compiled.js v2
 var a = 2;

 // wrapped in an anonymous, self-calling function to isolate scope
 (function () {
     var b = 5;
 })();

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

Теперь я знаю, что могу использовать что-то вроде gulp-concat, но нет простого способа контролировать их порядок. Мне придется изменять gulpfile каждый раз, когда я добавляю новый файл, и вручную перечислять их все (или иметь много сложных шаблонов), что является довольно большой болью.

Я предпочел бы что-то, где я могу использовать импорт или включить, чтобы точно контролировать, куда файл идет, и управлять им из самих сценариев, а не из инструмента сборки. Очень похоже на то, как МЕНЬШЕ или что-то делает.

Что касается LESS, то я называю суффиксные файлы с помощью ".import.less", если я не хочу, чтобы они генерировали свой отдельный файл, а затем @import их, где я хочу их в других файлах. Это позволяет очень просто генерировать только те файлы, которые я хочу, без простого создания одного гигантского файла.

Источник

1 ответ

Решение

В итоге я принял идею Майка и использовал WebPack, в дополнение к Babel, для создания модулей в стиле ES6.

Основы выглядят так:

// math.js
export function sum (a, b) { return a + b; }

// main.js
import sum from "math";
console.log(sum(1, 2));

Я использую Gulp для управления процессом сборки, который в упрощенном виде выглядит следующим образом:

var gulp = require('gulp'),
    webpack = require('webpack-stream');

gulp.task('build', function () {
    return gulp.src('main.js')
        .pipe(webpack())
        .pipe(gulp.dest('dist'));
});

Мое реальное использование намного сложнее, но это основная идея. Я должен использовать babel-loader (с предустановкой ES2015) в моей конфигурации webpack, чтобы он обрабатывал ES6 в ES5, а затем WebPack объединяет их в один файл.

Связанное чтение:

Источник
Другие вопросы по тегам