如何使用 jspm/system.js 正确加载本地 AMD 模块

Question

我很难在使用 es6、JSPM 和 system.js 的 Aurelia 项目中使用本地 AMD 模块。我希望有人可以帮助我配置我的项目，使我能够 import/load 我的 AMD 模块并在我的项目中使用它们。本地 AMD 样式模块的格式类似于以下内容：

define
(['require',
'lib/alerts/STARTSTOP',
'lib/alerts/STOPPED',
...
],
function( require, STARTSTOP, STOPPED, ... ) {
  return {
    alert: function( data ) {
      var type = data.type;
      var ev   = data.event;
      var cls  = require( 'lib/alerts/' + ev );
      return new cls( data );
    }
  };
});

当我尝试将此模块 import/load 转换为 es6 模块时，我运行出现以下错误：Uncaught TypeError: Unexpected anonymous AMD define.。尝试通过以下任一方式加载模块时出现此错误：

System.import('lib/alerts/AlertFactory').then( (m) => {
  console.log( m );
});

或

import AlertFactory from 'lib/alerts/AlertFactory.js';

我还确保将以下脚本添加到我的 index.html:

<script>
    window.define = System.amdDefine;
    window.require = window.requirejs = System.amdRequire;
</script>

除了上述之外，我还在我的 config.js 文件中添加了元格式属性，但这似乎也没有帮助。

meta: {
    ...
    "lib/alerts/*.js": {
      "format": "amd"
    }
}

有人知道我为什么运行遇到我看到的错误以及如何正确加载我的模块吗？感谢您提供的任何 help/insight。

更新

我终于意识到这里的主要问题是我试图在 Aurelia 项目中使用现有的 AMD 模块，默认的 Aurelia gulp 构建假设所有代码都是用 ES6 编写的，而不是混合的与AMD。这就是我遇到问题的原因。 Vanilla jspm/system.js 处理模块格式的混合，但 Aurelia 不是开箱即用的。

Answer 1

只需将您的 AMD 模块从 src 中取出，这样 babel 就无法转换它。这是我用来导入 jquery 模块的工作解决方案：

首先，我在项目根目录中有 local_packages 文件夹，并且我有 jquery 模块 local_packages/somelib/js/mymodule.js

然后在config.js

paths: {
  ...
  "local/*": "local_packages/*",
}

map: {
  ...
  "somelib": "local/somelib",
  "somelib1": "/local_packages/somelib1",
}

最后我的导入看起来像：import 'somelib/js/mymodule';

如何使用 jspm/system.js 正确加载本地 AMD 模块

How to properly load local AMD modules with jspm/system.js

javascript

systemjs

aurelia

jspm

更新