babelify pipe的结果是：代码生成器已经优化了“/.../jquery.js”的样式。因为它超过了“100KB”的最大值。 [英] babelify pipe results in: The code generator has deoptimised the styling of "/.../jquery.js" as it exceeds the max of "100KB"

问题描述

我试图用gulp任务创建一个包含jquery，bootstrap和reactjs组件的js文件：

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任务：

  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 /'））; 
}）; 
  

运行gulp时，我收到以下消息：

[BABEL]注意：代码生成器已经优化了/Users/.../jquery/dist/jquery.js的样式，因为它超过了100KB的最大值。

我如何设计 gulp 任务，以便 jquery 和 bootstrap 不会传递 babelify 管道？

解决方案

一个可能的解决方案是在您的babelify配置中添加一个 ignore 键，使其看起来像一些类似的内容：

  .transform（babelify，{ignore：['./libraries/**/*'] ，预设：[es2015，react]}）
  

你的lib文件已经被es5 / minified / production准备好了。

（您可能需要调整一下路径...不是100％项目结构）

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?

解决方案

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)

这篇关于babelify pipe的结果是：代码生成器已经优化了“/.../jquery.js”的样式。因为它超过了“100KB”的最大值。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！