問題タブ [systemjs]

jspm/SystemJS を使用して jQuery プラグイン (つまりhttps://github.com/Mottie/Keyboard ) をインポートしようとしています。

最初に、次のコマンドを入力するだけでモジュールをインストールしました。

次に、jQuery をインポートした直後に、コードにライブラリをインポートする行を追加しました。

ただし、コードを実行すると、次のエラーが発生しました。

エラーをグーグルで検索しても、解決策は得られませんでした。少なくとも、私が理解できるものではありませんでした。:)

よろしくお願いします...

別の Web アプリケーションで活用したい、純粋な ES6 で記述されたモジュールがあります。モジュールのエントリ ポイントは main.js で、以下が含まれます。

main.js

systemJS を使用して this をインポートするmain.jsと、これらの依存関係をモジュールではなく、Web アプリケーションに対してローカルに解決しようとします。

GET http://localhost:9000/dist/a.js 404 (見つかりません)

相対動的ロードは既にサポートされているようですが、関数に追加の関数を渡す必要がありますがSystem.import、これは使用していません。ES6 構文を使用しています。

これを行う方法の例やベストプラクティスはありますか? よろしくお願いします。

私は初めてjspmを使用していますが、すでに問題が発生しています。

当社のプライベート npm レジストリに存在する独自のスクリプトを「シム」する方法を理解する必要があります。

パッケージ：widget

• プライベート npm レジストリに常駐
• CommonJS、UMD/AMD モジュールではありません
• lodashおよびに依存しjqueryますが、グローバル スコープに存在することを前提としています
• Widgetグローバルスコープで公開

これが（架空の）コードです

app.js

index.html

このページをローカル Web サーバーで実行すると、次のエラーが表示されます。

キャッチされていない参照: _ は定義されていません

に「シム」を提供するにはどうすればよいwidgetですか?

次の方法で呼び出すことにより、es6モジュールを動的に再クエリすることに固執しています：

es6-module-loaderブラウザでのbabelランタイムコンパイルでうまく機能しますが、 ES5（本番用に）構文にプリコンパイルしたい場合は、コードで式を渡し、実質的にそのままにして、同等のものSystem.importに置き換えるだけです。System.importSystem['import']

私はgulp-babelbabelnpmパッケージを試しました。そのため、ブラウザーで開くと、予想されるモジュールの読み込みエラーが発生します。AMDコードをの構文にトランスパイルするにはどうすればよいですかES5。あなたの助けを願っています。

最終的に Angular 2 に移行するかなり大きな angularjs アプリケーションがあります。

将来の移行を容易にするために、今できることは何でも実行したいと考えています。

コントローラーとサービスを typescript に変換し、ファイルをコンポーネント指向のフォルダー構造に整理しています。

私が本当にできるようにしたいのは、es6 スタイルのモジュールの読み込みを使用することです。

system.js が読み込み機能を提供できるようになり、typescript 1.5 で es6 インポート構文を使用できることを理解しました。

私の質問は、2 つを一緒に使用するにはどうすればよいですか? typescript から es6 モジュールを出力し、生成されたコードで system.js モジュールの読み込みを使用する必要がありますか? または、他の手順が必要ですか?

Phantom でいくつかのテストを行おうとしていますが、Aurelia/SystemJS は Phantom で壊れているようです。

私は自分のアプリと Aurelia の連絡先アプリの例でテストしましたが、わずかに異なります。キャプチャした出力をここにリストします。

アプリの連絡先:

私のアプリケーション：

FWIW これらは両方とも Chrome/FF で正常に動作し、OS X 10.10 で PhantomJS 1.9.8 を実行しています

また、これらをテストしてコンソールから出力するために使用しているファントム スクリプトを次に示します。

連絡先アプリを実行するには (最初の例)、次を実行します。

nodeこれは、がインストールされていることを前提としていjspmますgulp。次に、上記の phantomjs スクリプトを実行できます。

何か案は？

現時点では、このビデオ チュートリアルに従っていますが、単純な HelloWorld アプリにこだわっています。時間位置12m:31sは、私が立ち往生している場所であり、表示されるはずですが、表示HelloWorldされません。

アプリは SystemJs、React、JSX を使用しています。

アプリを作成するには、端末で次の手順を実行します (node と jspm が必要です)。

• npm init(enter全員に)
• jspm init( enterbabel を使用する場合を除き、ほぼすべてのユーザーに)
• jspm install fetch=npm:whatwg-fetch
• jspm install react
• アプリのサブフォルダーを作成するmain.jsコードを作成してそこにコピーする
• index.htmlルートディレクトリに作成します。
• 次に、サーブで実行します

問題は私のローカルサーバーだと思います。nodejs で実行していhttp-serverますが、JSX は JS にトランスパイルされていないと思います。また、上記のserveサーバーが機能していません。

ブラウザ コンソールに次のエラー メッセージが表示されます。

どうすれば機能しますか？

これが私のコードです。まさにビデオのコードです（jsファイルが追加されていないため、ここでは実行されません）：

systemjs のトランスパイラーとしてbabelを使用しているときに、chrome コンソールでこのエラーが発生しました。

babelJSXがロードされていないため、トランスパイルが失敗したのではないかと疑っています。まさにchrome の network-tab に (babel-browser) スタックの呼び出しがありません。browser.min.js

ここでコードを見ることができます。

Marionette を使用して構築した Web サイトを移植するために、atom/electron で JSPM を使用し始めました。

Marionette モジュールを中心にすべてのアプリを作成しているため、アプリを起動する前にすべての JavasSript ファイルをロードしたいと考えています。

の非同期の性質に問題がありSystem.import()ます。System.import が App コードのロードを完了した後、どのようにスクリプトをロードしますか?

本番環境では、すべてのファイルを単一の js モジュールに連結し、System.import を使用してそのモジュールをロードするため、これで問題はありませんが、デバッグするのは悪夢になるため、ファイルを個別にロードすることをお勧めします。

何かご意見は？ありがとう！