一旦安装了npm包（chart.js），如何使用它？

Question

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

这可能是个愚蠢的问题，但现在我该如何在网站中使用它（或通过npm安装的任何东西）？

这些文件被安装在node_modules文件夹中。我是否应该在页面标题中使用<script>标签引用这些文件？

如果我这样做：

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

然后它可以工作，我能够得到一个图表。但这感觉不对。NPM难道不应该自动处理所有这些吗？

- user43107

Answer 1

Chart.js似乎不太适合npm用户，在版本3中，由于树摇动的原因，您需要注册图表元素。这是一个使用chart.js@3.6.1的示例。

HTML

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

JS

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
      }
    }
  }
});

结果

- Michael Klishevich

---

实际上，这个变化使得chart.js非常友好的npm用户，因为使用treeshaking您可以只使用所需的部分。这将使您的包更小，这意味着您的用户需要下载的内容更少，从而加快了您网站的加载速度。此外，您仍然可以使用旧的导入方法，通过从'chart.js/auto'进行导入，让chart.js处理所有事情。 - LeeLenalee

Answer 2

在你的代码片段中，你正在导入全局使用的包。NPM更多地是一个包管理器（Node Package Manager），它安装包并管理依赖项。

所以回答你的问题，通常情况下NPM不会自动处理这个。你正在做的是一种访问/导入已安装包的方式。另一种方式是https://docs.npmjs.com/using-npm-packages-in-your-projects。

- Dylan Hamilton

Answer 3

Laravel使用webpack，也称为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文件夹中。

- Dimitri Mostrey