无法使用Aurelia插件 [英] Unable to use Aurelia plugin

问题描述

我正在尝试将自定义元素之一移动到插件中，以便可以在项目中重复使用.

I'm trying to move one of my custom elements into a plug-in so that I can re-use it across projects.

我看了骨架插件，发现它有一个src/index.js返回一个配置，其中所有自定义元素都定义为globalResources.

I had a look at the skeleton plugin and noticed that it has a src/index.js that returns a config with all custom elements defined as globalResources.

所以我尝试了同样的事情，并且基本上有了:

So I tried the same thing and I basically have:

src/index.js

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

然后在index.js旁边有我的每个自定义元素，例如:

And then I have each one of my custom elements next to index.js, for example:

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/中:

I've also set up a basic npm script that runs babel on the code and sticks it in 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 I'm not entirely sure this is all correct but I took some of it from the skeleton plugin and it seems to run fine.

无论如何，我遇到的问题是在安装插件(npm install --save-dev powerbuoy/AureliaGoogleMaps)之后，将其添加到build.bundles[vendor-bundle.js].dependencies中的aurelia.json中，并告诉aurelia在main.js(.use.plugin('aurelia-google-maps'))中使用它我得到:

Anyway, the problem I'm having is that after I install the plugin (npm install --save-dev powerbuoy/AureliaGoogleMaps), add it to my aurelia.json in build.bundles[vendor-bundle.js].dependencies and tell aurelia to use it in main.js (.use.plugin('aurelia-google-maps')) I get:

GET http://localhost:9000/node_modules/aurelia-google-maps/dist/index/google-map.js(404)

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

So my question is, where does it get the dist/index/ part from?? I'm configuring my globalResources in index.js but nowhere does it say that I have an index folder.

我在做什么错了?

奖金问题:移植我的ES6插件代码以便其他人可以使用它的最低要求是什么?我的babel配置看起来正确吗?

Bonus question: What is the bare minimum required to transpile my ES6 plug-in code so that others can use it? Does my babel configuration look correct?

推荐答案

我完全不知道为什么为什么，但是为了解决这个问题，我实际上不得不将自定义元素移到文件夹.

I have absolutely no idea why, but in order to solve this problem I actually had to move my custom elements inside an index/ folder.

所以我现在有这个:

- 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/我想我永远不会知道，但这至少有效.

Where it gets index/ from I guess I will never know, but this works at least.

我确实也需要提到Babel插件Marton，但仅此一点并不能解决构建路径的奥秘.

I did need the babel plug-in Marton mentioned too, but that alone did not solve the mystery of the made up path.

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

To elaborate a bit further, if I name my main entry point something other than index.js the folder too needs that name. For example, if I were to rename index.js main.js I would need to put my globalResources inside a folder called main/.

这篇关于无法使用Aurelia插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！