将Node模块导入Sinatra应用程序

Question

我有一个最小的Sinatra应用程序，用于在本地测试Britecharts数据可视化库(作为Node模块安装(。我在访问Sinatra视图中的库文件时遇到问题。

我的public/js/chart.js具有以下导入：

import bar from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';

文件的路径是有效的(如果我将路径粘贴到浏览器地址栏中，我可以访问它(。然而，在开发控制台中，我收到一个错误：

未捕获语法错误：找不到导入：默认

然后我在变量周围加上括号，如本指南所述：

import { bar } from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';

但后来我得到了这个错误：

未捕获SyntaxError：找不到导入：bar

感谢您的帮助。

[2022年1月4日编辑]：我已经为应用程序创建了一个GitHub回购：

https://github.com/fullstackplus/britecharts-demo

Answer 1

1. 打开Britecharts库文件和依赖项
2. 将它们放在应用程序的本地文件夹中
3. 在HTML中导入它们，如下所示：

<div class="bar-container"></div>
<script src="/js/britecharts/node_modules/britecharts/dist/umd/bar.min.js"></script>
<script src="/js/britecharts/node_modules/d3/dist/d3.min.js"></script>
<script src="/js/chart.js"></script>