Question

我正在尝试使用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管道？

Answer 1

一种可能的解决方案是在您的babelify配置中添加ignore密钥，使其看起来像以下内容：

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

这应该避免弄乱已经es5 / minified / production ready的lib文件。

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

babelify管道导致：代码生成器已经优化了“/.../jquery.js”的样式，因为它超过了“100KB”的最大值

1 个答案: