reactjs - babel-loader (webpack) 的 ES6 语法错误

Question

尝试使用storm-react-diagrams制作一个简单的图表

不完全确定如何解决这个问题。
错误：

ERROR in ./src/diagram.jsx
Module build failed: SyntaxError: Unexpected token, expected , (31:9)

  29 |   // link the ports
  30 |   let link1 = port1.link(port2);
> 31 |   (link1 as DefaultLinkModel).addLabel("Hello World!");
     |          ^
  32 | 
  33 |   //4) add the models to the root graph
  34 |   model.addAll(node1, node2, link1);

diagram.jsx和这个完全一样

我在这里错过了某种花哨的 es6 语法还是什么？
这就是我的webpack.config 的样子。

Answer 1

as关键字来自TypeScript ，而不是 ES2015。它用于将变量从一种类型转换为另一种类型——这在没有编译时类型的纯 JavaScript 中没有意义！

如果你想在你的应用程序中使用 TypeScript，你需要一个 TypeScript Webpack 加载器（例如ts-loader或awesome-typescript-loader），并将你的文件重命名为.tsx扩展名。

或者，如果您对使用 TypeScript 不感兴趣，您应该能够替换(link1 as DefaultLinkModel)为link1并让事情按预期工作。