4

Не нашел статьи, где достаточно просто объяснён процесс сборки javaScript-файла из ES6-модулей с помощью gulp. Задача данного вопроса - совместными усилиями задающего вопрос (т. е. меня) и отвечающих устранить данный пробел. Я упростил проект до минимума, но так, чтобы продемонстрировать возможности обмена данными между модулями.


Структура проекта

📁 es2015 папка с исходными js-файлами стандарта ES6 (ES2015).

  📄 common.js Все переменные и функции в данном файле должны быть доступны во всех модулях. На практике, в такой файл имеет смысл выносить некоторые функции общего назначения, константы, содержащие имена CSS-классов и ID и т. д.

  📄 module_one.js Работает с переменными и функциями из common.js, а также своими собственными (локальными) переменными и функциями, любые из которых на усмотрение разработчика могут быть экспортированы в другие модули.

  📄 module_two.js Использует функции и переменные из common.js, а также некоторые функции и переменные из module_one.js.

📁 js папка с промежуточными js-файлами стандарта ES5, сконвертированных gulp-babel. Имена файлов сопадают с файлами папки /es2015.

📄 index.html - файл с минимальной разметкой (просто чтоб было, что открывать в браузере)

📄 bundle.js - собранный gulp продакшен-файл из файлов папки /js.

📄 gulpfile.js

📄 package.json


Содержимое ключевых файлов

common.js

export const COMMON_CONST = 'Эта константа должна быть доступна во всех модулях.';

export function commonFunction(){
    console.log('commonFunction() отработала успешно. Такой же результат должен быть при вызове из любого модуля');
}

module_one.js

import * from "./common";

console.log(COMMON_CONST);
commonFunction();

var moduleAlocalVar = 'Эта переменная доступна только в этом модуле. А-ля "private"'.
export var moduleAexportableVar = 'Эту переменную планируется использовать в других модулях. А-ля public';

var moduleAlocalFunc(){
    console.log('Эта функция доступна только в этом модуле. А-ля "private"');
}

export moduleAexportableFunc(){
    console.log('Эту функцию планируется использовать в других модулях. А-ля "public"');
}

module_two.js

import * from "./common";
import {moduleAexportableVar , moduleAexportableFunc} from "./module_one.js";

console.log(COMMON_CONST);
console.log(moduleAexportableVar);
commonFunction();
moduleAexportableFunc();

gulpfile.js

var gulp = require('gulp');
var babel = require('gulp-babel');

var concat = require('gulp-concat');
var uglifyjs = require('gulp-uglifyjs');

// сначала конвертируем в ES5
gulp.task('babel', function() {
  return gulp.src('app/es2015/*.js')               
        .pipe(babel({ presets: ['es2015'] }))    
        .pipe(gulp.dest('js'));
// по окончании таска ещё бы вызвать сборку buildjs...
});

gulp.task('buildjs', function() {
    return gulp.src('app/js/*.js')
    // соберём модули в один файл. Но как? Понятно, что одной конкатенации не достаточно.
        .pipe(uglifyjs()) // минифицируем выходной файл
        .pipe(gulp.dest('app/js'));
})

Вопрос

Как следует исправить gulpfile.js, чтобы при запуске в один таск конвертировать файлы в ES5 (папка с /js) и собрать их в bundle.js?

12
  • Для бандлов нужен, например, вебпак\бабелифай\роллап. Из галпа можно вызывать вебпак, который будет модули паковать в бандл.
    – YozhEzhi
    2 мар 2017 в 20:17
  • Благодарю Вас за комментарий, но задача данного вопроса - показать пример, с которого могут начать свой проект веб-разработчики, которые никогда не имели дело со сборкой ES6-модулей. Если Вас не затруднит, дополните пожалуйста gulpfile.js до рабочего примера, а какие пакеты устанавливать - приведите консольные команды npm (впрочем, все пакеты можно установить в одну команду). 2 мар 2017 в 23:55
  • 1
    1. Промежуточная папка не нужна. 2. Вопрос сводится к "как задать порядок обработки файлов галпом".
    – Qwertiy
    5 мар 2017 в 20:10
  • 1
    Мне не нравится постановка вопроса если честно, gulp это просто таск менеджер, если вы хотите полноценно рулить сборкой, областями видимости очень рекомендую вебпак, решать сборку es6 gulp'om обреченно на провал при росте проекта
    – 0xdef
    7 мар 2017 в 5:44

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.