在 gulp 中使用 browserify-css答案

【问题标题】：using browserify-css in gulp在 gulp 中使用 browserify-css
【发布时间】：2016-05-02 03:08:08
【问题描述】：

我正在使用 gulp + browserify 来使用 ES2015 并响应 jsx。我想添加一些像这样的外部反应组件：DataPicker.

这是我第一次在我的项目中添加外部反应组件，所以我不知道 css 也需要导入。

但我没有使用 webpack，我只是使用 gulp。这些是我的 gulp 节点模块：

乙烯基源流
乙烯基缓冲液
浏览
babelify
babel-preset-es2015
babel-preset-react

这是我的 gulpfile：

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

我发现在 javascript 中使用 import/require css 需要“browserify-css”，所以我添加了“npm install browserify-css”。然后我像这样将转换方法添加到我的 gulpfile 中：

gulp.task('build', function() {
    return browserify('./app.js')
    .transform(babelify, { presets: ["es2015", "react"] }
    .transform(require('browserify-css'))
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulp.dest('./dist'));
});

但它只是抛出了这样的奇怪错误：

events.js:154，抛出错误； // 未处理的 'error' 事件，SyntaxError: Unexpected token

在我的 gulpfile 中使用 browserify-css 有错吗？我在做什么？非常感谢给我一些建议。

【问题讨论】：

标签： gulp browserify react-jsx babeljs

【解决方案1】：

.transform(babelify, { presets: ["es2015", "react"] }
.transform(require('browserify-css'))

这只是一个语法问题，因为您试图在对象文字上使用点运算符。

也许可以试试这样的...

var appBundler = browserify({
    entries: ['./app.js'],
    transform: [
      ['babelify', {
          "presets": ['es2015', 'react']
        }
      ],
      ['browserify-css']
    ]
    });

  appBundler.bundle()
    .pipe(buffer())
    .pipe(gulp.dest('./dist'));

【讨论】：