Javascript 如何在电子应用程序中使用ES6导入npm模块_Javascript_Node.js_Ecmascript 6_Electron

Javascript 如何在电子应用程序中使用ES6导入npm模块

javascript node.js ecmascript-6 electron

Javascript 如何在电子应用程序中使用ES6导入npm模块,javascript,node.js,ecmascript-6,electron,Javascript,Node.js,Ecmascript 6,Electron,我正在使用ES6和ChartJS编写一个电子应用程序。我有巴贝尔完全设置和工作良好。到目前为止，我让ChartJS工作的唯一方法是将（CDN）javascript粘贴到我的head标记中。当我尝试以ES6方式导入它时（不确定如何正确导入），或者简单地使用var Chart=require（'chartjs'）我得到一个错误，即Chart未定义我用安装了ChartJS npm安装chartjs——保存我尝试了各种加载javascript的方法，但结果都是空的。只有当我取消注释CDN时，它才能工

我正在使用ES6和ChartJS编写一个电子应用程序。我有巴贝尔完全设置和工作良好。到目前为止，我让ChartJS工作的唯一方法是将（CDN）javascript粘贴到我的head标记中。当我尝试以ES6方式导入它时（不确定如何正确导入），或者简单地使用

var Chart=require（'chartjs'）

我得到一个错误，即

Chart

未定义

我用安装了ChartJS

npm安装chartjs——保存

我尝试了各种加载javascript的方法，但结果都是空的。只有当我取消注释CDN时，它才能工作

如何在electron应用程序中导入和使用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>


...
需要（'./lib/app.js'）

编辑1：我已经运行了一些测试，甚至是最简单的

var图表=
要求（'chartjs'）会自动将图表实例化为条形图
。从我读到的内容来看，它必须以某种方式全局导入，这就是当它位于头部的
标记中时发生的情况
var chart=require（chartjs）我得到了一个错误，即chart不是
定义
这里有一些事情需要解决。首先，您提到您正在使用ECMAScript 6，所以将var
更改为const
。同时将require
更改为ES6的import
，并从chart js
导入默认包（看起来可能只是chart
）
前面已经提到了另一件事，您应该将chartjs
放在引号中：“chartjs”

总之，它应该看起来像
import chart from 'chartjs`

运行这一行之后，尝试记录chart
，您会看到chartapi
是从head脚本中的CDN加载的
加载到要求中

它们是具有不同名称的不同包
一般来说，这应该通过
var Chart = require('chart.js');

在应该使用模块的地方
如果应用程序使用Babel传输，ES模块导入将在传输代码中转换为require
，并且require
可以替换为等效的import
语句：
import * as Chart from 'chart.js';

尝试使用requirejs。它应该是var chart=require（'chartjs'）
，而不是var chart=require（chartjs）
。请解释一下你到底在哪里做的，以及发生了什么。因为这是通常的做法。@estus啊，是的，这是一个轻微的打字错误。我把它放在不同的位置：头标签，在身体后面，甚至在我使用图表的单个文件中（plot.js
）import
如果这不是传输的代码（而且不是），将无法工作@estus，这是不准确的。导入
受Chrome 60&61、Edge 38、Firefox 54、Safari 10.1和Opera 47支持。我正在传输我的应用程序文件，如第一个问题所述。引号是我在问题中的输入错误。让我试试这个，Electron也支持导入，因为它的引擎盖下有Chrome。但请尝试导入NPM package与nativeimport
类似，你会看到发生了什么。@estus我使用了import chart from'chartjs'
但是当我console.log（chart）
时，我看到它已经创建了一个BarChart
对象，而不是我使用CDN函数（t，e）{返回这个.construct（t，e），this}