react paginas hechas example con reactjs gulp browserify babeljs

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



react cdn (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.

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 .