无法使用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中的每一个，例如：

谷歌，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/基本NPM脚本：

"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）后，在build.bundles[vendor-bundle.js].dependencies它添加到我的aurelia.json告诉奥里利亚在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

我绝对不知道为什么，但为了解决这个问题，我实际上不得不将我的自定义元素移动到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/从我想我永远都不会知道，但这个工程至少。

我确实需要babon插件Marton也提到过，但这并不能解决弥补路径的奥秘。

编辑：为了进一步阐述，如果我将我的主入口点命名为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

更新：

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

专注于您的原始问题：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作为项目结构。它为您提供一套可用的一揽子，多种输出格式。 使用这种方法，您的插件的可用性不会仅限于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.使用与奥里利亚-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在第一节显示。

我希望你没有厌倦阅读'插件'这么多（21！）次这个词。 ：D