无法使用 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
}

我还设置了一个基本的 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 我不完全确定这一切是否正确，但我从骨架插件中获取了一些，它似乎运行良好。

无论如何，我遇到的问题是，在我安装插件 (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/ 部分？我在index.js 中配置了我的globalResources，但它没有说我有一个index 文件夹。

我做错了什么？

额外问题：转换我的 ES6 插件代码以便其他人可以使用它的最低要求是多少？我的 babel 配置看起来正确吗？

Answer 1

在 aurelia.json 中引用你的插件怎么样，像这样：

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

Answer 2

我完全不知道为什么，但为了解决这个问题，我实际上不得不将我的自定义元素移动到 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 提到的 babel 插件，但仅此一项并不能解开虚构路径的奥秘。

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

Answer 3

更新：

编辑：感谢您澄清为什么您不想使用整个骨架插件包。

关注您最初的问题：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：

一般来说，需要一个 main/entry 点，插件的 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

您很快就会看到的第一个新功能是帮助您进行第 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