Как правильно загрузить локальные модули AMD с помощью jspm/system.js

Мне очень трудно использовать локальные модули AMD в проекте Aurelia, который использует es6, JSPM и system.js. Я надеюсь, что кто-нибудь поможет мне настроить мой проект, чтобы я мог импортировать/загружать модули 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 );
});

or 

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"
    }
}

Есть ли у кого-нибудь идеи о том, почему я сталкиваюсь с ошибкой, которую вижу, и как правильно загружать мои модули? Я ценю любую помощь / понимание, которое вы можете предложить.

ОБНОВИТЬ

Наконец-то я понял, что основная проблема здесь заключается в том, что я пытаюсь использовать существующие модули AMD в проекте Aurelia и Aurelia, а сборка Aurelia gulp по умолчанию предполагает, что весь код написан на ES6, а не в смеси с AMD. Вот почему у меня проблемы. Vanilla jspm/system.js поддерживает различные форматы модулей, но Aurelia не работает из коробки.


javascript systemjs jspm aurelia
person jbgarr    schedule 28.12.2015    source источник
comment
Где такое предположение делается в Аурелии? Как определить, что это не SystemJS или как транспилирует Babel?   -  person Andrew    schedule 11.03.2016
comment
Мне тоже тяжело с этим. Я пытаюсь импортировать эту библиотеку (savvior.org), которая должна быть модулем AMD, но я не могу не заставить его работать. Я установил его через jspm install npm:savvior, но я могу правильно импортировать его в свою модель представления.   -  person empz    schedule 14.03.2016
comment
@Andrew Предположение делается в файлах конфигурации gulp скелетного приложения Aurelia. Я не уверен, что что-то изменилось с версии, которую я использовал, но в файле build/tasks/build.js gulp преобразует все файлы в папке src в модули AMD через Babel. Я тестировал вещи с SystemJS, и он поддерживает загрузку разных типов модулей рядом. Проблема заключается в том, что вы пытаетесь транспилировать модуль, который уже находится в формате AMD. Вот почему решение состояло в том, чтобы просто поместить модули AMD за пределы папки src, чтобы Gulp/Babel не пытались их транспилировать.   -  person jbgarr    schedule 14.03.2016
comment
@emzero Вы уверены, что не пытаетесь транспилировать библиотеку, которую пытаетесь использовать? Убедитесь, что он не находится в папке/пути, на котором Gulp выполняет задачу транспиляции.   -  person jbgarr    schedule 14.03.2016

Ответы (1)


arrow_upward
4
arrow_downward

Просто поместите свои модули 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';

person valichek    schedule 05.01.2016
comment
Потрясающе, спасибо за это! Я думал, что мне придется перенастроить задачу сборки gulp. Это намного проще. - person jbgarr; 05.01.2016