balise de script texte/babel la portée des variables

Tout d'abord, je comprends text/babel n'est pas pour une utilisation en production, mais je l'ai trouvé très utile pour le développement comme quand je fais une modification de mon .jsx fichier django dev serveur web de rechargement sans m'avoir rien à faire (c'est à dire de compiler le JSX JS après chaque changement).

Je ne suis pas dans le contrôle de l'environnement de compilation (par exemple, django) comme c'est un petit plugin pour un système plus vaste que je ne suis pas en développement.

Le problème est: est-ce

<script type="text/babel" src="{% static "myapp/js/main.jsx" %}"></script>

<script>
    $(function() {
      console.log(mything);
    }
</script>

Où mything est dans main.jsx, quelque chose d'aussi simple que:

var mything = "hello";

Si main.jsx est du javascript (et le type des balises de script est modifié en conséquence), cela fonctionnera très bien. Comme text/babel cependant, il ne fonctionnera pas parce que mything n'est pas dans la portée.

Uncaught ReferenceError: mything is not defined

Cela fait sens pour moi que je ne m'attends pas à des balises de script de différents types de partager une portée, mais je me demandais si il y a un moyen astucieux de contourner cela pour l'aide au développement?

J'ai déjà eu tout le code dans un seul text/babel bloc, mais comme il grandit, il serait bon de séparer en plusieurs JSX fichiers.

Pour l'exhaustivité. J'ai fini par suppression de l'utilisation de text/babel et au lieu de la création de mon code avec webpack.

OriginalL'auteur dpwrussell | 2015-10-13

  1. 6

    Sans plonger trop profondément dans la Babel de la source (en regardant https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js), je suppose qu'il lit votre JSX source, effectue la transformation de la source, puis evals la source d'une certaine façon de l'exécuter. La portée n'est pas partagée, parce babel ajoute 'use strict'; de la transformée de code (standard dans l'ES6).

    Si vous avez vraiment besoin d'exposer une variable, vous pouvez l'attacher à window (c'est à dire l'utilisation window.mything dans votre JSX au lieu de simplement mything). Idéalement, vous devriez faire usage de modules que vous divisez votre code dans plusieurs fichiers. Vous pouvez faire usage d'une étape de génération de transformer votre code par le biais de Babel et l'utilisation browserify/webpack pour gérer les dépendances.

    J'ai jamais utilisé eval n'était donc pas au courant de la façon dont "use strict" affecté. C'est intéressant.
    Comme pour le reste. Oui, je sais que sur les modules, mais c'est d'un banal exemple. Je ne peux pas vraiment ajouter une étape de génération que je ne suis pas dans le contrôle de la construction du système et je ne veux pas avoir à collaborer avec des personnes qui n'ont pas mon local de construire de l'installation où ils sont en train de modifier le javascript lorsque la source est JSX. Il n'est pas vraiment une solution propre de que dans le long terme, de sorte que c'est probablement ce que je vais devoir aller avec.
    Je vois. Dans ce cas, très soigneusement ajout d'objets à la portée globale de votre JSX fichiers semble être une solution viable.

    OriginalL'auteur