2016-10-05 45 views
2

我試圖將我的自定義元素之一移動到插件中,以便可以跨項目重新使用它。無法使用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配置看起來是否正確?

+0

你是如何將它添加到aurelia.json文件的?就像「谷歌地圖」一樣,還是您指定了自定義配置? 「谷歌地圖」 : {....}? –

+0

我剛剛添加了「aurelia-google-maps」,但我也試過'{「name」:「aurelia-google-maps」,「path」:「../node_modules/aurelia-google-maps/dist/index 「}'。兩者產生相同的結果。我確實相信「aurelia-google-maps」正常工作(因爲我的主要特性指向了index.js) – powerbuoy

+0

我不確定*爲什麼*它失敗了,但問題可能與Aurelia如何將您路由到一個可能由一個名爲'about.js'的文件定義的頁面,但是URL表示'localhost:9000/about'。在這種情況下,如果從「index.js」發出GET請求的算法詢問服務器,「我現在在哪裏?」並且服務器給它'dist/index',那麼'。/ google-map'當然會指向'dist/index/google-map'。所以問題在於爲什麼這個算法被送入'dist/index'而不是'dist/index.js'。這是我認識的唯一方法。 –

回答

0

我絕對不知道爲什麼,但爲了解決這個問題,我實際上不得不將我的自定義元素移動到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/的文件夾中。

+0

這很奇怪。我會研究,因爲我沒有經歷過我的設置這樣的限制。我使用' .js'作爲主入口點,但它被放置在'src /'文件夾中。 [鏈接](https://github.com/martonsagi/aurelia-editables/blob/master/src/aurelia-editables.ts)。 –

0

什麼aurelia.json中引用你的插件,像這樣:

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

我試過,結果相同:/ – powerbuoy

0

更新:

編輯:感謝澄清爲什麼你不想使用整個骨架插件包。

專注於您的原始問題: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.jsplugin-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

+0

感謝這個非常透徹的答案,但是,它並沒有真正回答我的問題:/有一個原因,我沒有使用骨架插件(它超級膨脹),而我所有的' d真的很想知道爲什麼Aurelia認爲我的文件位於索引文件夾內。 – powerbuoy

+0

感謝您的反饋。你是對的,我非常關注細節,最終我錯過了最初的問題! :)更新了我的答案。 –

+0

乾杯:)即使我無法測試這個atm,我現在給你的賞金。如果不能解決問題,我會盡快回復您。 – powerbuoy