web-dev-qa-db-ja.com

Gulp + browserify + 6to5 +ソースマップ

Browserify + 6to5を使用して、JS（CommonJSは問題ありません）でモジュールを使用できるようにする、gulpタスクを作成しようとしています。また、ソースマッピングを機能させたい。

そのため：1. ES6構文を使用してモジュールを記述します。 2. 6to5はこれらのモジュールをCommonJS（またはその他の）構文に変換します。 3. Browserifyはモジュールをバンドルします。 4.ソースマップは元のES6ファイルを参照します。

そのようなタスクをどのように書くのですか？

編集：これは私がこれまでに持っているものです：

gulpタスク

gulp.task('browserify', function() {
    var source = require('vinyl-source-stream');
    var browserify = require('browserify');
    var to5ify = require('6to5ify');

    browserify({
        debug: true
    })
    .transform(to5ify)
    .require('./app/webroot/js/modules/main.js', {
        entry: true
    })
    .bundle()
    .on('error', function(err) {
        console.log('Error: ' + err.message);
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(destJs));
});

modules/A.js

function foo() {
    console.log('Hello World');

    let x = 10;

    console.log('x is', x);
}

export {
    foo
};

modules/B.js

import {
    foo
}
from './A';

function bar() {
    foo();
}

export {
    bar
};

modules/main.js

import {
    bar
}
from './B';

bar();

コードは機能しているようですが、縮小されておらず、ソースマップはインラインです（実際には本番環境では機能していません）。

gulpbrowserifysource-mapsbabeljs
32
Stefan Bruvik

これを開始点として使用します。

var gulp = require('gulp');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var to5ify = require('6to5ify');
var uglify = require('gulp-uglify');

gulp.task('default', function() {
  browserify('./src/index.js', { debug: true })
    .transform(to5ify)
    .bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
    .pipe(uglify())
    .pipe(sourcemaps.write('./')) // writes .map file
    .pipe(gulp.dest('./build'));
});
46
chico

これを機能させるためになぜ特定のものを使用する必要があるのか​​理解できなかったので、ここに独自の答えを追加します。 babelifyを使用したソリューションを探している人のために、以下に1つ追加しました。また、各行が何をするのかを話し合うのも良いと思いました。

GulpfileでES6を使用したい場合は、 こちら を参照できますが、ファイル名をGulpfile.babel.jsに変更すると、Gulpでサポートされますガップ3.9

注意すべき重要な点の1つは、出力をGulpが理解できるものに変換するために、Browserifyで vinyl-source-streamを使用する必要があることです 。そこから、多くの gulpプラグインがビニールバッファー を必要とするため、ソースストリームをバッファーします。

ソースマップに慣れていない人にとって、これらは基本的に、minifedバンドルファイルをメインソースファイルにマップする方法です。 Chrome および Firefox はそれをサポートしているため、デバッグするときに、 ES6コードとそれが失敗した場所。

import gulp          from 'gulp';
import uglify        from 'gulp-uglify';
import sourcemaps    from 'gulp-sourcemaps';
import source        from 'vinyl-source-stream';
import buffer        from 'vinyl-buffer';
import browserify    from 'browserify';
import babel         from 'babelify';

gulp.task('scripts', () => {
  let bundler = browserify({
    entries: ['./js/main.es6.js'], // main js file and files you wish to bundle
    debug: true,
    extensions: [' ', 'js', 'jsx']
  }).transform(babel.configure({
    presets: ["es2015"] //sets the preset to transpile to es2015 (you can also just define a .babelrc instead)
  }));

  // bundler is simply browserify with all presets set
  bundler.bundle()
    .on('error', function(err) { console.error(err); this.emit('end'); })
    .pipe(source('main.es6.js')) // main source file
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true })) // create sourcemap before running edit commands so we know which file to reference
      .pipe(uglify()) //minify file
      .pipe(rename("main-min.js")) // rename file
    .pipe(sourcemaps.write('./', {sourceRoot: './js'})) // sourcemap gets written and references wherever sourceRoot is specified to be
    .pipe(gulp.dest('./build/js'));
});

その他の有用な読み：

Gulpはgulp-yの方法をブラウザ化します

3
aug