À l'aide de gulp-browserify pour mon React.js les modules je suis exigent "n'est pas défini" dans le navigateur
Je suis en train d'utiliser gulp-browserify pour générer un bundle.js fichier qui peut être inclus pour le navigateur du client et de commencer le rendu de Réagir composants.
Voici mon App.js fichier:
/** @jsx React.DOM */
var React = require('react');
var App = React.createClass({
render: function() {
return <h1>Hello {this.props.name}!</h1>;
}
});
module.exports = App;
Et mon colis.json:
"name":"hellosign-gulp",
"version":"0.1.1",
"dependencies": {
"gulp": "3.5.x",
"gulp-browserify": "0.5.0",
"reactify": "~0.8.1",
"react": "^0.10.0",
"gulp-react": "0.2.x"
}
}
et mon gulpfile
var gulp = require('gulp'),
react = require('gulp-react'),
browserify = require('gulp-browserify');
gulp.task('brow-test', function() {
//Single entry point to browserify
gulp.src('./src/App.js', {read: false})
.pipe(browserify({
insertGlobals : true,
transform: ['reactify'],
extensions: ['.jsx'],
debug :false.
}))
.pipe(gulp.dest('.'))
});
Maintenant quand je lance le 'front-test" j'ai renommer le fichier de sortie bundle.js et l'inclure dans la réponse HTTP du navigateur. L'bundle.js le fichier est assez gros pour que je ne comprend pas ici, mais le navigateur finit par lancer une erreur
Uncaught ReferenceError: besoin n'est pas défini
J'ai exactement le même programme d'installation fonctionne correctement avec la version standard de browserify l'utilisation de ces commandes
browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js
Et puis je n'ai pas l'erreur. Pourquoi est-gulp-browserify ne crée pas le besoin cale correctement?
- Je ne crois pas que le programme d'installation est le même parce que vous ne
-r react -r ./src/App
sur la ligne de commande, (pas très familier avec gulp). - Vous pouvez exécuter la régulière browserify dans gulp à l'aide de vinyle-source-ruisseau et gulp-tampon. C'est ce que nous faisons parce que le clin d'oeil, browserify a jamais été assez bon pour nous.
- Je ne peux toujours pas obtenir le principal besoin pour obtenir des exposés. J'ai simplifié le problème et posté une nouvelle question ici: stackoverflow.com/questions/24329690/...
- A l'aide de browserify avec vinyle-flux source d'améliorer votre flux de travail?
Vous devez vous connecter pour publier un commentaire.
Mise à JOUR: j'ai écrit un nouveau message sur ce, à l'aide de différents outils de packaging. Il comprend également un optimisée exemple de browserify: Choisir le bon outil de conditionnement pour Réagir JS
À tous ceux qui lisent ce post pour obtenir une Réagir JS flux de travail et en cours d'exécution:
J'ai eu beaucoup de problèmes à obtenir ce travail, et a fini par écrire un post sur elle: Réagir JS et un browserify de flux de travail. C'est ma solution, faire en sorte que vous pouvez transformer votre JSX et poignée séparée de regarder d'autres fichiers.
Pour résoudre le problème de Réagir à l'aide de la JS DEV-TOOLS en chrome, c'est ce que vous avez à faire dans votre main.js fichier:
J'espère que cela va vous aider à aller de l'avant!
/app/main.js
etmain.js
est... Sont-ils différents fichiers?Exécuter browserify directement sur votre dossier, et de ne pas utiliser gulp-browserify plugin.
Référencé ici: https://github.com/gulpjs/plugins/issues/47
"Browserify devrait être utilisé comme un module autonome. Il renvoie un flux de données et des chiffres de votre graphe de dépendance. Si vous avez besoin de vinyle, des objets, utilisez la browserify + vinyle-source-ruisseau"
vous pouvez obtenir les résultats que vous voulez comme ceci:
maintenant, dans votre forfait Json,que vous avez besoin de réagir, browsierify et ainsi de suite. Vous pouvez également cale browserify ici, utiliser des transformations ou quoi que ce soit.
ou simplement faire comme vous, et comprennent réagir sur la page que vous l'utilisez
ou si vous voulez un peu de la pratique helper trucs:
Mais la ligne de fond est d'utiliser browserify directement dans gulp et utiliser le vinyle-source-ruisseau d'entrer dans gulp pipeline.
Je l'utiliser pour mon réagir travail .
JS:
Voici le gulp recette pour l'utilisation
browserify
(avecvinyl-transform
et amis) pour atteindre l'équivalent exact dedans
src/App.js
dans
gulpfile.js
Je ne vois pas directement ce qui est erroné avec votre code, mais je suis en utilisant ce
gulp.src('./src/js/index.js')
.pipe(browserify())
.on('prebundle', function(bundle) {
//React Dev Tools tab won't appear unless we expose the react bundle
bundle.require('react');
})
.pipe(concat('bundle.js'))
J'ai utilisé https://www.npmjs.org/package/gulp-react de transformer le .jsx mais aujourd'hui je préfère utiliser du javascript.
Laissez-moi savoir si cela fonctionne pour vous, si ce n'est j'ai pu extraire un exemple de modèle de...
paquet.json:
gulpfile.js:
gulp-browserify
puisqu'il est actuellement mis à l'index. Vous êtes mieux d'utiliser lebrowserify
paquet.Définir
ceux javascript global de la valeur dans un App.js que mettre cette
dans Gulpfile.js.
Et pour le dernier, de mettre main.js en HTML, et cela devrait fonctionner.
Le problème est que si nous utilisons var Réagir=require('réagir'), l'objet de Réagir n'est pas visible de l'autre script, mais Réagissent=require('réagir'), définir une valeur globale.