Pixi.js: ヘルプ募集：ES6変換の取り組み

letとconstでどちらのルートを下りたいですか？ デフォルトはconstで、参照を変更する必要があるプロパティにはletのみを使用します
または
デフォルトではletにし、constは、開発者へのヒントとしてのみ使用します。私は真剣に、これを変更しないでください。

前者のオプション。 デフォルトではconstを使用します。 私はすべての内部変数をletに変換し、明らかなスコープの問題を修正し、jshintでのvarの使用を禁止しました。 constで別のパスが必要です。

私がお勧めするもの：

• [x] babel-preset-es2015-looseを使用してください。私は、babel-preset-es2015だけでパフォーマンスが低下しました。
• [x] eslintに切り替えてください。これは、ES6のサポートが優れており、一般的なjshintよりも優れています。 これがpixiのスタイルの良い出発点です。 また、 constを使用できるが、 letを使用した場所についても文句を言います。 constのために修正する必要があるすべての場所を簡単に見つけることができます。
• [x] jsdocの最新のマスターを使用してください。まだリリースされていない、多くのES6修正が含まれています。
• webpackに切り替えます。

@englercjに感謝します。 良いリスト。

@ englercj babel-preset-es2015-looseには非推奨の警告があります。提案されているように、オプション{"loose": true}を指定してbabel-preset-es2015を試しましたか？

また、browserifyよりもwebpackの方が好きです。いくつかの便利なリンクがあります。
https://github.com/webpack/webpack/tree/master/examples/multi-part-library
http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

私の好みは、webpackを待つことであり、それを積み上げることではありません。 別の小さなPRの可能性があります。 この変更はビルドプロセスの変更を表していますが、必ずしもES6の改善ではありません。 また、ソースマップ、ヘッダーなどが機能することを確認する必要があります。 どうすればいいのかわかりますが、とりあえず待ちましょう。

babel-preset-es2015-looseには非推奨の警告がありますが、提案されているように、オプション{"loose"：true}を指定してbabel-preset-es2015を試しましたか？

ハ、それは2週間前に追加されたばかりです。 使い始めた時点では存在していなかったので、試したことはありません。

皆さんこんにちは、

ルーズモードについてのチャドの考えを反映するためにちょっと一言、ここに私の2セントを追加します。
パフォーマンスに本当に注意する必要がある前に@GoodBoyDigitalと話し合ったので、ルーズモードは良い出発点だと思います。

また、このテーブルがどれほど最新かはわかりません： https ：//kpdecker.github.io/six-speed/皆さんご存知ですか？

それでもそうであれば、ES2015の狂気に陥らないように注意し、必要のないものを変換する必要があります。つまり、 for-ofがテーブルに示されているようにパフォーマンスを低下させる場合は、そうすべきではありません。シーングラフの子を反復処理するときに使用します。

Babelは配列用にfor-ofを最適化する必要があります（最適化を参照）。これらのテストはかなり古いようです。

とにかく、 @ alvinsightは正しいです、すべてがES2015である必要はありません。

良いリスト@englercj ！

@alvinsightにも同意しました。 すでにes6構文を使用したよりクリーンなコードが表示されているので、すべてのラウンドで勝ちます:)

他のすべての決定は、パフォーマンスに基づく必要があります-'見た目は良くなりますが、実行速度は遅くなります-実行しないでください'

配列のループは良い例です。高速で読み取り可能なものを、できるという理由だけで置き換える必要はありません。

webpackもそうです！ @bigtimebuddyは正しいです、それはes6へのこのシフトのパート2であるはずです。

同意しました！
最終的にclass Sprite extends Containerを読み書きできるようになったのは、とても素晴らしいことです。

更新しました

• jshintをeslintに置き換えました（そして、lintingエラーを修正し、 eslintで勝ちました！）
• loose: trueをbabel-preset-es2015で使用する

夕方！

私たちのミックスインで少しシュナグを打ってください。

Object.assign(
    core.DisplayObject.prototype,
    require('./interactiveTarget')
);

上記は現在ES6ブランチでは機能していないため、インタラクションなどは無効になります。

es6クラスでこれを行うための良い方法はありますか？

はがきで答えてください！

わかりました、私は初めて正しかったです-上記のコードは現在機能していません..（金曜日の夜の事実でこれを非難することはできますか？）

構図が光るところだと思います！

うーん、何が機能していないのですか？ これは私のために働いた：

class MyThing {}
Object.assign(MyThing.prototype, { newFn: function () { console.log('mix'); } });
var mything = new MyThing();
mything.newFn(); // logs: "mix"

それをChromeコンソールにコピーして貼り付けてください。正常に動作しているようです。

面白い！ 現在、インタラクションは機能しておらず、インタラクティブなプロパティが欠落しているようです。 多分別の理由？ 掘り続けます...

