在 gulp 中使用 browserify-css

Question

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

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

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

• 乙烯基源流
• 乙烯基缓冲液
• 浏览器化
• 巴别化
• 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, 抛出 er; // 未处理的 'error' 事件，SyntaxError: Unexpected token

我在我的 gulpfile 中使用 browserify-css 有错吗？我在做什么？给我一些建议将不胜感激。

Answer 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'));