Jak się pozbyć require ? - konfiguracja babel + gulp

Question

Hej pierwszy raz konfiguruje babela wcześniej nie miałem takiej potrzeby i natrafiłem na problem. Testowo stworzyłem sobie dwie puste klasy (Pies, Kot) tylko z konstruktorami. W pliku klasy Pies stworzyłem 

var Kot = require("Kot.js");

Po transpilacji kod wynikowy zawiera tylko zmienioną klase Pies na funkcje. Oraz niezmienioną instrukcje require. Co zrobić aby wszystko było zgniecione do jednego pliku i zamiast require była wstawiona druga przekształcona klasa ? Chyba nie powinno być require w plikach wynikowych ? Powinienem transpilować każdy plik osobno a potem zgnieść wszystko w całość ?

Próbuje zrobić to poprzez gulpa.

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

gulp.task('js', () => {
    return gulp.src('./Pies.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('./dist'));
});

 

Answer 1

Potrzebujesz bundlera.

Do bibliotek polecam Rollup.js. Do aplikacji webowych bardziej nada się Webpack.js

Comments

Dzięki! Użyłem webpacka w gulpie i wszystko działa jak należy ;) Wydaje mi sie ze trochę okrężna drogą osiągnąłem efekt. Ciekaw jestem czy można wykonać jakieś zmiany które zmienia mojego gulpa na lepsze.

const gulp = require('gulp');
const rename = require("gulp-rename");
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const webpack = require('gulp-webpack');
const runSequence = require('run-sequence');

gulp.task('js', (callback) => {
    runSequence('js-module-bundler', 'js-transpile', 'js-uglify', callback);
});

gulp.task('js-module-bundler', () => {
    return gulp.src('./Pies.js')
    .pipe(webpack())
    .pipe(rename("pack.es6.js"))
    .pipe(gulp.dest('./dist'));
});

gulp.task('js-transpile', () => {
    return gulp.src('./dist/pack.es6.js')
    .pipe(babel({presets: ['es2015']}))
    .pipe(rename("pack.es5.js"))
    .pipe(gulp.dest('./dist'));
});

gulp.task('js-uglify', () => {
    return gulp.src('./dist/pack.es5.js')
    .pipe(uglify())
    .pipe(rename("pack.es5.min.js"))
    .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['js']);

 

Answer 2

Rollup np. (chociaż on używa składni ES6)