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旁边，例如：

谷歌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"
},

我不完全确定这一切都是正确的但是我从骨架插件中拿走了一些它似乎运行良好。

无论如何，我遇到的问题是，在我安装插件（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插件代码以便其他人可以使用它所需的最低要求是什么？我的babel配置看起来是否正确？

Answer 1

如何在aurelia.json中引用您的插件，如下所示：

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

Answer 2

<强>更新

编辑：感谢您澄清为什么不想使用整个skeleton-plugin包。

关注原始问题：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，但无论其构建系统如何，每个人都可以安装它。

在您的情况下，迁移相当容易：

下载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，您还可以实现回调函数以允许配置覆盖。这可以在应用程序中调用，该应用程序将使用该插件。 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自定义元素，则可以使用globalResources。
自定义css样式在捆绑配置中需要一些额外的配置（见下文）。

第3。将该插件与aurelia-cli一起使用：Documentation

您很快就会看到的第一个新功能之一是帮助您进行第三方模块配置的命令。该命令将检查以前安装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

Answer 3

我完全不知道为什么，但为了解决这个问题，我实际上必须将我的自定义元素移到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/开始我想我永远不会知道，但这至少可以起作用。

我确实需要提到Marton插件的Marton，但仅凭这一点并没有解决制作路径的神秘面纱。

编辑：为了进一步说明，如果我将主要入口点命名为index.js之外的其他内容，则该文件夹也需要该名称。例如，如果我要重命名index.js main.js，我需要将globalResources放在名为main/的文件夹中。

无法使用Aurelia插件

3 个答案: