web-dev-qa-db-ja.com

スクリプトタグテキスト/ babel変数のスコープ

まず、text/babelは本番環境では使用しないことを理解していますが、.jsxファイルに変更を加えると、何もしなくてもDjangoの開発ウェブサーバーが再読み込みされるので、開発には非常に便利です（つまり、変更するたびにJSXをJSにコンパイルします。

これは私が開発していない大規模なシステム用の小さなプラグインであるため、私はビルド環境（Djangoなど）を制御できません。

問題はこれです：

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

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

mythingはmain.jsxにあり、次のように単純です。

var mything = "hello";

main.jsxがjavascriptである場合（およびスクリプトタグのタイプがそれに応じて変更される場合）、これは問題なく機能します。 text/babelと同様に、mythingがスコープ内にないため機能しません。

Uncaught ReferenceError: mything is not defined

これは、さまざまな種類のスクリプトタグがスコープを共有することを期待しないため、私には理にかなっていますが、これを回避して開発を支援するための巧妙な方法があるかどうか疑問に思っています。

以前はすべてのコードを単一のtext/babelブロックに入れていましたが、それが大きくなるにつれて、それをいくつかのJSXファイルに分離するといいでしょう。

javascriptbabeljs
12
dpwrussell

Babelソースを深く掘り下げることなく（ https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js を見て）、私はJSXソースを読み取り、ソースで変換を実行してから、何らかの方法でソースをevals実行すると推測します。変換されたコード（ES6の標準）にバベルが'use strict';を付加するため、スコープは共有されません。

本当に変数を公開する必要がある場合は、変数をwindowにアタッチできます（つまり、mythingの代わりにJSXでwindow.mythingを使用します）。理想的には、コードを複数のファイルに分割するときにモジュールを使用する必要があります。ビルドステップを利用してBabelを介してコードを変換し、browserify/webpackを使用して依存関係を管理できます。

7
compid