あはは！ それを見つけた

Object.assign(
    core.DisplayObject.prototype,
    require('./interactiveTarget') <--- this is a require!
);

import interactiveTarget from './interactiveTarget';

Object.assign(
    core.DisplayObject.prototype,
    interactiveTarget
);

多分？

うん！

PR 1はこちら： https ：//github.com/pixijs/pixi.js/pull/2960

ミックスインやテキストなどのいくつかのビットを修正します。

明日はフィルターを見ていきます...

チャップスでも本当に格好良い！

よくできました！ そうです、require（）をそのように使用すると、期待した他のすべてを含む単一のデフォルトキーを持つオブジェクトが返されます。

フィルターが見栄えが良くなりました！ 私が取り組んでいる現在のプロジェクトでこれを実行したのはかなり複雑です-そしてすべてが100％機能しているようです！

他のいくつかのゲームでテストするかもしれませんが、すぐにマージするのが良いでしょう！

@bigtimebuddy pixi -animateでこのビルドを試しましたか？

これをそこに投げる..トレーサーはバベルよりも速いようですか？
調査する価値がありますか？

https://kpdecker.github.io/six-speed/

これらのテストは古く、バベルを緩めた状態では実行されません。 その上、多くの場合、typescriptは両方よりも速いと主張することもできます:)

この主要な書き直し/適応の一部としてTypeScriptの使用を検討することをお勧めします。 TypeScriptに関するいくつかのポイント：

• JavaScriptで型システムを使用することが新しい標準になります。それは時間の問題です。
• JavaScriptです。 型システム以外の構文に違いはありません。
• コードの品質を向上させます。 適切な場所のタイプに一致するように少し再構築する必要があるかなりの量のコードが見つかる可能性があります。
• プルリクエストの品質チェックを強化します-タイプの問題がある場合、パッチをマージすることはできません。

これは簡単な雑用ではないことは知っていますが、コードベースとコミュニティに大きなメリットをもたらすことができると思います。
乾杯！

@endel pixi -spineをtypescriptに移行します。pixi用の、TSプラグインのデモがあります。

@endelは好奇心が強いですが、TSは、最後に調べたときに発生した問題を解決しました。出力に関しては、オールオアナッシングの状況です。つまり、ターゲットに基づいて、_すべて_がES5にトランスパイルされるか、何もありません。 ？

ポリフィルをまったく使用していなかったことを覚えています。 したがって、単一のコードベースを最先端からレガシーまでの幅広いブラウザーで実行する場合でも、ES5をターゲットにする必要があり、最新のブラウザーがネイティブにサポートするようになったすべての優れた新機能は無視されます。とにかくES5にダウングレードしますか？ それとも、すべてのベースをカバーするためにTS出力の上にES6ポリフィルを使用する必要がある場合でもありますか？

出力に関しては、オールオアナッシングの状況です。つまり、ターゲットに基づいて、すべてがES5にトランスパイルされますか、それとも何もありません。

これが何を意味するのかわからない。 ES5をターゲットにすると、構文がES5に変換されます。 しかし、babel、tracuerなどもそうです。 あなたが言及している特定の何かがありますか？

ポリフィルをまったく使用していなかったことを覚えています。

そうではありませんが、バベル、トラキュア、その他のトランスパイラーもそうではありません。 何で運転しているのかわかりませんか？ いずれかの方法（babelまたはTS）でcore-jsポリフィルを使用する必要があります。

議論は、ES6-> ES5を変換するためのbabelまたはTS-> ES5を変換するためのTypeScriptだと思います。 どちらの方法でもES5に移行する必要があります。 TSはES6をターゲットにすることができ、必要に応じてES6ビルドを出荷することもできますが、これはES5ビルドに追加されるものです。

@photonstorm TypeScriptでは、私の知る限り、BabelのようにES5にトランスパイルする機能を選択することはできません。

私はTypeScriptを使用していて、それは素晴らしいと思います。 Pixiが最終的に採用するのを見たいです。 Googleは現在、開発者にAngularでTypeScriptを使用することを推奨しています。これは、広く採用されていることを示す良い兆候です。 複雑なコードベースの場合、Pixiでしたが、厳密な型指定によって適切に処理されます。

TypeScriptで対処する必要のある問題には、jsdocs（これを経験したことがある人はいますか？）や、 require('pixi.js')のときにsrcを使用している可能性のあるアップストリーム依存関係（このようなものが必要な人はいますか？）が含まれます。

とにかくクラスに変換する必要があるため、最初のステップとして、ES6への移行は依然として適切なオプションです。 すべての懸念に対処できることが確実になったら、TypeScriptをコードベースの最新化のもう1つの「パス」と見なすことができます。

TypeScriptでは、私の知る限り、BabelのようにES5にトランスパイルする機能を選択することはできません。

