Gulp + browserify + 6to5 +源地图
我正在尝试编写一个允许我在JS（CommonJS很好）中使用模块的gulp任务，使用browserify + 6to5。 我也希望源映射工作。
所以：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();
该代码似乎正在工作，但它没有缩小和源图是内联的（这不是真正用于生产）。
以此为起点：
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'));
});
我不明白为什么我们不得不使用某些东西来实现这个功能，所以我在这里添加了我自己的答案。 对于那些寻找babelify解决方案的babelify ，我在下面添加了一个。 我还认为，谈论每条线的功能会很好。
对于那些想在他们的Gulp文件中使用ES6的人，你可以看看这里，但是Gulp支持它，如果你把你的文件重命名为Gulp 3.9的Gulpfile.babel.js
需要注意的一点是，您需要使用Browserify的vinyl-source-stream来将输出转换为Gulp可以理解的内容。 从那里，大量的一些插件需要乙烯基缓冲液，这就是我们为什么要缓冲来源流的原因。
对于那些不熟悉sourcemaps的人来说，它们本质上是一种让您将minifed绑定文件映射到主源文件的方式。 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'));
});
其他有用的读物：
咕嘟咕嘟咕咕咕嘟的方式
链接地址: http://www.djcxy.com/p/32909.html