Utilizzo di Babel con un singolo file di output e moduli ES6

Question

Ecco il mio compito di gulp per compilare il mio codice ES6 in un singolo file ES5. Uso classi e moduli (import, export) in ES6.

gulp.src(paths.scripts) 
     .pipe(sourcemaps.init()) 
     .pipe(babel({ 
      presets: ['es2015'] 
     })) 
     .pipe(concat('all.js')) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest('./www/js')); 

Tuttavia, poiché Babel compila ES6 import direttive in require comandi e require tenterà di richiedere un file, i file di richiesta stanno fallendo perché tutto il codice ES5 è concatted in un unico file, all.js.

Il risultato è un mucchio di errori "Errore: impossibile trovare il modulo". Come posso compilare moduli che funzionano quando sono tutti salvati in un singolo file?

Answer 1

Tu non sei il primo con la necessità di transpiling JSX/ES6 ad ES5 con Babel ma senza usare i moduli CommonJS e quindi Browserify/Webpack. Purtroppo, al momento non è possibile (1, 2, 3) e sembra che non sarà mai possibile. Sei praticamente obbligato a usare questi strumenti se vuoi usare ES6 transpiled con Babel, ma non avrai la possibilità di usare il codice risultante con altri JavaScript concatenati/inline (a causa di tutte quelle chiamate require() piuttosto che di variabili globali su window). È un peccato che Babel non permetta di cambiare questo comportamento.

Answer 2

si avrà probabilmente bisogno Browserify per farlo funzionare con sorso:

browserify('./js/script.js', { debug: true }) 
     .add(require.resolve('babel-polyfill')) 
     .transform(babelify.configure({presets: ['es2015']})) 
     .bundle() 
     .on('error', util.log.bind(util, 'Browserify Error')) 
     .pipe(source('all.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     .pipe(uglify({ mangle: false })) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest('./www/js')); 

ad esempio: https://github.com/glued/harp-babel/blob/babel-gulp-v6/gulpfile.babel.js