无法使用Aurelia插件

我正在尝试将我的一个自定义元素移动到插件中，以便可以跨项目重用它

我看了一下，发现它有一个

src/index.js

，返回一个配置，其中所有自定义元素都定义为

globalResources

所以我尝试了同样的方法，我基本上做到了：

src/index.js

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

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
}

然后在

index.js

旁边有我的每个自定义元素，例如：

谷歌地图.js

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

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
}

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

无论如何，我遇到的问题是，在我安装插件（

npm安装——保存dev powerbucket/AureliaGoogleMaps

）后，将它添加到

build.bundle[vendor bundle.js]中的
aurelia.json
，并告诉aurelia在
main.js
（
.use.plugin（'aurelia-google-maps'）
）中使用它，我得到：

GEThttp://localhost:9000/node_modules/aurelia-谷歌地图/dist/index/google地图.js
（404）

所以我的问题是，它从哪里获得
dist/index/
部分？？我正在
index.js
中配置我的
globalResources
，但它没有说我有一个
index
文件夹

我做错了什么

附加问题：传输我的ES6插件代码以便其他人可以使用它，最低要求是什么？我的babel配置看起来正确吗？
在aurelia.json中引用您的插件怎么样，如下所示：

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

{
“名称”：“aurelia谷歌地图”，
“路径”：“./node_模块/aurelia谷歌地图/dist”，
“主要”：“索引”
}
更新：

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

关注您的原始问题：
aurelia cli
使用RequireJS（AMD格式）加载依赖项。您当前的输出可能有不同的格式

将
transform-es2015-modules-amd
添加到babel.plugins，以确保amd风格的输出，因此它将与RequireJS兼容，从而与aurelia cli兼容

“巴别塔”：{
“源地图”：正确，
“moduleIds”：错误，
“评论”：错，
“紧凑”：错误，
“代码”：正确，
“预设”：[“es2015松动”，“第1阶段”]，
“插件”：[
“语法流”，
“转换装饰程序遗产”，
“转换流条类型”，
“transform-es2015-modules-amd”
]
}

原件：

有几篇关于插件创建的博客文章，我从以下内容开始：

当然，自那以后有了很多变化，但这是一条有用的信息，其中大部分仍然适用

我建议使用as作为项目结构。它为您提供了一套现成的gulp、babel和多种输出格式。
使用这种方法，您的插件的可用性将不仅限于JSPM或CLI，而且无论构建系统如何，每个人都有可能安装它

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


下载骨架插件
将类+
index.js
复制到
src/
npm安装
……等等
gulp build
检查
dist/
文件夹
你的大部分痛苦现在应该消失了：）

以下是根据我的观察/经验得出的一些细节

1。Main
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'；
导出函数配置（配置、回调）{
//默认apiKey
让pluginConfig=Container.instance.get（CustomConfigClass）；
pluginFig.apiKey='01010101'；
//这里有一个超控
如果（回调）{
回调（pluginofig）；
}
...
config.globalResources(
“/某些元素”
);  
}

你的应用程序的
main.js

导出功能配置（aurelia）{
奥雷莉亚。用途
.standardConfiguration（）
.developmentLogging（）
.plugin（'aurelia-google-maps'，（pluginConfig）=>{
//自定义密钥
pluginFig.apiKey='12345678'；
});
然后（a=>a.setRoot（））；
}

2。HTML和CSS资源：

• 如果只有html自定义元素，可以使用

  globalResources

  使它们可用
• 定制css样式需要在绑定配置中进行一些额外的配置（见下文）

3。将插件与aurelia cli配合使用：

您将很快看到的第一个新功能之一是帮助您配置第三方模块的命令。该命令将检查以前安装的npm包，并向您提出配置建议，如果您愿意，将自动执行该过程

在我们期待上述时刻的同时，让我们编辑

aurelia.json

：

• 配置插件依赖项。如果有任何外部库（例如Bootstrap），那么这些库应该包含在插件之前
• 包括您的插件：

。。。
{
“名称”：“插件名称”，
“路径”：“./node_modules/plugin name/dist/amd”，
“主”：“插件名称”，
“资源”：[“***.html”、“***.css”]//如果有
},