問題タブ [traceur]

require を多用する既存の ecma5 JavaScript プロジェクトがあります。本番環境では、require の r.js を使用してすべてを 1 つのファイルにコンパイルします。ecma6 への移行を開始したいと考えています。最初のハードルは、既存のコードを 1 つのファイルにコンパイルして動作させることでした。

本文にテキストを入れる簡単なプロジェクトを作成しました。ここに github があります (簡単なセットアップ手順はそこにあります):

https://github.com/cjbrass/ecma6-test

dev.html は src ファイルを使用し、問題なく動作します。live.html はビルドされたファイルを使用しますが、それを機能させることができないようです。ファブリック コンパイル タスクが実行され、適切なファイルが生成されますが、javascript が機能しません。

私たちは現在 traceur を使用しており、babel も試していますが、どちらにも特別な愛着はありません。これを任意の ecma6 トランスパイラーで動作させたいだけです。

私たちの仕事のベースとなる良い例を見つけることができなかったので、私たちは暗闇の中を飛んでいるように感じ、何らかの方向性が必要です.

jspmチュートリアルに従って、jspm + SystemJS + traceur経由でES6を使用しています。

Chrome と Opera ではすべて正常に動作しますが、他のブラウザではコンソールにさまざまなエラーが表示されます。

ファイアフォックス:SyntaxError: class is a reserved identifier, uncaught exception: SyntaxError: class is a reserved identifier

角：SCRIPT1002: Syntax error, Potentially unhandled rejection [2] Syntax error

ヴィヴァルディ:Unexpected token =>

SystemJS の readmeには、IE8+ でも実行できると記載されています。

私のjspm.config.js：

そしてpackage.json：

私が理解しているように、それには多くの理由がある可能性があることを理解しているので、この状況を解決するために必死です. たぶん、誰かがそのセットアップで同様の問題に遭遇するでしょう。

私は次のプロジェクトで ES6 を使用したいと考えており、その目的のために Traceur をトランスパイラーとして使用しています。入門ガイドに記載されている方法で動作するようになりました。ただし、コンパイル オフラインページで説明されている方法で、すべてのソース ファイルを 1 つの縮小ファイルにコンパイルしたいと考えています。しかし、ネストされたディレクトリ構造に編成された複数のソース ファイルで動作させることはできません。

問題を説明するためのサンプル プロジェクトを次に示します。ルート フォルダーに index.html があり、src の下に 2 つの .js ファイルがあります。

index.html

src/one.js

src/two.js

先ほど言ったように、ブラウザーで index.html を開くと正しく動作し、Two のインスタンスがコンソールに出力されます。

しかし、これをオフラインでコンパイルしようとすると、次のエラーが発生します

ご覧のとおり、src/two.js のコンパイル中に、traceur は出力ディレクトリの下で src/one.js を探します。参照されたモジュールの検索のルートをカスタマイズできる traceur のオプションが見つかりませんでした。オプションも試しました--dirが、失敗します。

助言がありますか？

Play フレームワーク (sbt/scala) プロジェクトでコードをトランスパイルするために SbtWeb traceur プラグインを使用しています。これにより、 で ES5 リソースが得られます/main.js。次に、結果を醜くしたいと思い/main.min.jsます。uglify プラグインも追加してから、次のことを試みました。

pipelineStages := Seq(traceur, uglify)

残念ながら、これはtraceurTaskKey と同様にコンパイルされませんが、正しい型ではありません。これどうやってするの？

編集：これを行うための正しい方法は次のようになります。

ただし、Javascript に構文エラーがあるという醜いエラーが表示されるようになりました。これは、uglify が traceur の ES5 出力ではなく、元の ES6 ソースを処理しようとしているためです。これを機能させる方法はまだわかりません。

次の例で何が起こるかについて頭を悩ませようとしています。

ループ内のreturnステートメントfor...ofは、の出力を表すオブザーバーからサブスクライブを解除しProject#barますか?

es6ify (traceur を使用) で browserify を使用しています。React を使用しており、jsx ファイルがあります。
オプションを es6ifyに渡し{ jsx: true }ますが、browserify が jsx ファイルを見るたびに例外が発生し続けます。バベルの作品を使用しています。

traceur で jsx を有効にするために他にやらなければならないことはありますか?

es6ify の前に reactify を使用しようとしましたが、importやのような es6 構文に文句を言いますexport。

Traceur を使用して、ES6 でいくつかのプロジェクトを開発しています。私の HTML ページには、ローカルの Traceur ソースが含まれています。

その後、HTMLにモジュールがある場合：

次に、Traceur がそのモジュールをロードしてコンパイルすると、すべてがうまく機能します。

別の ES6 モジュール内から ES6 モジュールをプログラムでページに追加したいと考えています (理由はやや複雑です)。これが私の最初の試みでした：

残念ながら、Traceur はスクリプト タグが追加されるたびにページを監視しないため、これは機能しません。

Traceur でスクリプトをコンパイルして実行するにはどうすればよいですか? 「traceur」または「$traceurRuntime」で何かを呼び出す必要があると思いますが、そのための適切なオンライン ドキュメント ソースが見つかりません。

systemjs で es6 モジュールをインポートするために .js 拡張子を使用する必要があるのはなぜですか? 例えば：

エラーメッセージ:

GET http://local-host/projects/es6/src/modules 404 (見つかりません)Z @ system.js:4(匿名関数) @ system.js:4(匿名関数) @ system.js:4(匿名)関数) @ system.js:5(匿名関数) @ system.js:5(匿名関数) @ system.js:5(匿名関数) @ system.js:5(匿名関数) @ system.js:5(匿名関数) function) @ system.js:5(anonymous function) @ system.js:4 system.js:4 Uncaught (in promise) エラー: エラー: XHR エラー (404 Not Found) loading http://local-host/projects/ es6/src/モジュール(…)

これは、system.js を使用した私の HTML です。

私が見逃したアイデアはありますか？