Gulp-sourcemap，browserify和babelify

Question

我正在編寫一個使用gulp構建和babelify進行轉換的react應用。

我使用以下browserify任務定義：

gulp.task('browserify', function() {
    var entries = glob.sync('./app/**/*.js*');
    var bundler = browserify({entries: entries, debug: true})
        .transform("babelify", {presets: ["es2015", "react"]})
        .bundle()
        .on('error', function(err) {
            console.error(err);
        })
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

我得到一個bundle.js同時希望在dist看到與src相同的文件夾結構（此處為app ）的已轉換js文件。

我期待正確的事情嗎？ 如果是，我如何使它像我期望的那樣工作。

Answer 1

你應該刪除

.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))

在使用調試時這沒用：在browserify上為true。 debug：true選項使用base64編碼直接在bundle.js上寫源映射。 因此，在瀏覽器上，您可以分別獲取源文件。