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 .