問題タブ [es6-module-loader]

私は次のプロジェクトで 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が、失敗します。

助言がありますか？

バベルで反応。imports と module.exports と混同しています。ES6コードをES5に変換するとき、バベルはインポートとエクスポートをそれぞれrequireとmodule.exportsに変換すると思います。

あるモジュールから関数をエクスポートし、その関数を別のモジュールにインポートすると、コードは正常に実行されます。しかし、module.exports を使用して関数をエクスポートし、「import」を使用してインポートすると、実行時に関数ではないというエラーがスローされます。

私は例を調理しました。

プリセットes2015でbabelを使用してトランスコンパイルしました。これにより、次のエラーが表示されます

キャッチされていない TypeError: (0 , _animals.Tiger) は関数ではありません

しかし、 を削除して にmodule.exports = Tiger;置き換えると、export { Tiger };正常に動作します。

ここで何が欠けていますか??

編集: モジュールバンドラーとして browserify を使用しています。

babel によってトランスパイルされたインポート/エクスポート es6 モジュールの単純なモジュール ロードを探しています。

• ブラウザーで使用するためのインポート/エクスポート モジュールを含む es6 ソース ファイルから開始します。
• これを、babel を使用して es5 に静的にトランスパイルし、config で最もロードしやすいモジュール変換 (amd、commonjs、systemjs) を指定します。
• モジュールやその他の複雑なワークフローに npm を使用しないでください。ただbabelトランスパイルされたファイル。
• これらの es5 ファイルをモジュールと共に<script>ロードし、babel トランスパイルが es6 モジュールのロードに使用したライブラリをロードします。

browserify、webpack、jspmなどを避けたいのですが、es6-> es5を単純にトランスパイルし、ライブラリbabelコンパイルモジュールを使用するだけです。同梱はいらないです。ここでは、単純で基本的な JavaScript について説明します。

これは可能ですか？もしそうなら、どのように？

私が見たすべてのモジュール読み込みの議論は、複雑なワークフローを使用していて、私には不必要だと思われます。一連のファイルで es6 のインポート/エクスポートを単純に使用し、それらをブラウザでできるだけ単純に使用したいと考えています。

私は自分のアプリケーションでこれをやっています

これはbootstrap.js

経由でバンドルを作成しましたjspm bundle lib/bootstrap.js outfile.js。

System.import('outfile.js')解決された Promiseを試してみるとm、空のオブジェクトしかありません。ここで何が間違っていますか？

フロントエンド コードのロードとバンドルに JSPM と SystemJS を使用しています。私が疑問に思っているのは、バンドルされたファイルをバージョン管理する必要があるということです.

この記事から: https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

と書かれています

新しい標準は、既存の CommonJS および AMD モジュールと相互運用できるように設計されています。

そしてより正確には

すべての CommonJS および AMD モジュールは、デフォルトのエクスポートを持つものとして ES6 に提示されます

本当にそうである場合、必要なのは ES6 ポリフィルだけであり、他に何も使用する必要はありません。

ただし、たとえば、この ES6 Polyfill : https://github.com/ModuleLoader/es6-module-loaderは、ES6 からの CommonJS/AMD モジュールのロードを許可していないようですが、SystemJS のようにその上に構築されたソリューションのみが許可されています。

質問は次のとおりです。公式の ES6 標準が、CommonJS/AMD をサポートする必要があると述べているのは本当ですか (デフォルトのエクスポートがあると提示されることによって) ?

もしそうなら、そう言っているESCMA仕様への参照はありますか? そして、それがポリフィルの上に構築されたソリューションではなく、ポリフィル自体の機能ではないのはなぜですか?

ノード プロジェクトで TypeScript を使用しようとしていますが、いくつか問題があります。

これは私のindex.tsファイルです：

私は走っています：

私の出力はindex.jsです：

これはどこ["default"]から来たのですか？私のコードが正しく実行されないようにしています:

私が理解している限り、「デフォルト」のブラケットなしでコードを取得する必要があり、正常に機能していたはずです-ブラケットを削除しようとしたところ、機能しました。

ここで何が欠けていますか？