私はあなたがバベルでそれをすることができるとは思いもしませんでした。 とにかくES5をターゲットにする必要があるので、私たちにとってそれの利点がわかるかどうかはわかりません。 しかし、それは素晴らしいです！

TypeScriptで対処する必要があるいくつかの問題にはjsdocsが含まれます

https://github.com/TypeStrong/typedoc

上流-require（ 'pixi.js'）のときにsrcを使用している可能性のある依存関係（このように要求している人はいますか？）。

「main」は必要なものを指すことができ、typescriptを使用して、ビルドされたファイル（_bundle_ではない）を指すことができます。 たとえば、TSファイルはsrc/に入り、各ファイルをjs/などにトランスパイルしてから、そこにメインをポイントします。 次に、すべてをバンドルして、バンドルをdist/またはw / eに入れます。 npmパッケージはjs / tsdファイルに同梱されていますが、通常はTSソースには同梱されていません（議論の余地があります）。

とにかくクラスに変換する必要があるため、最初のステップとして、ES6への移行は依然として適切なオプションです。 すべての懸念に対処できることが確実になったら、TypeScriptをコードベースの最新化のもう1つの「パス」と見なすことができます。

👍

TypeScriptでは、私の知る限り、BabelのようにES5にトランスパイルする機能を選択することはできません。

彼らはTypeScript2.0にこの機能を追加しました： https ：//github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript＃include-built-in-type-declarations-with --- lib

通常、ターゲットとしてES5を使用しますが、ライブラリとしてES6を含め、 Symbol 、 Mapなどの型定義を設定します。

実際、 @ englercjが言ったように、使用しているコンパイラに関係なく、コードのコンパイル後にシムを含める必要があります。 たとえば、BabelにはIE9用のSymbolポリフィルが自動的に含まれていません。

私はあなたがバベルでそれをすることができるとは思いもしませんでした。 とにかくES5をターゲットにする必要があるので、私たちにとってそれの利点がわかるかどうかはわかりません。 しかし、それは素晴らしいです！

Pixiの場合、それほど便利ではありませんが、はい、Babelプリセットを選択して、トランスパイルする特定の機能のみを選択できます。 これは、ES6にビルドしたいが、ノード6、エレクトロン1などで最先端のV8機能のみをサポートしたい場合に役立ちます。

それは本当に興味深いパラドックスです。 ES6を使用してビルドします。これは、クリーンで美しく、最新のブラウザーによって非常によくサポート/内部的に最適化されているためです。 それでも、1995年のようにトランスパイルによってすべてのハードワークを破壊してください：）（そして、言語構文の変更により、これを回避することはできません）。

問題は普遍的であり、TSやPixiとは何の関係もありません。 ちょっと変わった状況になります。

@photonstorm残念なことに皮肉なことです😞ES6ビルドとES5ビルドを使用して、パッケージ化されたアプリ（electronなど）でES6ビルドを使用できるようにできれば幸いです。

ここでの議論に飛び込んでください:)人々がTSをES6にトランスパイルし、次にBabelを使用してES5にトランスパイルするのを見たことがあります。

また、（さらに...）モジュールバンドラーがありますが、これはかなり洗練されたコードを生成しているようで、複数の出力が可能であると思います。
http://rollupjs.org/ ES6 / ES2015モジュール構文からバンドルされています。これは、将来的にコードを保証したい場合に非常に便利だと思います。

Typescriptで書かれているPIXIの+1です。 私の経験から、typeはこのようなプロジェクトの構造に非常に役立ちます。 パフォーマンスを維持できれば:)

RollUpは素晴らしいです、私はそれを使うのが大好きです。 その木の揺れは真剣に賢いです。 （babelの代わりに）bubelと一緒に使用すると、本当に_本当に_高速なワークフローになります。

ここでTSが大好きなのを見るのは興味深い。 確かに1年前はそうではありませんでした：）ES2015をタイプチェックする方法があり、検討する価値があるかもしれません。

@photonstormはブーブレを見つけられませんでしたが、「ブーブレ」があります

ええええ、タイプミス。 http://buble.surge.sh/

BubleTapeは、そのための優れたテストハーネスですhttps://github.com/snuggs/buble-tape

＃2936は、メンバーがドキュメントを削除した理由ですか？ これには公開されたメンバーが1つあり、 25以上あります。

@memberofを今すぐ追加する必要がありますか、それとも適用できる魔法がありますか？

@ staff0rdまだクリーンアップ中だと思います。少し安定したら、ドキュメントのクリーンアップを検討します。 おそらく、使用しているjsdocバージョンにES6のバグがあるからです。 すぐにこれをクリーンアップできるはずです。

ES6はdevに統合されました。助けてくれたすべての人に感謝します。 よろしくお願いします！

今のところこれを閉じます。

このスレッドは、閉じられた後、最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。