It exceeds the max of "100KB"

[monolithed]

➜ grunt browserify
Running "browserify" (browserify) task

Note: The code generator has deoptimised the styling of "index.js" as it exceeds the max of "100KB".

The babelify used as transformation for grunt-browserify

options: {
    transform: ['babelify']
}

How to skip this warning?

[sebmck]

options: {
    transform: [['babelify', { compact: false }]]
}

Probably not a good idea to be passing such large files through Babel in the first place.

[monolithed]

@sebmck, more thanks!

PS: My large file will be inlined into html

[btburton42]

Is there a recommended pattern for when you must import a utility library like lodash into one of your babel components?

[sebmck]

@btburton42 Don't let browserify transform it since there's no reason to let it.

[btburton42]

Ha, yeah, I just figured that out myself. Thanks!

[nobleach]

How would you go about that given your Grunt example above?

[peterpme]

I'm getting this same error with moment in production. Is there anything I can do?

[sebmck]

@ppiekarczyk As previously mentioned, set compact to false.

[nobleach]

I should say, I'm not seeing a way to blacklist those larger files. Perhaps this is outside of the scope of babelify?

[btburton42]

@nobleach if you're using grunt you can tell it only to pipe certain files to the babelify grunt task. i don't know if babelify itself has an ignore command though.

[nobleach]

Yeah, I'll have to check Browserify. I'm sure there has to be a way.

[zertosh]

@nobleach What is it exactly that you're trying to do?

[nobleach]

I am babelifying all required files with the exception of 2 vendor libs which we unwrap and include. One is our handlebars templates and the other is Marionette. I'd like to just ignore those two things.

[zertosh]

I am babelifying all required files with the exception of 2 vendor libs which we unwrap and include.

@nobleach By "unwrap and include" do you mean that you're not requiring them from node_modules, but rather they're normal project files? If so, then you can't tell browserify to exclude them from the transforms, but you can tell babel to skip them:

var b = browserify({/*options*/});
b.transform(babelify.configure({
  ignore: ['**/vendor/template-lib.js', '**/vendor/marionette*']
});
b.bundle();

Browserify passes the full path of a file to babelify, and babelify (via babel) can ignore files if they match a glob pattern in ignore. babelify will pass most options directly to babel except a few.

[nobleach]

Correct, they're not in node_modules. The handlebars templates file is rebuilt from Grunt using a watch task.

I'm using grunt-browserify, so I'll need to figure out how to get this into its config/options. I should probably be filing an issue on that project as it appears that's where my issue lies. Thanks!

[yuunusdurmus]

thank you @kittens
i use like this:
appBundler.transform("babelify", {compact: false, presets: ["es2015", "react"]})
.bundle().on('error',gutil.log)
.pipe(source('main.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(browserSync.stream());

[buuug7]

@yuunusdurmus
can i have a look your whole gulpfile?
my gulpfile is like below,i feel my gulpfile is too fat,some gulp plugin is out of date?

`'use stric';
var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var gutil = require('gulp-util');

gulp.task("browserify", function() {
var b = browserify({
entries: './public/scripts/tutorial.js',
debug: true,
transform: [babelify]
});
return b.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
//.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/dist/js'));

});

gulp.task("default", ["browserify"]);
`

[yuunusdurmus]

@buuug7 absolutely, feeling to me sometimes :)
https://github.com/yuunusdurmus/gulp-compile-es6-with-react

[buuug7]

thanks a lot @yuunusdurmus,it was great,i have forked your setting files and will use it on my next project

[IsuruDilhan]

In react/redux/webpack/babel build fixed this error by removing script tag type text/babel

<script type="text/babel" src="/js/bundle.js"></script>

Into
<script src="/js/bundle.js"></script>