[解決済み] laravel 6 に npm 経由で chartjs をインストールする方法

質問

私のlaravelアプリケーションに[email protected] をインストールし、統合する方法をお聞きしたいのです。

今はcdnリンクを使用していますが、後でオプションになることはないでしょう。

cdnリンクを使用。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

私が試した方法

1. chartjsのインストール

npm i [email protected]

1. webpack.mix.jsにこの行を追加します。

mix.copy('node_modules/chart.js/dist/chart.js', 'public/chart.js/chart.js');

1. 次に、これをコマンドラインから実行します。

npm run dev

1. チャートを表示させたいブレードに

<script src="{{ asset('chart.js/chart.js') }}"></script>

解決方法は？

パッケージをインストールします。

npm install chart.js

というようなファイルを作ります。 /resources/js/mychart.js :

import Chart from 'chart.js/auto';

let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    // ...
});

あなたの /resources/js/app.js を追加し、先頭に以下を追加します。

import './mychart.js';

ここでビルドを実行し、JavaScriptを1つのファイルにコンパイルしてください。

npm run dev

Laravel Mixでは、app.jsファイルをコンパイルするための行が既に用意されています。

これで /public/js/app.js を作成すると、そのチャートもそこに含まれるようになります。

<script src="{{ mix('/js/app.js') }}"></script>

別ファイルが必要な場合は webpack.mix.js ファイルをこのように変更します。

mix.js('/resources/js/chart.js', 'public/js');

でimportから削除することを忘れないでください。 /resources/js/app.js ファイルを作成します。