単一の出力ファイルとES6モジュールでBabelを使用する

Question

私のES6コードを単一のES5ファイルにコンパイルするための私のgulpタスクは次のとおりです。私はES6でクラスとモジュール（import、export）を使用します。

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

しかし

、バベルはrequireコマンドにES6 importディレクティブをコンパイルしているため、とrequireは、ファイルを要求しようと、すべてのES5コードを1つのファイルにconcattedされているため、要求ファイルが失敗している、all.js.

「エラー：モジュールが見つかりません」というエラーが発生します。それらがすべて1つのファイルに保存されているときに動作するモジュールをどのようにコンパイルできますか？

Answer 1

あなたがしてES5にJSX/ES6をtranspilingの必要性を持つ最初のものじゃありませんBabelが、CommonJSモジュールを使用しないため、Browserify/Webpackは使用されません。残念ながら、これは現時点では不可能です（1、2、3）、それは今までにないようです。 Babelで蒸解したES6を使用する場合は、これらのツールを使用する必要がありますが、グローバル変数ではなくすべてのrequire()呼び出しのために、他の連結/インラインJavaScriptで結果コードを使用する機会はありませんon window）。バベルがこの行動を変えることを許さないのは残念です。

Answer 2

あなたは、おそらくそれは一口で動作させるためにBrowserifyが必要になります。例えば

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

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