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

Question

我刚刚通过 npm 将您的 amCharts4 版本下载到我的 node.js 应用程序中进行测试。 Wenn 已安装我在 MyNodejsApp/node_modules/@amcharts/amcharts4 中找到文件 chore.js 和 charts.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

在我的 routes/index.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

我正在使用 node.js v8.12.0

Answer 1

我不知道是否有办法让 amCharts v4 为 node.js 工作。它是为浏览器设计的，而不是 node.js.

In our documentation for using ES6 for the web we mention that bundlers are a hard requirement:

It is currently impossible to load npm packages directly in the browser. You must use a bundler like Webpack or Rollup. (check our Using Webpack article)

webpack

（如果您有兴趣，我在下面提供了一些关于为什么需要捆绑器的解释。）

如果您 follow our guide，您应该能够通过 npm install 让您的代码在浏览器上正常工作，或者之后通过 npm run prepare 再次构建。（在 package.json 中，您可能需要将 "webpack-cli" 设置为最新的，例如 "webpack-cli": "^3.1.2"。）

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

捆绑器的必要性

我们使用 ES6 imports (esm) 但在某种程度上只有捆绑器才能解释。
即使您尝试从那里使用 <script type="module" src="/js/main.js"></script> 和 imported，它最终也会出错，因为我们正在使用 module specifiers that only bundlers 会理解。例如。没有扩展名的文件路径（"./js/main" 而不是 "./js/main.js"），或 node_modules 中的包名称（"@amcharts/amcharts4/core" 而不是 "./node_modules/@amcharts/amcharts/core.js"），即 none 是可以 fetched 的有效 URL。
说到打包器，即使您使用 unpkg.com, it would also error out once it encounters our few dynamic imports 因为它不支持动态导入。
Node 8.5.0+ has experimental support for esm. You can read more about that here。但这不会起作用，因为它还首先需要 .mjs（也称为 Michael Jackon 脚本）扩展！即使没有，或者如果您将所有 amCharts .js 文件重命名为 .mjs，您仍然必须具有有效的模块说明符。假设您重命名了所有内容以便它们有效，包括其他 npm 包依赖项，并将文件重命名为 .mjs，这将破坏使用 npm 下载和管理 amcharts 包版本控制的意义。

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

不过到头来恐怕还是不能用在node.js。假设你有一个捆绑器为你把所有的东西放在一起并且它在浏览器中工作得很好......对于 node.js 中的运行东西你仍然需要模拟浏览器。有一个名为 jsdom 的库可以在大多数情况下做到这一点。甚至有几个 npm 包在节点全局范围内提供 jsdom，因此像 window 和 document 这样的变量可以随时随地使用。

不幸的是，在使用 SVG 时您会遇到障碍。 amCharts v4 通过 JavaScript 与 SVG 一起工作，因此对 SVG 相关 API 的支持是绝对必要的。 SVGSVGElement is virtually non-existent in jsdom 的实现（或者更好，但它仍然是一个 WIP）。

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

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

Node.js & amcharts4 - Import error 'Unexpected token export' using TypeSript or ES6

amcharts

node.js

webpack

捆绑器的必要性