Wie beide verwenden 'schlucke-babel' und 'Schluck-browserify'

Question

Ich versuche, diesen Code

gulp.task('script', function() { 
    'use strict' 
    return gulp.src(['app.js', 'components/**/*.jsx']) 
    .pipe(babel()) 
    .pipe(browserify()) 
    .pipe(gulp.dest("dist")); 
}); 

zu schreiben, aber es zeigt einige Fehler:

SyntaxError: 
/Users/Zizy/Programming/learn-react-js/components/CommentBox.jsx:58 
    <div className="commentBox"> 
    ^
ParseError: Unexpected token 
    at wrapWithPluginError (/Users/Zizy/Programming/learn-react-js/node_modules/gulp-browserify/index.js:44:10) 

Es scheint, dass vor .pipe(browserify()) der gulp hat den jsx-Code nicht umgewandelt. Aber wenn ich nur .pipe(browserify()) entferne ich finde, dass sich transformiert hat, kann einfach nicht zulassen, dass babel und browserfig zusammenarbeiten.

Ich weiß, vielleicht kann ich wie babelify oder browserify plugin for babel obwohl ich will nur herausfinden, der Grund.

Answer 1

schluck-browserify doesn‘ So arbeiten Sie so. Sie geben ihm nicht eine Menge Puffer zum Sammeln und Bündeln.

Sie geben ihm eine Datei — der Eintrag Datei —, die es in Browserify passiert. Browserify überprüft, was andere Dateien die Eintragsdatei Verweise, dann lädt diese Dateien direkt aus dem Dateisystem, was bedeutet, dass Sie sie nicht mit gulp Plugins im Voraus ändern können.

Also, wirklich, wenn wir Sie so tun, nicht wollen, Babel auf den Quelldateien verwenden, Ihre gulpfile sollte wie folgt aussehen, nur in dem Dateieintrag vorbei:

gulp.task('script', function() { 
    'use strict' 
    return gulp.src('app.js') 
    .pipe(browserify()) 
    .pipe(gulp.dest("dist")); 
}); 

Beachten Sie jedoch, dass schluck -Browserify wird nicht mehr gepflegt, und genau deshalb. gulp plugins sollen nicht direkt aus dem Dateisystem lesen. Deshalb sollten Sie Browserify (oder in Ihrem Fall Babelify) direkt mit Vinyl-Source-Stream as recommended in the gulp recipes verwenden. Es ist idiomatischer und weniger verwirrend.

Das schließt meine Antwort auf Ihre Frage, aber ich möchte hinzufügen: Wenn Sie die ES2015-Modul-Syntax verwenden (und Sie sollten wahrscheinlich sein), gibt es einen besseren Weg, dies zu tun. Browserify umschließt alle Module separat in einer Menge Code, damit die programmgesteuerte CommonJS-API ordnungsgemäß funktioniert. Die ES2015-Module verfügen jedoch über eine deklarative Syntax, die es den Tools wesentlich erleichtert, sie statisch zu bearbeiten. Es gibt ein Tool namens Rollup, das davon profitiert und es ermöglicht, Pakete zu produzieren, die kleiner, schneller und umweltfreundlicher als die von Browserify sind.

Hier ist, wie Sie es mit großen Schluck verwenden könnte:

var gulp = require('gulp'), 
    rollup = require('rollup-stream'), 
    babel = require('gulp-babel'), 
    source = require('vinyl-source-stream'), 
    buffer = require('vinyl-buffer'); 

gulp.task('script', function() { 
    return rollup({entry: 'app.js'}) 
    .pipe(source('app.js')) 
    .pipe(buffer()) 
    .pipe(babel()) 
    .pipe(gulp.dest('dist')); 
}); 

Answer 2

Ab Babel 6 müssen Sie die Voreinstellungen manuell deklarieren, überprüfen Sie this.

Grundsätzlich sind in der Wurzel Ihres Projekts benötigen Sie einen .babelrc mit folgendem Inhalt:

{ 
    "presets": [ "es2015", "react" ] 
} 

und die entsprechenden npm Module in package.json:

// package.json 

{ 
    "devDependencies": { 
    ... 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    ... 
    } 
}