在 Aurelia 中使用 AMD/Require 个模块

Question

我们正在考虑将我们的 Durandal 应用程序更新到 Aurelia（最终）。我们现在最关心的是代码重用。我们将为视图逻辑编写 TypeScript，但是有很多复杂的客户端媒体访问（webRTC 东西）需要花费大量时间才能作为原始 JavaScript AMD 模块工作。

我看到了关于使用 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;
});

从 aurelia 视图模型中调用 mediaDeviceScanner.scanDevices 的快乐路径是什么？

在我的 Durandal 虚拟机中，我有这个：

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

在我评估 "framework shift" 成本之前，我想了解 "reuse costs" 会是什么样的。

Answer 1

关于这个话题有一个老问题。它本质上归结为您正在使用哪个装载机。 Aurelia CLI 默认使用 requirejs 但最近更新以支持 SystemJS。如所引用的问题中所述，这样就可以为现有代码创建包装器。包装器可以非常薄，甚至可以通用化以节省大量样板文件

--编辑-- 出于兴趣，我刚刚使用基于 SystemJS 的新 CLI 项目快速尝试了它。

搭建完脚手架后，我将您的示例模块放在 scripts/amd/media-device-scanner.js
删除了记录器依赖项，因为它没有在您的示例中提供
转到 src/app.js 并在构造函数中添加此代码：

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

仍然很有魅力 ;)

在 Aurelia 中使用 AMD/Require 个模块

Using AMD/Require modules with Aurelia

javascript

durandal

aurelia