Блог

Я пытаюсь переместить один из моих пользовательских элементов в плагин, чтобы я мог повторно использовать его в разных проектах.

Я взглянул на плагин skeleton и заметил, что у него есть a src/index.js , который возвращает конфигурацию со всеми пользовательскими элементами, определенными как globalResources .

Итак, я попробовал то же самое, и у меня в основном есть:

src/index.js

 export function configure (config) {
    config.globalResources([
        './google-map',
        './google-map-location-picker',
        './google-map-autocomplete'
    ]);
}
  

И тогда у меня есть каждый из моих пользовательских элементов рядом с index.js , например:

google-map.js

 import {inject, bindable, bindingMode, inlineView} from 'aurelia-framework';

@inlineView(`
    <template>
        <div class="google-map"></div>
    </template>
`)
@inject(Element)
export class GoogleMapCustomElement {
    // All the Custom Element code here
}
  

Я также настроил базовый скрипт npm, который запускает babel в коде и вставляет его dist/ :

 "main": "dist/index.js",
"babel": {
  "sourceMap": true,
  "moduleIds": false,
  "comments": false,
  "compact": false,
  "code": true,
  "presets": [ "es2015-loose", "stage-1"],
  "plugins": [
    "syntax-flow",
    "transform-decorators-legacy",
    "transform-flow-strip-types"
  ]
},
"scripts": {
  "build": "babel src -d dist"
},
  

Tbh Я не совсем уверен, что все правильно, но я взял часть этого из плагина skeleton, и, похоже, он работает нормально.

В любом случае, проблема, с которой я сталкиваюсь, заключается в том, что после того, как я установлю плагин ( npm install --save-dev powerbuoy/AureliaGoogleMaps ), добавлю его в свой aurelia.json in build.bundles[vendor-bundle.js].dependencies и скажу aurelia использовать его в main.js ( .use.plugin('aurelia-google-maps') ), я получаю:

GET http://localhost:9000/node_modules/aurelia-google-maps/dist/index/google-map.js (404)

Итак, мой вопрос в том, откуда он берет dist/index/ часть?? Я настраиваю свой globalResources in index.js , но нигде не говорится, что у меня есть index папка.

Что я делаю не так?

Бонусный вопрос: какой минимальный минимум требуется для переноса моего кода плагина ES6, чтобы другие могли его использовать? Правильно ли выглядит моя конфигурация babel?

Как насчет ссылки на ваш плагин в файле aurelia.json, например:

 {
  "name": "aurelia-google-maps",
  "path": "../node_modules/aurelia-google-maps/dist",
  "main": "index"
}
  

Я понятия не имею, почему, но для решения этой проблемы мне действительно пришлось переместить мои пользовательские элементы внутри index/ папки.

Итак, теперь у меня есть это:

 - index.js
- index/
    - custom-element-one.js
    - custom-element-two.js
  

И мой index.js все еще выглядит так:

 export function configure (config) {
    config.globalResources([
        './custom-element-one',
        './custom-element-two'
    ]);
}
  

Откуда он index/ берется, я думаю, я никогда не узнаю, но это работает, по крайней мере.

Мне тоже нужен был плагин babel, о котором упоминал Мартон, но это само по себе не решило загадку составленного пути.

Редактировать: чтобы уточнить немного дальше, если я назову свою основную точку входа, что-то другое, кроме index.js папки, тоже нуждается в этом имени. Например, если бы я переименовал index.js main.js , мне нужно было бы поместить мой globalResources внутри папки с именем main/ .

Обновить:

Редактировать: спасибо за разъяснение, почему вы не хотите использовать весь пакет плагинов-скелетов.

Фокусируясь на вашем первоначальном вопросе: aurelia-cli использует RequireJS (формат AMD) для загрузки зависимостей. Возможно, ваш текущий вывод имеет другой формат.

Добавьте transform-es2015-modules-amd в babel.plugins, чтобы обеспечить вывод в стиле AMD, чтобы он был совместим с RequireJS и, следовательно, с aurelia-cli.

 "babel": {
"sourceMap": true,
"moduleIds": false,
"comments": false,
"compact": false,
"code": true,
"presets": [ "es2015-loose", "stage-1"],
"plugins": [
        "syntax-flow",
        "transform-decorators-legacy",
        "transform-flow-strip-types",
        "transform-es2015-modules-amd"
    ]
}
  

Оригинал:

Есть несколько сообщений в блоге о создании плагина, я начал с этого: http://patrickwalters.net/making-out-first-plugin / .

Конечно, с тех пор произошло много изменений, но это полезная информация, и большая ее часть по-прежнему актуальна.

Я бы рекомендовал использовать плагин-скелет в качестве структуры проекта. Он предоставляет вам рабочий набор готовых форматов gulp, babel и нескольких выходных форматов. При таком подходе доступность вашего плагина не будет ограничена только JSPM или CLI, но у каждого будет возможность установить его независимо от их систем сборки.

Миграция в вашем случае довольно проста:

• Скачать skeleton-plugin
• Скопируйте ваши классы index.js в src/
• npm install
• … дождитесь этого…
• gulp build
• проверить dist/ папку
• теперь большая часть вашей боли должна исчезнуть 🙂

Вот некоторые подробности, основанные на моих наблюдениях / опыте.

1. Основной index.js/plugin-name.js :

В общем случае требуется основная / точка входа, где размещается метод configure() плагина. Он служит отправной точкой при его использовании в приложении Aurelia. Этот файл может иметь любое имя, обычно это index.js или plugin-name.js (например aurelia-google-maps.js ), чтобы другим разработчикам было ясно, что должно быть включено в пакет. Установите ту же точку входа и в package.json.

В дополнение к globalResources вы можете реализовать функцию обратного вызова, чтобы разрешить переопределение конфигурации. Это можно вызвать в приложении, которое будет использовать плагин. Пример решения

Плагины index.js

 export * from './some-element';

export function configure(config, callback) {
    // default apiKey
    let pluginConfig = Container.instance.get(CustomConfigClass);
    pluginConfig.apiKey = '01010101';

    // here comes an override
    if (callback) {
        callback(pluginConfig);
    }

    ...

    config.globalResources(
        './some-element'
    );  
}
  

Ваше приложение main.js

 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-google-maps', (pluginConfig) => {
        // custom apiKey
        pluginConfig.apiKey = '12345678';
    });

  aurelia.start().then(a => a.setRoot());
}
  

2. Ресурсы HTML и CSS:

• Если у вас есть только пользовательские элементы html, вы можете сделать их доступными с помощью globalResources .
• Пользовательский стиль css потребует немного дополнительной настройки в конфигурации пакета (см. Ниже).

3. Использование плагина с aurelia-cli: Документация

Одна из первых новых функций, которые вы скоро увидите, — это команда, которая поможет вам настроить модуль 3rd party. Команда проверит ранее установленный npm-пакет и предоставит вам рекомендации по настройке, автоматизируя процесс, если вы хотите.

Пока мы с нетерпением ждем этого момента, давайте отредактируем aurelia.json :

• Настройте зависимости плагинов. Если есть какие-либо внешние библиотеки (например, Bootstrap), то они должны быть включены перед вашим плагином.
• Включите свой плагин:

 ...
{
    "name": "plugin-name",
    "path": "../node_modules/plugin-name/dist/amd",
    "main": "plugin-name",
    "resources": ["**/*.html", "**/*.css"]  // if there is any
},
...
  

Теперь ваш плагин готов включить его, main.js как показано в разделе 1 ..

Я надеюсь, вам не надоело читать слово «плагин» так много (21!) раз. : D