32

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

1. ES6 構文を使用してモジュールを作成します。2. 6to5 は、これらのモジュールを CommonJS (またはその他の) 構文にトランスパイルします。3. Browserify がモジュールをバンドルします。4. ソース マップは元の ES6 ファイルを参照します。

そのようなタスクを書く方法は？

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

ぐるぐるタスク

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

モジュール/A.js

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

    let x = 10;

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

export {
    foo
};

モジュール/B.js

import {
    foo
}
from './A';

function bar() {
    foo();
}

export {
    bar
};

モジュール/main.js

import {
    bar
}
from './B';

bar();

コードは機能しているように見えますが、縮小されておらず、ソース マップがインラインになっています (実際には運用環境では機能していません)。

4

2 に答える 2

3

これを機能させるために特定のものを使用しなければならない理由がわからなかったので、ここに独自の回答を追加します。で解決策を探している人のために、babelify以下に追加しました。また、各行が何をするのかについて話すのもいいと思いました。

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

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

ソースマップに慣れていない人のために説明すると、ソースマップは基本的に、バンドルされたミニファイルをメインのソース ファイルにマップする方法です。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 方式でブラウザ化する

于 2016-01-12T22:05:20.870 に答える