Aurelia外部リソース

Question

私は、異なるプロジェクト間で共通のリソースを共有して自分のコードベースを整理する最良の方法を探しています。私は3つのaureliaアプリを持っています。それぞれ1つのリソースフォルダ（カスタム要素、属性など）にいくつかのリソースを追加しました。他のプロジェクトにすでに書いたものを必要としたら、貼り付けました。今私はリファクタリングする時間があります、私は専用リポジトリですべてのリソースを移動したいと思います。それから私は各プロジェクトで必要なリソースだけを選ぶことができるようにしたい。

私は私のすべてのモジュールのAMDモジュールを構築することを可能にするaureliaスケルトンからのgulpビルドタスクを使って私のすべてのリソースをレポに入れてみました。それから、aurelia.jsonでモジュールを追加することによって、いくつかのモジュールを個別に読み込むことができました。

{ 
    "name": "aurelia-resources-progress-button", 
    "path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/attributes", 
    "main": "progress-button" 
} 

またはカスタム要素：属性のexempleについて

{ 
    "name": "aurelia-resources-avatar-upload", 
    "path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/elements/avatar-upload", 
    "main": "avatar-upload", 
    "resources": [ 
    "avatar-upload.html", 
    "avatar-upload.css" 
    ] 
} 

それはシャルムのように働いたが、それは相対パスからモジュールをインポートする値変換に失敗しました。 ファイルは次の場所にあります。

"projectRoot/node_modules/SHG-aurelia-resources/dist/amd/resources/value-converters/duration-format.js", it import from '../utils./strings'

と私は実行AU次のエラーを取得する

：

"Error: ENOENT: no such file or directory, open '/Users/hadrien/Documents/dev/SportHeroes/united-heroes/src/resources/utils/strings.js'".

私は相対的なモジュールを必要としたときに奇妙なことがあります（私の進行状況のボタンのカスタム属性のような）テンプレートからは問題はありません。

私はレポのすべてのモジュールをロードしたくないので、プラグインを作りたくありません。可能ならば、フィーチャセット('../node_modules/path/resources')を設定し、私のローカルリソースをロードするようなものをロードできるようにしたいと思います。

どうすればよいですか？

Answer 1

私は上記のコメントで言い換えられたように答えています。

npmパッケージをお持ちの場合は、require要素を使用してリソースを要求するだけで済みます。このnpmパッケージは、自身をプラグインとしてパッケージ化することができ、サブセットが提供するものだけを必要とするので、そのようにロードしないことを選択するだけです。

私はこれを披露サンプルプロジェクトのセットを作成しました

：https://github.com/AshleyGrant/sample-app-so41961759

このアプリケーションは、プラグインとしてhttps://github.com/AshleyGrant/sample-resources-so41961759/

の依存この依存パッケージ自体を持っているが、それはまたのように断片的に消費することができます私はプラグインが持っている2つのリソースのうちの1つを使って、アプリケーションでやっています。私はそれを使用していないので、他のリソースが読み込まれていないことに注意してください。

これは私が、依存関係の中からリソースに引っ張ったときに、それはアプリで次のようになります。

<template> 
    <require from="sample-resources-so41961759/custom-elements/my-echo"></require> 
    <h1>${message}</h1> 

    <my-echo say="Echo!"></my-echo> 
</template>