1

ここに画像の説明を入力

を使用してbrowserify -> babelify -> uglify2います。そして、これreact_app.jsxは実際にはソース マップから読み込まれます。

さらなる実験編集：

  • プレーン js -> browserify: いいえ
  • jsx -> 反応してブラウザ化: はい
  • jsx -> babelify で browserify: はい

では、jsxについてですか？

さらなる実験

jsxからjsへのソースマップについてです。私は使用reactify 0.17していましたが、うまく機能します。ただし、reactify 1.0ソース マップ オプションをtrue. そのための保留中の問題があります。

のクロムのビューは、reactify 0.17灰色の線のようなものです。

render: function () {
    return (
        React.createElement("div", {className: "tile"}, 
            React.createElement("div", {className: "chart"})
        )
    );
}

のクロムのビューはreactify 1.0灰色の線のようで、ブレークポイントが機能しないことがあります!:

render: function () {
    <div className="tile">
        <div className="chart" />
    </div>
}

グレーのラインを再現できます。しかし、非稼働ブレーク ポイントは予測できません。babelifyデフォルトでは、ソース マップが「オン」になっているため、 のように動作しreactify 1.0ます。

@SteveB @AndersNSは、それらの灰色の線を構成したのはクロムであったことは正しかったと思います. そして、それらは実際の線ではないため、ブレーク ポイントは奇妙な動作をします。

TL;DR;

reactify 1.0.jsxからへのソース マップを実装し.jsます。Chrome 開発ツールはそのソース マップを尊重しますが、完全には互換性がないようです。

4

0 に答える 0