フロントエンドの開発のためのインポート

Question

フロントエンドの開発にES2016の機能を使用したいと思います。特にimportとdecoratorsは興味深いです。

私は小さなテストプロジェクトを開始し、importに含まれるクラスのファイルをいくつか作成しました。 Babelは正しいファイルを生成しますが、ブラウザでは動作しないrequire文が含まれています（私が知る限り）。

すべてのファイルを1つのjavascriptファイルに連結するのに適したツールはありますか？または私のためにこれを行うgulpのためのいくつかの図書館？

Answer 1

BabelはES2016コードをCommonJSフォーマットに変換するため、ブラウザではサポートされていないため、エラーが発生します。 gulp-rollup

// setup by `npm i gulp gulp-rollup rollup-plugin-babel babel-preset-es2016 babel-plugin-external-helpers --save-dev` 

// gulpfile.js 
var gulp  = require('gulp'), 
    rollup  = require('gulp-rollup'); 

gulp.task('bundle', function() { 
    gulp.src('./src/**/*.js') 
    // transform the files here. 
    .pipe(rollup({ 
     // any option supported by Rollup can be set here. 
     "format": "iife", 
     "plugins": [ 
     require("rollup-plugin-babel")({ 
      "presets": [["es2016", { "modules": false }]], 
      "plugins": ["external-helpers"] 
     }) 
     ], 
     entry: './src/main.js' 
    })) 
    .pipe(gulp.dest('./dist')); 
});