【问题标题】：How to import an npm module with ES6 in an Electron application如何在 Electron 应用程序中使用 ES6 导入 npm 模块
【发布时间】：2017-09-08 13:11:14
【问题描述】：

我正在使用 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> 标记内时会发生这种情况。

【问题讨论】：

尝试使用requirejs。 requirejs.org
应该是var chart = require('chartjs')，而不是var chart = require(chartjs)。请解释一下你到底是在哪里做的以及发生了什么。因为这是通常的做法。
@estus 啊是的，这是一个轻微的错字。我把它放在不同的位置：head 标签，body 之后，甚至在我使用Chart 模块的单个文件中（plot.js）

标签： javascript node.js ecmascript-6 electron

【解决方案1】：

chart.js package 在头脚本中从 CDN 加载。

chartjs package 加载到require。

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

通常应该这样做

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

在应该使用模块的地方。

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

import * as Chart from 'chart.js';

【讨论】：

【解决方案2】：

var chart = require(chartjs) 我得到 Chart 不是的错误已定义。

这里有几处需要修复。首先您提到您使用的是 ECMAScript 6，因此将 var 更改为 const。还要把require改成ES6的import，并从chart js导入默认包（貌似可能只是chart。

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

总而言之，它应该看起来像，

import chart from 'chartjs`

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

【讨论】：

import 如果这不是转译的代码（事实并非如此）将无法工作。
@estus 这是不准确的。 import 受 Chrome 60 &61、Edge 38、Firefox 54、Safari 10.1 和 Opera 47 支持
我正在编译我的应用程序文件，如最初问题中所述。引号是我在问题中的错字。让我试试这个
Electron 也支持导入，因为它的底层有 Chrome。但是尝试像这样使用原生 import 导入 NPM 包，你会看到会发生什么。
@estus 我用过import chart from 'chartjs' 但是当我console.log(chart) 我看到它已经创建了一个BarChart 对象，而不是当我使用CDN 时它是这样的function (t,e){return this.construct(t,e),this}