安装后如何使用 npm 包（chart.js）？答案

【问题标题】：How to use an npm package (chart.js) once installed?安装后如何使用 npm 包（chart.js）？
【发布时间】：2019-11-21 10:47:01
【问题描述】：

我正在制作一个练习 Laravel 站点，并且我已经通过 npm install 安装了 chart.js。

这是一个愚蠢的问题，但现在我如何从这里使用它（或通过 npm 安装的任何东西）？

文件安装在节点模块文件夹中。我应该在我的页眉中使用标签来引用它们吗？

如果我这样做：

<script type="text/javascript" src="/node_modules/chart.js/dist/Chart.min.js"></script>

然后它起作用了，我可以显示一个图表。但这感觉不对。 npm 不应该自动处理所有这些吗？

【问题讨论】：

标签： laravel npm chart.js

【解决方案1】：

Chart.js 似乎对 npm 用户不友好，在第 3 版中，您需要注册图表元素，因为树抖动。这是 chart.js@3.6.1

的示例

HTML

<div style="width: 600px;">
  <canvas id="myChart"></canvas>
</div>

import { Chart, LinearScale, BarElement, BarController, CategoryScale } from 'chart.js';
Chart.register(LinearScale, BarElement, BarController, CategoryScale);
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

结果

【讨论】：

实际上这个改变让 chart.js 对 npm 用户非常友好，因为通过 treeshaking 你只能使用你需要的东西。这将使您的捆绑包更小，这意味着您的用户必须下载更少，从而使您的网站加载更快。此外，您仍然可以使用旧的导入并让 chart.js 通过从以下位置导入来处理所有内容：'chart.js/auto'

【解决方案2】：

Laravel 使用 webpack aka Laravel Mix，你也可以在其中复制文件。例如 jQuery：

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

然后在需要js/css的页面可以使用stacks

@push('js')
    <script src="/js/Chart.bundle.min.js"></script>
@endpush

包含您的脚本。只需在开发中运行npm run dev，如果您准备上传，请运行npm run prod。如果您使用版本控制，请不要忘记将 Laravel Mix 复制的文件添加到您的公共 css 和 js 文件夹中。

【讨论】：

【解决方案3】：

您在代码 sn-p 中所做的是导入包以供全球使用。 NPM 更像是一个包管理器（Node Package Manager），用于安装包和管理依赖项。

所以要回答您的问题，没有 NPM 通常不会自动处理该问题。您正在做的是在安装包后访问/导入包的一种方式。另一种方法是https://docs.npmjs.com/using-npm-packages-in-your-projects。

【讨论】：