script etiketi metin/babel değişken kapsamı

Question

İlk olarak, text/babel modelinin üretimde kullanılmayacağını anlıyorum, ancak geliştirme için oldukça yararlı buldum. .jsx dosyamda bir değişiklik yaptığımda django'nun dev web sunucusu benim yapmam gerekmeden yeniden yüklenecek bir şey (ör. her değişiklikten sonra JSX’i JS’ye derleyin).

Oluşturma ortamını (örneğin django) kontrol etmiyorum; çünkü bu, geliştirmediğim daha büyük bir sistem için küçük bir eklentidir.

sorun şudur:

mything, main.jsx olduğu kadar basit bir şeydir

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

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

:

var mything = "hello"; 

Eğer main.jsx javascript (ve komut etiketleri tipi buna göre değiştirilir) o zaman bu iyi çalışır. text/babel olarak, mything kapsamı olmadığı için çalışmayacaktır. Ben bir kapsam paylaşmak için farklı türde komut dosyası etiketlerini şey istemem

Uncaught ReferenceError: mything is not defined 

Bu benim için mantıklı ama kalkınmasında yardım bu sorunu zekice bir yol olup olmadığını merak ediyorum?

Daha önce tüm kodu tek bir text/babel satırında buldum, ancak büyüdükçe, birkaç JSX dosyasına ayırmak güzel olurdu.

Answer 1

Babel kaynağına çok fazla dalış yapmadan (https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js'a bakın), JSX kaynağınızı okuduğunu, kaynakta dönüşüm gerçekleştirdiğini ve daha sonra onu yürütmek için bir şekilde eval s kaynağını tahmin edeceğini tahmin edeceğim. Bu kapsam paylaşılmamıştır çünkü babel, dönüştürülmüş koda 'use strict';'u ekler (ES6'da standarttır).

Bir değişkeni gerçekten ifşa etmeniz gerekiyorsa, window'a ekleyebilirsiniz (yani window.mything'u sadece mything yerine JSX'inizde kullanabilirsiniz). İdeal olarak, kodunuzu birden fazla dosyaya böldüğünüzde modüller kullanmalısınız. Kodunuzu Babel aracılığıyla dönüştürmek için bir kurulum adımından yararlanabilir ve bağımlılıkları yönetmek için browserify/webpack'i kullanabilirsiniz.