2016-06-25 4 views
15

ReactでES6を使用するには、Babelやその他のトランスパイライラーが本当に必要ですか?ReactでES6を使うには、本当にBabelや他の蒸散器が必要ですか?

私は私の現在のブラウザクローム(最新の安定版は)ほぼすべてのES6の機能をサポートしていますように https://kangax.github.io/compat-table/es6/

は思えチャートを見ていた

...

どのように私がすべき私は、バベルなしES6を使用できる場合それ?

+0

電子または明示的にクロムをターゲットにする場合。 es6で直接作業できます。あなたはまだモジュールローダーが必要です。 –

+0

私が見てきた最も良い説明なぜ多くの人がすぐにすべてのもののためにBabelを使い始めるべきであるのか:http://codemix.com/blog/why-babel-matters – odigity

+0

現代のブラウザーを反応させようとしているのであれば、 JSXを蒸散させる大規模なプレイヤーは多くのブラウザーの下位互換性を保証する必要がありますが、ターゲットユーザーに応じて、開発者の時間と費用を節約し、最新のブラウザー用のプログラムのみを保存できます。ネイティブES6は、トランスビルドされたコードよりも高速になります。 ES6の使い方については、移転する前と同じように使用してください。 – dprogramz

答えて

12

あなたがしたい場合は、次の

  • require()またはimport ...で)使用modules
  • 使用JSX
  • ブラウザ
  • 使用、より高度な機能(async/await)、まだ中にいくつかの多くをサポート提案(decorators,class properties ..)

誰もがあなたのコードを実行できるようにするには、Babelを使用する必要があります。

+0

私は何を疑問に思っていたのですか? – user3463521

+2

ES6はモジュール(インポート)をサポートしていませんか? – lonelyloner

+3

JSXとネイティブES6の機能を比較するのは間違いです。お使いのブラウザがES6をサポートしている場合は、モジュール、必要なもの、非同期なものなどを実行できます。あなたのアンサーが、トランスペラレータが必要な誤った情報をES6に送り込んでいるように感じます。 – dprogramz

3

あなたがリンクしているチャートの互換性を得ることができます。しかし、あなたがJSXを使いたいのであれば、バベルを使ってそれを分かりやすくしたいと考えています。

+1

transform-react-jsx babelプラグインがあり、JSXのみをReact.createElement()に変換し、コードはそのまま。これはブラウザでReactでES6を使用する方法になります。しかし、はいまだそのバベルのプラグイン:) – Oleh

+0

これは正しいanwserする必要があります。 – dprogramz

8

ES6 W/Oバーベルを絶対に使用できます。主要なブラウザはすべて、大部分の機能をネイティブでサポートしています(CanIUse.comを参照)。実際、サポートされていない主な機能はモジュールのインポート/エクスポートだけです。

これらの場合、HTML内のスクリプトタグを使用して正しい順序でモジュールを手動でインポートする必要があります。クライアント側のみ(ノードにはモジュールが必要)。

しかし、これはデベロッパーにとっては問題ないことに注意してください。しかし、実際にはすべてのJSを1つのモジュールに連結して最小化する必要があるため、Babel/WebpackまたはBabel/Browserifyスタイルツールチェーンを使用すると、アップ。

+1

何について?私はすでにそれを試して、それはyour.jsでインポート/エクスポートを使用することができ、ブラウザはインポート/エクスポートモジュールを実行します。 – Oleh

+1

絶対に、2017年10月現在、GoogleとFirefoxは、 'filename.js'の 'import {moduleName}'に基づいた標準のネイティブ使用をサポートしています;構文。 ECMAScriptを使った美しいことは、その進化の速さです。シムと蒸散装置は借用されていますが、例外的に、展開可能な最終的なアプリケーションが生成されています。 –

関連する問題