का उपयोग कैसे करें दोनों 'घूंट-कोलाहल' और 'घूंट-browserify'

Question

मैं इन कोड

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

लिखने की कोशिश, लेकिन यह कुछ त्रुटि दिखाता है:

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) 

ऐसा लगता है कि .pipe(browserify()) से पहले gulp जेएसएक्स कोड को बदल नहीं था। लेकिन अगर मैं सिर्फ .pipe(browserify()) हटा देता हूं तो मुझे लगता है कि यह बदल गया है, बस बेबेल और ब्राउज़र को एक साथ काम करने की अनुमति नहीं दे सकता है।

मुझे पता है कि मैं babelify या browserify plugin for babel जैसे उपयोग कर सकता हूं, हालांकि, मैं सिर्फ कारण समझना चाहता हूं।

Answer 1

घूंट-browserify नहीं करता ' इस तरह काफी काम नहीं करते हैं। आप इसे इकट्ठा करने और बंडल करने के लिए बफर का एक गुच्छा नहीं देते हैं।

आप इसे एक फ़ाइल — प्रविष्टि फ़ाइल — प्रदान करते हैं जो यह ब्राउज़रify में गुजरती है। यह देखने के लिए ब्राउज़र को सत्यापित करें कि अन्य प्रविष्टि फ़ाइल संदर्भों को फाइल करता है, फिर उन फ़ाइलों को सीधे फ़ाइल सिस्टम से लोड करता है, जिसका अर्थ है कि आप उन्हें पहले से गल्प प्लगइन्स के साथ संशोधित नहीं कर सकते हैं।

तो, वास्तव में, अगर हम नाटक आप अपने स्रोत फ़ाइलों पर कोलाहल का उपयोग नहीं करना चाहते हैं तो आपका gulpfile इस तरह दिखना चाहिए, केवल प्रविष्टि फ़ाइल में गुजर:

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

हालांकि, ध्यान दें कि घूंट -ब्रोसेरफाइफा अब बनाए रखा नहीं गया है, और यही कारण है कि। gulp प्लगइन्स सीधे फ़ाइल सिस्टम से पढ़ने के लिए नहीं माना जाता है। यही कारण है कि आप सीधे vinyl-source-stream as recommended in the gulp recipes के साथ ब्राउज़रify (या, अपने मामले में, Babelify) का उपयोग करना चाहते हैं। यह अधिक मूर्खतापूर्ण और कम भ्रमित है।

यह आपके प्रश्न के उत्तर को लपेटता है, लेकिन मैं यह जोड़ना चाहता हूं: यदि आप ES2015 मॉड्यूल सिंटैक्स (और शायद आपको होना चाहिए) का उपयोग कर रहे हैं, तो ऐसा करने का एक बेहतर तरीका है। प्रोग्रामिस्टिक कॉमनजेएस एपीआई सही तरीके से काम करने के लिए ब्राउज़र के अपने समूह में अलग-अलग मॉड्यूल को अलग-अलग लपेटता है, लेकिन ES2015 मॉड्यूल में एक घोषणात्मक वाक्यविन्यास होता है, जो उपकरणों पर उनके लिए स्थिर रूप से काम करना अधिक आसान बनाता है। Rollup नामक एक उपकरण है जो इसका लाभ उठाता है, जिससे यह ब्राउज़र के मुकाबले छोटे, तेज़ और अधिक मिनीफिकेशन-अनुकूल होते हैं।

का तरीका यहां बताया घूंट के साथ इसका इस्तेमाल दे सकता है:

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

बेबेल 6 से शुरू करने से आपको प्रीसेट को मैन्युअल रूप से घोषित करने की आवश्यकता है, this देखें।

मूल रूप से, अपनी परियोजना के रूट में आप निम्नलिखित सामग्री के साथ एक .babelrc की जरूरत है:

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

और package.json में इसी NPM मॉड्यूल:

// package.json 

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