問題タブ [babeljs]

React アプリを ES6 で作成しました。今度は、ES6 でもテストを書きたいと思います。したがって、ここでの課題は、カルマを構成することです。

Google と一緒に、karma.config.js でここまで来ました (構成ファイルの同じ部分を省略しました!):

このセットアップですべきこと: 1) JSX を JS にコンパイルし、次にbabelES6 を ES5 に変換する必要があります。これと一緒に、polyfillたとえばphantomjsで実行する必要があると予想しました。しかし、いいえ、実行したときのカルマからの出力は次のとおりです。

の 35 行目にapp.jsxは、実際の JSX 部分が含まれています。そのため、何らかの理由でプリプロセッサはあまり機能していないようです。プリプロセッサに関するヘルプをいただければ幸いです。

更新：私はこれをほとんど機能していません。私が持っていたプリプロセッサは、このように交換する必要があることがわかりました

これを実行すると、次のようになります。

そのためのポリフィルがあると思いました:(

React v0.12/v0.13:<select>サーバーとクライアント (同型) の両方でレンダリングしたい要素に問題があります。現在問題を再現している例を次に示します。

属性はselectedサーバーではレンダリングされませんが、ブラウザーでは正常に機能します。

defaultValueまた、要素にプロップを設定しようとしまし<select>たが、違いはないようです。ただし、を使用すると機能<option value="C" selected>しますが、コンソールに警告がスローされ、valueまたはdefaultValueプロップのいずれかを使用するように指示されます。

ドキュメントでは、望ましい動作についても説明しています: https://facebook.github.io/react/docs/forms.html#why-select-value

このコードは、トランスパイルにbabel-coreを使用してノード v0.12 で実行されています。

これはバグですか、それとも何か不足していますか?

更新:これは React のバグです。以下の私のコメント/リンクを参照してください。

以下は、Gulp ES6 変換タスクです。正常に動作しますが、新しいファイルがキャッチされるように、gulp.watch を gulp-watch プラグインに置き換えようとしています。問題は、コールバックで gulp.watch が行うことを gulp-watch が教えてくれないことです。それについてどうすればよいかわかりません。

これが私の元の作業タスクです。

そして、これがgulp-watchでこれまでに持っているすべてです:

ロギングの出力は次のとおりです。

イベントを見る - history,cwd,base,stat,_contents,event

イベントを見る - 変更

イベントを見る - ..

以前に持っていた情報を gulp-watch で取得するにはどうすればよいですか、またはタスクのコードを変更してこれを gulp-watch で再び機能させるにはどうすればよいですか?

プロジェクトに新しい npm パッケージを追加し、モジュールの 1 つでそれを必要としました。

今、私はwebpackからこのメッセージを受け取ります.

build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".

どういう意味ですか？何かアクションを起こす必要がありますか?

私はes7スタイルのasync/awaitメソッドでbabeljsを使用しています。すべてが promise を返すオブジェクトの配列に対して async メソッドを呼び出すメイン スクリプトがあります。Promise.all() を使用してそれらすべてが戻るのを待ちますが、これらのタスクには時間がかかる可能性があり、しきい値を超えた場合はすべてを中止し、タスクはそれを適切な方法で処理します。

とにかくそのようなことを達成することはありますか？現在、私が考えることができる唯一の方法は、これらのメソッドを呼び出す作業を行うプロセスを生成し、それらがすべて解決されるのを待つことです。制限時間に達した場合、プロセスを強制終了し、必要な処理を行うことができます。

更新: メイン スクリプトが待機しているこれらのメソッドに関するいくつかの明確化...それらは長い一連の操作 (外部システムの呼び出し、どこかでのファイルのストリーミングなど) を実行しており、個別にキャンセルできる単一のアクションを実行していない可能性があります。

更新 #2: テストされていない半疑似コード

私はES6で書かれた単純なクラスを持っています

そのコードを ES5 にコンパイルしてからbabel MyClass.es6 > MyClass.js、既存の ES5 コードベースで使用してみます。

しかし、t にはメソッド allValues がないというエラーが表示されます。私がやろうとしていることは可能ですか？

を使用して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灰色の線のようなものです。

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

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

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

TL;DR;

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

watchify が変更を検出するたびに、バンドル時間が遅くなります。私のgulpタスクに何か問題があるに違いありません。誰でもアイデアはありますか？

generator-gulp-angular でGulp を使用しています。私はこの同じジェネレーターを他のいくつかのプロジェクトで使用していますが、問題なく動作します。新しいプロジェクトを立ち上げ、他のプロジェクトで使用している CoffeeScript の代わりに ES6 を使用することにしました。

残念ながら、 を実行するgrunt serveと、 の最後に次のように表示されます.tmp/serve/app/index.js。

最後}であり、])そこにあるはずはありません。それらがいつ存在するかを示すエラーが表示されUncaught SyntaxError: Unexpected token }ます。それらを削除すると、すべて正常に動作します。

この問題のトラブルシューティング方法もわかりません。何が間違っている可能性がありますか?

私たちは昨年、CoffeeScript を使用しており、中括弧の代わりに空白が本当に好きになり始めました。

ES6/7 とbabelは非常にクールに見え始めていますが、残念ながら、CoffeeScript は新機能の組み込みに少し消極的/遅いようです。（おそらく、そうするのがあまりにも簡単ではないためです）。

最初のステップとして実行され、js ファイルを確認し、インデントに基づいて必要な場所に中括弧を追加する webpack ローダーを作成する可能性について考えています。このように、私たちは es6/7 コードを書くことができましたが、ソースコードの醜い括弧を書く (そして読む!!) 必要はありません :)

誰かがこのような試みをしているように見えますか? これを行うと、どのような結果が見られますか?