Question

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

在我的route / 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：

当前不可能直接在浏览器中加载npm软件包。您必须使用Webpack或Rollup之类的捆绑器。（请查看我们的Using Webpack文章）

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>并import，它最终也会出错，因为我们使用的module specifiers是only bundlers可以理解的。例如。无扩展名的文件的路径（"./js/main"而不是"./js/main.js"）或node_modules中的包的名称（"@amcharts/amcharts4/core"而不是"./node_modules/@amcharts/amcharts/core.js"），即没有一个有效可以fetch编辑的URL。
说到捆绑器，即使您使用了unpkg.com，由于它不支持动态导入，一旦遇到我们很少的dynamic imports，它也会出错。
Node 8.5.0+ has experimental support for esm。 You can read more about that here。但这是行不通的，因为它首先也需要.mjs（否则称为Michael Jackon Script）扩展！即使没有，或者您将所有amCharts .js文件重命名为.mjs，您仍然必须具有有效的模块说明符。假设您重命名了所有东西，使它们生效，包括其他npm软件包依赖项，并将文件重命名为.mjs，那么您将无法使用npm下载和管理amcharts软件包的版本控制。

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

最后，恐怕它仍然不能在node.js中使用。假设您有了一个捆绑器，将所有这些东西组合在一起，它就可以在浏览器中很好地工作...要在node.js中运行内容，您仍然需要模拟浏览器。有一个名为jsdom的库可以在大多数情况下做到这一点。甚至有几个npm软件包在节点全局范围内提供jsdom，因此window和document之类的变量随时随地都可以使用。

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

我们真的需要更多地了解您想要做的事情，如果通过node.js应用程序您确实是想要的，或者这毕竟意味着要面向浏览器。如果您需要amCharts才能在node.js中工作，那么此时可能不适合您。让我们知道，我们将尽力提供帮助。

Node.js和amcharts4-使用TypeSript或ES6导入错误'意外的令牌导出'

1 个答案:

webpack

需要捆扎机