This project is discontinued here and I'm contributing here -
https://github.com/babel/babili
Thanks for your interest !!!
Some tools, babel plugins and presets to minify ES6+ code or whatever code babel understands.
https://boopathi.in/babel-minify/
- mangle
- mangle-options -
keep_fnames,topLevel,eval,except - dead_code
- conditionals
- global_defs
- evaluate
- drop_debugger
- drop_console
- properties - member-expression-literals, property-literals
- join_vars
- booleans - minify booleans
- unsafe - undefined-to-void, simplify-comparison-operators, function-to-arrow
- sequences
- if_return
- cascade
- keep_fargs
- keep_fnames - mangle-options, function-to-arrow-options
import minify from 'gulp-babel-minify';
gulp.task('min', function() {
return gulp.src('build/temp/app.bundle.js')
.pipe(minify(opts))
.pipe(gulp.dest('build/'));
})- Node API + CLI
import minify from 'babel-minify';
minify(inputCode, {
conditionals: true,
drop_debugger: true
});More details here - https://github.com/boopathi/babel-minify/blob/master/packages/babel-minify
This is a preset that uses the default options of babel-minify
WARNING: This might cause some regression, depending on what other plugins and presets you use with this preset - because all the plugins are applied in one pass by default in babel. You can enable the passPerPreset option in babel, but then all the babel-minify plugins are still applied in one pass. So, consider using babel-minify NodeAPI or CLI or Gulp task with the options - plugins: [] and presets: [] to pass your other plugins and presets.
{
"presets": ["min"],
"comments": false,
"compact": true,
"minified": true
}When you bundle your code, remember to split your bundle into multiple packages or at least vendor and your app code separately. Usually, the vendor code will be ES5 compatible and UglifyJS does a better job here. And all the code you write is mostly ES6. You may want to ship this ES6 code to browsers. So we can pass this ES6 code via babel using a specific set of plugins applied in some fashion and make it do the optimizations and minification for you.
webpack.config.js
// webpack.config.js
module.exports = {
entry: {
app: './src/app.js'
vendor: ['react', 'react-router', 'lodash', 'my-polyfills']
},
output: {
path: 'build/webpack',
filename: '[name].bundle.js'
}
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor')
]
}So, this would generate two files - vendor.bundle.js & app.bundle.js
gulpfile.js
const uglify = require('gulp-uglify');
const minify = require('gulp-babel-minify');
const webpack = require('webpack');
const config = require('./webpack.config.js');
gulp.task('webpack', function(cb) {
webpack(config, (err, stats) => {
if (err) return cb(err);
console.log(stats.toString());
cb();
});
});
gulp.task('minify-vendor', ['webpack'], function() {
return gulp.src('build/webpack/vendor.bundle.js')
.pipe(uglify())
.pipe(gulp.dest('build/minified'));
});
gulp.task('minify-app', ['webpack'], function() {
return gulp.src('build/webpack/app.bundle.js')
.pipe(minify())
.pipe(gulp.dest('build/minified'));
});