Gulp sourcemap，browserify和babelify

Question

我正在写一个react应用程序，使用gulp来构建并将其转换为transpile。

我使用以下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中看到转换后的js文件，具有与src相同的文件夹结构(这里是app)。

我期待的是一件正确的事情吗？如果是，我怎样才能让它像我期望的那样工作。

Answer 1

您应该删除

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

在browserify上使用debug: true时，这是无用的。debug: true选项使用base64编码直接在bundle.js上写入源地图。因此，在您的浏览器上，您可以单独获得源文件。