在 gulp 中使用 browserify-css

Question

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

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

但我没有使用 webpack，我只使用 gulp。这些是 gulp:

我的节点模块

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

这是我的gulp文件：

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/requirecss需要"browserify-css"，所以我加了"npm install browserify-css"。然后我将转换方法添加到我的 gulp 文件中，如下所示：

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

我在 gulp 文件中使用 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'));

在 gulp 中使用 browserify-css

using browserify-css in gulp

browserify

gulp

react-jsx

babeljs