Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {

Question

我在 Firebase 主机上托管了一个网站。我想向其中添加 material 主题（按钮、文本字段等...）。所以，我运行命令npm install --save @material/textfield。然后我将名为 @material 的文件夹提取到我的样式目录中，这样结构如下所示：

Root
|
+---index.html
+---scripts/
    +---app.js
+---styles/
    +---main.css
    +---@material/
        +---……

我可以通过将 @import "@material/textfield/dist/mdc.textfield.css"; 添加到样式表的开头来引用 main.css 中的 css 文件。这正确地改变了按钮的样式。但是，当我去对js做同样的事情时，它不起作用。

根据 Material Design 的 Github Repo，我应该可以添加

import {MDCTextField} from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

到我脚本的顶部。但是，当我部署代码并查看控制台时，返回以下错误：Uncaught SyntaxError: Unexpected token {。我尝试 require() 文件，并将路径更改为 import {MDCRipple} from '../styles/@material/ripple/dist/mdc.ripple.js';。这会引发相同的错误。如果我这样做：import * as MDCRipple from '../styles/@material/ripple/dist/mdc.ripple.js';，也会抛出同样的错误（除了不是“{”字符，它不需要“*”字符）。

这对我的网站来说应该是一个简单的转换，但它让我很头疼。我做错了什么？

顺便说一句：我知道导入语句使用的文件存在。另外，Node.js 不是服务器端吗？

Answer 1

下载最新版本的节点：https://nodejs.org/en/

版本 8.11.2 LTS 可以使用。

--experimental-modules 标志可用于启用 ES2015 导入功能。更多信息：

https://github.com/nodejs/node/blob/master/doc/api/esm.md

Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {

Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {

javascript

node.js

material-design

firebase-hosting