Gulp + browserify + 6to5 + source maps [英] Gulp + browserify + 6to5 + source maps

问题描述

我正在尝试编写一个 gulp 任务，允许我在 JS 中使用模块(CommonJS 很好)，使用 browserify + 6to5.我还希望源映射能够工作.

I'm trying to write a gulp task allowing me to use modules in JS (CommonJS is fine), using browserify + 6to5. I also want source mapping to work.

所以:1. 我使用 ES6 语法编写模块.2. 6to5 将这些模块转换为 CommonJS(或其他)语法.3. Browserify 捆绑模块.4. Source maps 引用原始 ES6 文件.

So: 1. I write modules using ES6 syntax. 2. 6to5 transpiles these modules into CommonJS (or other) syntax. 3. Browserify bundles the modules. 4. Source maps refers back to the original ES6 files.

这样的任务怎么写?

这是我目前所拥有的:

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

模块/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
};

modules/main.js

import {
    bar
}
from './B';

bar();

代码似乎可以工作，但它没有被缩小，并且源映射是内联的(这实际上不适用于生产).

The code seems to be working, but it's not minified and the source map is inline (which is not really working for production).

推荐答案

以此为起点:

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

这篇关于Gulp + browserify + 6to5 + source maps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！