AureliaでAMD/Requireモジュールを使用する

Question

DurandalアプリをAurelia（最終的に）にアップデートしようとしています。今私たちの最大の関心事はコードの再利用です。我々は、ビューロジックのためにTypeScriptを書いていきますが、生のJavaScript AMDモジュールとして働くのに多くの時間を費やした、クライアント側のメディアアクセス（webRTCのもの）がたくさんあります。

AMD ViewModelsの使用に関する質問があります。私は、新しいaureliaビューモデル内でAMDモジュールを使用することを求めています。

簡単な例として、私はmediaDeviceScanner.jsモジュールを持っている：

define(["modules/logger"], function (logger) { 
    'use strict'; 
    const mediaDeviceScanner = {}; 

    mediaDeviceScanner.scanDevices = function() { 
     return navigator.mediaDevices.getUserMedia({video:true}).then(function(stream) { 
      return stream; 
     }).then(function(stream) { 
      return navigator.mediaDevices.enumerateDevices().then(function (availableDevices) { 
       const mediaDevices = []; 
       for (let i = 0; i < availableDevices.length; ++i) { 
        const deviceCandidate = availableDevices[i]; 
        if ((deviceCandidate.kind === "videoinput") && deviceCandidate.deviceId != "default" && deviceCandidate.deviceId != "communications") { 
         mediaDevices.push({ label: deviceCandidate.label, kind: (deviceCandidate.kind == "videoinput" ? "Camera " : "Microphone ") + (mediaDevices.length + 1), id: deviceCandidate.deviceId }); 
        } 
       } 
       return mediaDevices; 
      }).catch(function (error) { 
       logger.log(error, logger.logLevels.warning, logger.features.webcam, logger.features.webcam); 
      }); 
     }) 
    } 

    return mediaDeviceScanner; 
}); 

アウレリアののviewmodel内からmediaDeviceScanner.scanDevicesを呼び出すことに幸せなパスとは何ですか？私のデュランダルVMで

が、私はこれは持っている：

define(["amd/mediaDevices/mediaDeviceScanner"],function(mediaDeviceScanner){ 
    mediaDeviceScanner.scanDevices().then(function(devices){alert('woot')}); 
}); 

私は「再利用費」の種類のゲージを取得したいのですが、私は「フレームワークシフト」のコストを評価する前に存在します。

Answer 1

このトピックに関する古い質問があります。 Using AMD module as an Aurelia ViewModel 本質的には、使用しているローダーに依存します。 Aurelia CLIはデフォルトでrequirejsを使用しますが、最近SystemJSをサポートするためのアップデートを入手しました。これにより、参照されている質問に記載されているように、既存のコード用のラッパーを作成することができます。ラッパーは、非常に薄く、多分私はちょうどすぐにSystemJSに基づいて、新しいCLIのプロジェクトでそれを試してみた関心のうち定型

--EDIT-- の多くを保存するために一般化することができます。 ：そのsrc/app.jsにあなたの例

ゴーで提供し、コンストラクタ内でこのコードを追加していないので、私は、削除scripts/amd/media-device-scanner.js

にロガーの依存関係をあなたの例のモジュールを配置した足場後

1. System.import('../scripts/amd/media-device-scanner.js').then((result) => { result.scanDevices(); }

   まだ魔法のように動作します。）