我正在尝试编写一个gulp任务,使我能够在JS中使用模块(CommonJS可以),使用browserify + 6to5。我还希望源映射正常工作。
所以: 1.我使用ES6语法编写模块。 2.6to5将这些模块转换为CommonJS(或其他)语法。 3.Browserify捆绑了这些模块。 4.源映射指回原始的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();
这段代码似乎可以工作,但它没有被压缩,而且源映射是内联的(对于生产不太有效)。
.pipe(uglify({ mangle: false }))
,它运行得很好。我还在转换之前添加了6to5填充项.add(require.resolve('6to5/polyfill'))
,以获得更好的跨浏览器兼容性 :) 希望有所帮助! - Andrew Odri.pipe(gulpif(config.isProduction,uglify()))
。 - ctrlplusb["sources"]
(在文件开头可见),没有从那里包含的任何模块(通过require())。 - Frank N