イオン2にnode_modulesのjavascript + cssを含めるにはどうすればよいですか？

Question

イオン2アプリにfullcalendarとchart.jsを含める必要があります。 （ionic 2 RC.3） 関連モジュールをインストールするためにnpmを使いましたが、スクリプトはnode_modulesフォルダ内にあります。
node_modulesフォルダのscripts/cssをアプリに正しく組み込むにはどうすればよいですか？私が試した

もの：

• は、手動でのwwwフォルダに関連するJS/CSSファイルをコピーして、index.htmlをで、通常の<script>と<link>要素を持つ 参照して。 （私はほとんどこれが動作するようになったが、それはひどく不格好と思われる）
• は、私のapp.module.tsおよび/または私のカスタムcomponent.tsファイル内の作品のような import 'chart.js/dist/Chart.bundle.min.js'; （この種のインポートが、私基本的なスクリプトがjQueryを見つけることができないエラーが発生するので、上記のように手動でindex.htmlにjQueryを組み込む必要があります）

確かに良い方法がありますか？

Answer 1

これは私がこれまでに行った最もクリーンな方法だと思います。

イオンビルドスクリプトのコピー部分をオーバーライドしようとしています。彼らはこれを奨励し、簡単にするためのビルドスクリプトを作成しました。

npm install chart.js --save 

（プロジェクトのルートにnode_packagesフォルダにchart.jsライブラリをインストールしている）で

ルック：あなたはすでに何が必要ライブラリをインストールするために、NPMを使用しましたと仮定すると、

/node_modules/@ionic/app-scripts/config/copy.config.js。これが優先されますので、その内容をファイル/config/copy.config.jsにコピーします（/ configフォルダを作成する必要があります）。

module.exports = { 
    include: [ 
    { 
     src: '{{SRC}}/assets/', 
     dest: '{{WWW}}/assets/' 
    }, 
    { 
     src: '{{SRC}}/index.html', 
     dest: '{{WWW}}/index.html' 
    }, 
    { 
     src: '{{SRC}}/manifest.json', 
     dest: '{{WWW}}/manifest.json' 
    }, 
    { 
     src: '{{SRC}}/service-worker.js', 
     dest: '{{WWW}}/service-worker.js' 
    }, 
    { 
     src: 'node_modules/ionic-angular/polyfills/polyfills.js', 
     dest: '{{BUILD}}/polyfills.js' 
    }, 
    { 
     src: 'node_modules/ionicons/dist/fonts/', 
     dest: '{{WWW}}/assets/fonts/' 
    }, 
    { 
     src: './node_modules/chart.js/dist/Chart.bundle.min.js', 
     dest: '{{BUILD}}/Chart.bundle.min.js' 
    }, 
    ] 
}; 

最後のセクションは、chart.jsファイルを実際にビルドに引き込まれる場所にコピーするために追加したものです。ビルド今

"config": { 
    "ionic_copy": "./config/copy.config.js" 
}, 

、ファイル：

私たちのスクリプトを取得するために使用することは、package.jsonはそれについて語ったので、あなたの/package.jsonファイルにこの「設定」セクションを追加する必要があります最初のコピーが完了した後は明らかに簡単にコピーできます。あなたが上書きすることができるイオンビルドプロセスの他の部分もあります。それは調べる価値があります。

https://ionicframework.com/docs/v2/resources/app-scripts/

今、あなたは簡単にそれを呼び出すことができ、一つの選択肢は、index.htmlをの内側にある：

<script src="build/Chart.bundle.min.js"></script> 

あなたはモジュールのアップデートをインストールする場合の利点は、ある、ファイルがで更新されます変更あなたのビルドはもちろん、vcsを使って簡単に作業し、依存関係はnpmで処理されるので、新しい環境を設定することができます。スクリプト拡張によって他のすべてが処理されます。:-)

希望に役立ちます！ :-)