reactjs - paginas - Componentes Build Rect con Gulp, Browserify y Babel

react cdn

Question

Creé un componente React y quiero distribuir una versión incorporada ( gulpfile.js con gulp) de este componente, así que en gulpfile.js tengo:

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

En .babelrc :

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

Y estas son las dependencias en package.json :

"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"
}

Cuando ejecuto gulp build (después de la npm install ) el archivo build.js se crea en /dist , pero cuando intento usar este componente desde otra aplicación de React, aparece el siguiente error:

Error: no se puede encontrar el módulo ''./emptyFunction''.

Si build.js este archivo ( build.js ), puedo ver estas líneas:

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

Estos archivos no existen en ./dist , por lo que se ./dist el error cuando intento crear la nueva aplicación React que llama al componente:

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

¿Qué me estoy perdiendo?

Editar :

Como puedo ver, lo extraño requiere venir de requerir React dentro del archivo componente:

var React = require(''react'');
// or import React from ''react'';
class Foo extends React.Component {
static propTypes = {...};
static defaultProps = {...};
render() {...}
}
export default Foo; 

Si var React = require(''react''); esos requieren (emptyFunction, camelize) desaparecer, y el error es React is not defined , obviamente.

Edit2:

Como sugiere @JMM, debería tener las dependencias (Reaccionar en mi caso) en la carpeta dist , pero ¿cómo debería lograrlo? ¿Qué pasa si mi componente tiene más dependencias? Pensé que solo tenía que tener las dependencias definidas en package.json .

Edit3:

Finalmente me di cuenta de que no necesito el browserify , solo gulp-babel :

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

Y eso es todo. El ejemplo completo está aquí: react-svg-components .

Answer 1

Según su explicación más reciente, probablemente necesite hacer algo como esto cuando explore su componente:

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

El problema no tiene nada que ver con trago. Tampoco sé cómo / cuándo obtuvo el error de tiempo de ejecución que describió en los comentarios. Según su última información, el problema es que está creando el paquete A con browserify, luego creando el paquete B con browserify, con A en su gráfico de dependencia, y browserify está tratando de resolver los relativos require() que ya están agrupados en A Citando de esta respuesta cómo lidiar con eso:

Aquí hay algunas opciones:

• Ejecute la solicitud de derequire en el paquete A antes de consumir / publicar.

• Intente buscar su aplicación de la siguiente manera:

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

  Si no funciona, intente con una ruta absoluta ( require.resolve(''my-components-in-node-modules'') ).

• Minimice el paquete A antes de consumirlo.

Se puede encontrar una explicación más detallada de ese problema en substack / node-browserify # 1151 .

No estoy seguro de que combinar Reaccionar con tu componente sea el camino a seguir. No estoy seguro, pero creo que en ese caso las personas deben mirar de cerca y depender de React (implícita o explícitamente). Incluir React en el paquete significa que diferentes componentes intentarían usar diferentes instancias de React, lo que puede causar problemas, y definitivamente inflaría el directorio node_modules para cada componente que lo haga.