VIKINGVyksa
@VIKINGVyksa
front-end developer

Как сделать build с babel.js?

Делаю сборку проекта с помощью gulp. Решил использовать es2016 для работы.

Но столкнулся с проблемой.

Вот задача

var gulp = require('gulp'),

    rename      = require('gulp-rename'),
    jsMin       = require('gulp-uglify'),
    sass        = require('gulp-sass'),
    babel       = require('gulp-babel'),
    concat      = require('gulp-concat'),
    _if         = require('gulp-if'),
    _plumber    = require('gulp-plumber'),
    _debug      = require('gulp-debug'),
    sourcemaps  = require('gulp-sourcemaps'),
    cssMin      = require('gulp-minify-css'),
    cssPrefixer = require('gulp-autoprefixer'),
    notify      = require('gulp-notify'),

    rimraf      = require('rimraf'),
    browserSync = require('browser-sync'),
    reload      = browserSync.reload;



var path = {
    dist:{
        html:'./dist/',
        css:'./dist/css/',
        js:'./dist/js/',
        libs:'./dist/libs/',
        img:'./dist/img/',
        font:'./dist/font/',
    },

    src:{
        html:'./src/index.html',
        css:'./src/sass/index.scss',
        js:'./src/js/app.js',
        img:'./src/img/**/*.*',
        font:'./src/**/*.*',


        // stack sync libs (lib which have dependencies)
        sLibs:[
            './src/libs/modernizer/modernizr.js',
            './src/libs/underscore/underscore-min.js',
            './src/libs/jquery/jquery.min.js',
            './src/libs/backbone/backbone-min.js',
        ],

        //stack async libs (libs which we lazy load)
        aLibs:[
            //some path
        ],
    },

    watch:{
        html:'./src/*.html',
        css:'src/sass/**/*.*',
        js:'src/js/**/*.*',
    },

    clean:'./dist/'
};

// #javascript
gulp.task('js', function () {
    return gulp.src(path.src.js)
            .pipe(_plumber({
                errorHandler: notify.onError(function(err){
                    return {
                        title:'JAVASCRIPT',
                        message:err.message
                    };
                })
            }))
            .pipe(_if(isDev,sourcemaps.init()))
            .pipe(_if(!isDev,jsMin()))
            .pipe(babel({ presets: ['es2015'], plugins: [ "transform-es2015-modules-commonjs" ]}))
            .pipe(_debug({title:'babel'}))
            //.pipe(rename('app.js'))
            .pipe(_if(isDev,sourcemaps.write()))
            .pipe(gulp.dest(path.dist.js))
            .pipe(reload({stream: true}));
});


isDev - это просто флаг определяющий способ сборки.

У меня есть файл app.js, который по идее подключает все другие модули(файлы). Я попробовал написать на es2016, но не собираеться. Файлы переводяться babel.js в es5 но импорты не работают. В консоли ошибка require is not defined.

Кто делал такие сборки, поделитесь опытом :)
  • Вопрос задан
  • 652 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы