编辑1：

Question

我正在使用ES6和 ChartJS 编写Electron应用程序。我有babel完全设置并且工作正常。到目前为止，我让ChartJS工作的唯一方法是将（CDN）javascript粘贴到我的head标签中。当我尝试以ES6方式导入它时（不确定如何正确执行），或者只是使用var Chart = require('chartjs')我收到Chart未定义的错误。

我安装了ChartJS npm install chartjs --save

我尝试了各种加载javascript的方法，但它们都是空白的。只有当我取消对CDN的注释时，它才有效。

如何在电子应用程序中导入和使用ChartJS？

我的结构

root_folder/
├── lib/
│   ├── app.js
│   ├── plot.js
│   ├── channel.js
├── src/
│   ├── app.js
│   ├── plot.js
│   ├── channel.js
├── index.html
└── main.js

在index.html的底部，我只需调用app.js，这是渲染器的入口点。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
</head>
<body>
...
</body>

<script>
  require('./lib/app.js')
</script>

</html>

编辑1：

我已经运行了一些测试，甚至干净文件中最简单的var Chart = require('chartjs');也会自动将图表实例化为BarChart。从我一直在阅读的是它必须以某种方式全局导入，这是当它在头部的<script>标签内时发生的。

Answer 1

chart.js package从头部脚本的CDN加载。

chartjs package已加载到require。

它们是具有不同名称的不同包。

一般来说，这应该用

完成

var Chart = require('chart.js');

在应该使用模块的地方。

如果使用Babel转换应用程序，ES模块导入将在转换后的代码中转换为require，并且require可以替换为等效的import语句：

import * as Chart from 'chart.js';

Answer 2

var chart = require（chartjs）我得到Chart不是的错误定义

这里有一些需要修复的东西。首先，您提到您正在使用ECMAScript 6，因此将var更改为const。同时将require更改为ES6＆＃39; import，然后从chart js导入默认包（看起来可能只是chart。

已经提到了另一件事，你应该将chartjs放在引号中："chartjs"。

总之，它应该看起来像，

import chart from 'chartjs`

运行此行后，尝试记录chart，您应该会看到图表API

如何在Electron应用程序中导入带有ES6的npm模块

编辑1：

2 个答案: