我正在尝试编写一个 gulp 任务,允许我在 JS 中使用模块(CommonJS 很好),使用 browserify + 6to5。我也希望源映射能够工作。
所以:
1. 我使用 ES6 语法编写模块。
2. 6to5 将这些模块转换为 CommonJS(或其他)语法。
3. Browserify 捆绑模块。
4. Source maps 指回原始的 ES6 文件。
如何编写这样的任务?
编辑:这是我到目前为止所拥有的:
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
};
模块/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'));
});
关于Gulp + browserify + 6to5 + source maps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28087674/