Używanie Babel z jednym plikiem wyjściowym i modułami ES6

Question

Oto moje proste zadanie skompilowania mojego kodu ES6 do jednego pliku ES5. Używam klas i modułów (import, export) w ES6.

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

Jednak ponieważ Babel kompiluje ES6 import dyrektyw do require poleceń i require będzie próbował zwrócić plik, pliki życzenie niepowodzeniem, ponieważ cały kod ES5 jest concatted w jednym pliku, all.js.

Wynikiem jest pakiet błędów "Błąd: Nie można znaleźć modułu". Jak mogę skompilować moduły, które działają, gdy wszystkie są zapisane w jednym pliku?

Answer 1

Nie jesteś pierwszy z potrzebą transpiling JSX/ES6 do ES5 z Babel, ale bez korzystania z modułów CommonJS, a tym samym Browserify/Webpack. Niestety okazuje się, że nie jest to możliwe w tym czasie (1, 2, 3) i wygląda na to, że nigdy nie będzie to możliwe. Jesteś prawie zmuszony do korzystania z tych narzędzi, jeśli chcesz korzystać z ES6 transpiled z Babel, ale nie będziesz miał szansy użyć wynikowego kodu z innymi połączonymi/wbudowanymi JavaScriptami (ze względu na wszystkie te wywołania require() zamiast zmiennych globalnych na window). Szkoda, że ​​Babel nie pozwala zmienić tego zachowania.

Answer 2

Będziesz prawdopodobnie trzeba Browserify aby pracować z łykiem:

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

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