Невозможно использовать плагин Aurelia

Question

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

Я взглянул на skeleton plugin и заметил, что у него есть 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 
} 

Я также создал базовый сценарий НПМ, который работает столпотворение на код и прилипает его в 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" 
}, 

ТВН Я не совсем уверен, что это все правильно, но я взял некоторые из них из плагина скелета, и, похоже, он работает нормально.

Во всяком случае, проблема у меня в том, что после установки плагина (npm install --save-dev powerbuoy/AureliaGoogleMaps), добавьте его к моему aurelia.json в 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 в index.js, но нигде не говорит, что у меня есть папка index.

Что я делаю неправильно?

Вопрос с бонусом: Каков минимальный размер, необходимый для перевода моего ES6-кода, чтобы другие могли его использовать? Является ли конфигурация моего бабуля правильной?

Answer 1

У меня нет абсолютно никакой идеи почему, но для того, чтобы решить эту проблему, мне действительно пришлось переместить мои пользовательские элементы внутри папки 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.jsmain.js Мне нужно было поместить мой globalResources в папку с именем main/.

Answer 2

насчет ссылки плагин в aurelia.json, как это:

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

Answer 3

Update:

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

Сфокусированный на вашем исходном вопросе: 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/.

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

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

миграции довольно легко в вашем случае:

• Скачать каркасно-плагин
• Скопируйте классы + index.js в src/
• npm install
• ... ждать его ...
• gulp build
• проверка dist/ Папка
• большую часть вашей боли должна исчезнуть :)

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

1. Главный index.js/plugin-name.js:

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

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

плагина 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 пользовательские элементы, вы можете сделать их ava с использованием globalResources.
• Пользовательский стиль css потребует немного дополнительной конфигурации в конфигурации комплектации (см. Ниже).

3. Используя плагин с Aurelia-кли: Documentation

Одним из первых новых функций, которые вы увидите в ближайшее время это команда, чтобы помочь вам с 3-конфигурации модуля стороной. Команда проверит ранее установленный пакет 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