Yapı Ben Bir bileşeni Tepki oluşturduk Gulp, Browserify ve Babel

Question

ile bileşenleri tepki ve dağıtmak istiyorum yerleşik bir sürümüne gulpfile.js yüzden ben, bu bileşenin (yudum ile inşa edilmiş):

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var source = require('vinyl-source-stream'); 

gulp.task('build-js', function() { 
    return browserify('./src/Foo.js') 
     .transform(babelify) 
     .bundle() 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp.task('build', ['build-js']); 

.babelrc yılında:

{ 
    "presets": ["es2015", "react", "stage-0"], 
} 

Ve bunlar bağımlılıkları package.json içindedir:

"dependencies": { 
    "react": "^0.14.7" 
} 
"devDependencies": { 
    "babel-polyfill": "^6.3.14", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "babelify": "^7.2.0", 
    "browserify": "^13.0.0", 
    "gulp": "^3.9.1", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "vinyl-source-stream": "^1.1.0" 
} 

Ben build.js dosya /dist altında oluşturulur gulp build (npm install sonra) çalıştırmak ama diğer app tepki bu bileşeni kullanmak çalıştığımda hata olsun: Bu dosya içine kazmak ise

Error: Cannot find module ' ./emptyFunction'.

(build.js) hata atılır yüzden bileşeni çağıran yeni tepki uygulama oluşturmak çalıştığınızda, ./dist altında yok

var emptyFunction = require('./emptyFunction'); 
... 
var camelize = require('./camelize'); 

bu dosyalar:

, ben bu satırları görebilirsiniz

import Foo from 'my-components-in-node-modules'; 

Neyi eksik?

Düzenleme: O (emptyFunction, camelize gerektirir ben var React = require('react'); kaldırırsanız

var React = require('react'); 
// or import React from 'react'; 

class Foo extends React.Component { 
    static propTypes = {...}; 
    static defaultProps = {...}; 
    render() {...} 
} 
export default Foo; 

:

Ben de görebileceğiniz gibi, garip bileşen dosya içinde tepki gerektiren gelen gerektirir) kaybolur ve hata React is not defined açıktır.

Edit2:

@JMM anlaşılacağı gibi, ben dist klasöründe (benim durumumda Tepki), ama nasıl bunu başarmak gerekir bağımlılıkları olmalı? Benim bileşenimin daha fazla bağımlılığı varsa ne olur? Sadece bağımlılıkların package.json'da tanımlanmış olduğunu düşünmüştüm.

Edit3:

var gulp = require('gulp'); 
var babel = require('gulp-babel'); 

gulp.task('bundle', bundle); 

function bundle() { 
    gulp.src('./src/*.js') 
    .pipe(babel()) 
    .pipe(gulp.dest('./dist')); 
} 

gulp.task('build', ['bundle']); 

Ve hepsi bu:

Sonunda browserify, sadece gulp-babel gerekmez fark etti. Tam örnek şudur: react-svg-components.

browserify('./src/Foo.js') 
// Note this call: 
.external("react") 
.transform(babelify) 
.bundle() 

sorun yudum ile ilgisi yoktur:

Answer 1

en son açıklama dayanarak, büyük olasılıkla bileşeni browserifying zaman böyle bir şey yapmak gerekir. Ayrıca yorumlarda açıkladığınız çalışma zamanı hatasını nasıl ve ne zaman aldığınızı da bilmiyorum.En son bilgilerinize dayanarak sorun, browserify ile birlikte A paketini oluşturuyorsunuz, ardından B tarayıcısına, A bağımlılık grafiğiyle birlikte oluşturuyorsunuz ve browserify A'da zaten var olan göreli require()'leri çözmeye çalışıyor. Bununla başa çıkmayı nasıl this answer alıntı: tüketen/yayınlamadan önce demetine A üzerinde

• Run derequire: Burada

  birkaç seçenek vardır.

• şöyle uygulamanızı browserifying deneyin: Bu işe yaramazsa

  browserify({ 
      entries: ['./entry'], 
      noParse: ['my-components-in-node-modules'], 
  }) 
  

  , mutlak bir yol (require.resolve('my-components-in-node-modules')) deneyin.

• Tüketmeyi azaltmadan önce demeti küçültün A.

Bu sorunun daha ayrıntılı bir açıklaması substack/node-browserify#1151'da bulunabilir.

Bileşeninizle React'ı paketlemenin yol olduğundan emin değilim. Emin değilim, ama bu durumda insanların akranla React'a (dolaylı veya açık olarak) bağımlı olması gerektiğini düşünüyorum. Paketteki reaktifi içermek, farklı bileşenlerin, sorunlara neden olabilecek farklı React örneklerini kullanmaya çalışacağını ve bunu yapan her bileşen için kesinlikle node_modules dizinini şişireceğini ifade eder.