gulp - 在 gulp 中使用 browserify-css

Question

我正在使用 gulp + browserify 来使用 ES2015 和 React jsx。我想添加一些外部 react 组件，如下所示:DataPicker .

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

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

• 乙烯基源流
• 乙烯基缓冲区
• 浏览
• babel化
• 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, throw er; // Unhandled 'error' event, 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'));