我試圖將我的自定義元素之一移動到插件中,以便可以跨項目重新使用它。無法使用Aurelia插件
我看了看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配置看起來是否正確?
你是如何將它添加到aurelia.json文件的?就像「谷歌地圖」一樣,還是您指定了自定義配置? 「谷歌地圖」 : {....}? –
我剛剛添加了「aurelia-google-maps」,但我也試過'{「name」:「aurelia-google-maps」,「path」:「../node_modules/aurelia-google-maps/dist/index 「}'。兩者產生相同的結果。我確實相信「aurelia-google-maps」正常工作(因爲我的主要特性指向了index.js) – powerbuoy
我不確定*爲什麼*它失敗了,但問題可能與Aurelia如何將您路由到一個可能由一個名爲'about.js'的文件定義的頁面,但是URL表示'localhost:9000/about'。在這種情況下,如果從「index.js」發出GET請求的算法詢問服務器,「我現在在哪裏?」並且服務器給它'dist/index',那麼'。/ google-map'當然會指向'dist/index/google-map'。所以問題在於爲什麼這個算法被送入'dist/index'而不是'dist/index.js'。這是我認識的唯一方法。 –