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

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

本文关键字：加载 AMD 模块 jspm 何使用 system js      更新时间：2023-09-26

在使用es6、JSPM和system.js的Aurelia项目中，我很难使用本地AMD模块。我希望有人能帮助我配置我的项目，使我能够导入/加载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 );
    }
  };
});

当我尝试将此模块导入/加载到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"
    }
}

有人知道我为什么会遇到我看到的错误，以及如何正确加载我的模块吗？我感谢你能提供的任何帮助/见解。

更新

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

只需将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';

相关文章：