2015-11-27 13 views
6

Hier ist meine Schluckaufgabe, meinen ES6-Code in eine einzige ES5-Datei zu kompilieren. Ich verwende Klassen und Module (import, export) in ES6.Verwenden von Babel mit einer einzigen Ausgabedatei und ES6-Modulen

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

Da jedoch Babel ES6 import Richtlinien in require Befehle kompiliert und require wird versuchen, eine Datei anzufordern, die Anforderungsdateien fehlschlagen, weil alle ES5-Code in eine Datei concatted wird, all.js.

Das Ergebnis ist eine Reihe von "Fehler: Kann Modul nicht finden" Fehler. Wie kann ich Module zusammenstellen, die funktionieren, wenn sie alle in einer einzigen Datei gespeichert sind?

+2

Sieht aus wie das nicht mehr funktioniert (siehe auch [diese Antwort] (http://stackoverflow.com/questions/31873235/gulp-concat-and-require-path/33280669#33280669)) ohne etwas wie Browserify . Da es so aussieht, als wollten Sie den Code im Browser ausführen, sollten Sie sich das trotzdem ansehen :-) – robertklep

Antwort

6

Du bist nicht der erste mit der Notwendigkeit von transpiling JSX/ES6 mit bis zu ES5 Babel, aber ohne CommonJS-Module und damit Browserify/Webpack. Leider stellt sich heraus, dass dies zu der Zeit nicht möglich ist (1, 2, 3), und es sieht so aus, als ob es nie möglich sein wird. Sie sind ziemlich gezwungen, diese Tools zu verwenden, wenn Sie ES6 verwenden möchten, das mit Babel transpiliert wurde, aber Sie haben nicht die Möglichkeit, den resultierenden Code mit anderem verkettetem/Inline-JavaScript zu verwenden (wegen all dieser require() Aufrufe anstatt globaler Variablen) auf window). Es ist schade, dass Babel dieses Verhalten nicht ändern kann.

1

Sie werden wahrscheinlich brauchen Browserify, um es mit Zug funktioniert:

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')); 

zum Beispiel: https://github.com/glued/harp-babel/blob/babel-gulp-v6/gulpfile.babel.js

Verwandte Themen