babelify pipe results in: The code generator has deoptimised the styling of “/…/jquery.js” as it exceeds the max of “100KB”

问题

I'm trying to create a single js file containing jquery, bootstrap and reactjs components using a gulp task:

app.jsx:

var React = require('react');
var ReactDOM = require('react-dom');
var HelloWorld = require('./Application.jsx');
var $, jQuery = require('../../libraries/jquery/dist/jquery');
var bootstrap = require('../../libraries/bootstrap-sass/assets/javascripts/bootstrap');

ReactDOM.render(
    <Application />,
    document.getElementById('example')
);

gulp task:

gulp.task('js', function () {
browserify('./public/javascripts/src/app.jsx')
    .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('public/javascripts/build/'));
});

When running gulp, I get the following message:

[BABEL] Note: The code generator has deoptimised the styling of "/Users/.../jquery/dist/jquery.js" as it exceeds the max of "100KB".

How I design the gulp task, so that jquery and bootstrap does not pass the babelify pipe?

回答1:

One possible solution is to add an ignore key to your babelify configuration so that it looks like something along the lines of:

 .transform(babelify, {ignore: ['./libraries/**/*'], presets:["es2015", "react"]})

This should keep bableify from messing with your lib files that are already es5/minified/production ready.

(You may need to adjust the path a little bit... not 100% of your project structure)

来源：https://stackoverflow.com/questions/35189063/babelify-pipe-results-in-the-code-generator-has-deoptimised-the-styling-of