Come utilizzare sia 'gulp-babele' e 'gulp-browserify'

Question

provo a scrivere questi codice

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

ma mostra qualche errore:

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) 

Sembra che prima .pipe(browserify()) il Gulp non ha trasformato il codice jsx. Ma se rimuovo lo .pipe(browserify()) trovo che è stato trasformato, non posso lasciare che babel e browserify funzionino insieme.

So che forse posso usare come babelify o browserify plugin for babel, tuttavia, voglio solo capirne il motivo.

Answer 1

gulp-browserify doesn' t abbastanza lavoro così. Non gli dai un sacco di buffer da raccogliere e raggruppare.

Gli dai un file — il file di entrata — che passa in Browserify. Browserify controlla per vedere cosa altri file i riferimenti del file di input, quindi carica quei file direttamente dal file system, il che significa che non è possibile modificarli in anticipo con i plugin gulp.

Così, davvero, se facciamo finta non si desidera utilizzare Babel sui vostri file sorgente, il vostro gulpfile dovrebbe essere simile a questo, solo passando nel file di entrata:

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

Tuttavia, si noti che gulp -browserify non viene più mantenuto, e questo è esattamente il motivo. i plugin gulp non dovrebbero leggere direttamente dal file system. Questo è il motivo per cui dovresti utilizzare Browserify (o, nel tuo caso, Babelify) direttamente con lo stream di vinile as recommended in the gulp recipes. È più idiomatico e meno confuso.

Questo avvolge la mia risposta alla tua domanda, ma vorrei aggiungere: se stai usando la sintassi del modulo ES2015 (e probabilmente dovresti esserlo), c'è un modo migliore per farlo. Browserify avvolge tutti i moduli separatamente in un mucchio di codice per far funzionare correttamente l'API programmatica di CommonJS, ma i moduli ES2015 hanno una sintassi dichiarativa, che rende molto più semplice l'utilizzo statico di strumenti su di essi. C'è uno strumento chiamato Rollup che si avvantaggia di questo, permettendogli di produrre bundle più piccoli, più veloci e più intuitivi rispetto a quelli di Browserify.

Ecco come si potrebbe utilizzarlo con sorso:

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

A partire da Babel 6 è necessario dichiarare le preimpostazioni manualmente, controllare this.

In sostanza, nella radice del vostro progetto è necessario un .babelrc con il seguente contenuto:

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

E i corrispondenti moduli NPM in package.json:

// package.json 

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