Node.js & amcharts4 - 使用 TypeSript 或 ES6 导入错误'Unexpected token export'

Question

我刚刚通过npm将您的amCharts4版本下载到我的节点.js应用程序中以进行测试。Wenn 已安装我在 MyNodejsApp/node_modules/@amcharts/amcharts4 中找到了文件琐事.js和图表.js：

MyNodejsApp
_node_modules
|_@amcharts
|_amcharts4
|_charts.js
|_core.js
|_amcharts4-geodata
_public
|_css
|_styles.css
|_js
|_main.js
_routes
|_index.js
_views
|_partials
|_scripts.ejs
|_dashboard.ejs
|_index.ejs     
app.js  

在我的路由/索引中.js我集成了必要的文件：

const { am4core } = require("@amcharts/amcharts4/core");
const { am4charts } = require("@amcharts/amcharts4/charts");
/home/MyNodejsApp/node_modules/@amcharts/amcharts4/core.js:8
export { System, system } from "./.internal/core/System";
^^^^^^
SyntaxError: Unexpected token export
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/MyNodejsApp/routes/index.js:12:21)
[nodemon] app crashed - waiting for file changes before starting... 

我错过了什么？

https://www.amcharts.com/docs/v4/getting-started/basics/

编辑：导入也给了我一个错误

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
/home/MyNodejsApp/routes/index.js:12
import * as am4core from "@amcharts/amcharts4/core";
^^^^^^
SyntaxError: Unexpected token import

我正在使用节点.js v8.12.0

Answer 1

我不知道是否有办法让amCharts v4适用于node.js。它是为浏览器设计的，而不是节点.js。

在 Web 使用 ES6 的文档中，我们提到捆绑器是一项硬性要求：

目前无法直接在浏览器中加载 npm 包。您必须使用像 Webpack 或 Rollup 这样的捆绑器。(查看我们的使用网络包文章(

网络包

(如果您有兴趣，我在下面提供了一些解释，说明为什么需要捆绑器。

如果您遵循我们的指南，您应该能够通过npm install让您的代码在浏览器上运行，或者之后通过npm run prepare再次构建。(在package.json中，您可能需要将"webpack-cli"设置为最新版本，例如"webpack-cli": "^3.1.2".(

但是，这不适用于 node.js，因为window和document等浏览器中的全局变量在节点环境中不存在。

对捆绑器的需求

1. 我们使用 ES6 导入 (esm(，但在某种程度上只有捆绑商才能解释。
2. 即使您尝试使用<script type="module" src="/js/main.js"></script>并从那里imported，它最终也会出错，因为我们使用的是只有捆绑者才能理解的模块说明符。 例如，没有扩展名的文件的路径("./js/main"而不是"./js/main.js"(，或node_modules中的包名称("@amcharts/amcharts4/core"而不是"./node_modules/@amcharts/amcharts/core.js"(，即没有一个是可以fetch编辑的有效URL。
3. 说到捆绑器，即使您使用了 unpkg.com，一旦遇到我们的少数动态导入，它也会出错，因为它不支持动态导入。
4. 节点 8.5.0+ 具有对 esm 的实验性支持。您可以在此处阅读更多相关信息。但这行不通，因为它首先还需要.mjs(也称为迈克尔杰克逊脚本(扩展！即使没有，或者如果您将所有 amCharts.js文件重命名为.mjs，您仍然必须具有有效的模块说明符。假设你重命名了所有的东西，使它们有效，包括其他 npm 包依赖项，并将文件重命名为 .mjs，那么它将破坏使用 npm 下载和管理 amcharts 包的版本控制的意义。

所以是的，无论环境如何，都必须使用捆绑器。

最后恐怕它仍然不能在节点中使用.js但是。假设一旦您有一个捆绑器为您将所有内容放在一起，并且在浏览器中效果很好......要在 Node 中运行内容.js您仍然需要模拟浏览器。有一个名为jsdom的库，它在大多数情况下可以做到这一点。甚至有几个 npm 包在节点全局范围内提供 jsdom，因此像window和document这样的变量可以随时随地使用。

amCharts v4 通过 JavaScript 与 SVG 一起工作，因此对 SVG 相关 API 的支持是绝对必要的。SVGSVGElement的实现在jsdom中几乎不存在(或者更好的是，它仍然是一个WIP(。

我们真的需要更多地了解您要做什么，如果通过节点.js应用程序，您真的是这个意思，或者这毕竟是面向浏览器的。如果您需要amCharts在node.js中工作，则目前可能不适合您。让我们知道，我们将尽我们所能提供帮助。