mit browserify-css in Schluck

Question

Ich benutze Schluck + Browser zu ES2015 verwenden und jsx reagieren. Ich möchte einige externe reagieren Komponente wie diese: DataPicker.

war es das erste Mal, externe Komponente in meinem Projekt zu reagieren, so dass ich nicht wusste, dass CSS auch importieren muss.

aber ich benutze nicht webpack, ich benutze nur Schluck. diese sind meine node-Module für gulp:

• Vinyl-Source-Strom
• vinyl-Puffer
• browserify
• babelify
• babel-Preset-es2015
• babel-Preset reagieren

und das ist mein 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')); 
}); 

Ich fand, dass mit Import/erfordern CSS in Javascript "browserify-css", also fügte ich mit "npm installieren browserify-css". und fügen Sie dann i Methode meiner gulpfile wie diese Transformation:

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

aber es hat sich einfach so weired Fehler aus:

events.js:154, throw er; // Unhandled 'error' event, SyntaxError: Unexpected token

habe ich mit der Verwendung von browserify-css in meine gulpfile falsch? Was mache ich? es wird sehr geschätzt werden, gib mir einen Rat.

Answer 1

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

Das ist nur eine Syntaxprobleme, weil Sie versuchen, den Punktoperator für ein Objektliteral zu verwenden.

vielleicht so etwas wie diese versuchen ...

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

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