Gulp + browserify + 6to5 +源地图 [英] Gulp + browserify + 6to5 + source maps

问题描述

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

所以：
1.我使用ES6语法编写模块。
2. 6to5将这些模块转换为CommonJS（或其他）语法。
3. Browserify捆绑模块。
4.源图指向原始的ES6文件。

如何编写这样的任务？

编辑：以下是我到目前为止：

吞咽任务

 gulp.task（'browserify'，function（）{
 var source = require（'vinyl-source-stream'）; 
 var browserify = require（' ）; 
 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

 函数foo（）{
 console.log（'Hello World'）; 
 
让x = 10; 
 
 console.log（'x is'，x）; 
} 
 
出口{
 foo 
}; 
  

modules / B.js

 从'./A'导入{
 foo 
} 
; 
 
函数bar（）{
 foo（）; 
} 
 
出口{
 bar 
}; 
  

modules / main.js

$ b'b

  import {
 bar 
} 
 from'./B'; 
 
 bar（）; 
  

代码似乎正在工作，但它没有缩小，源图是内联的（不是真正用于制作）。

解决方案

使用此作为您的出发点：

  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'）; 
 $ b 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}））//从browserify文件加载地图
 .pipe（uglify（））
 .pipe（sourcemaps.write（'./'））//写入.map文件
 .pipe（gulp.dest（'./ build'））; 
}）; 
  

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.

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.

How to write such a task?

Edit: Here's what I have so far:

gulp task

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

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

解决方案

Use this as your start point:

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 +源地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！