Javascript ES2015 导入抛出 Uncaught SyntaxError: Unexpected token {答案

【问题标题】：Javascript ES2015 import throws Uncaught SyntaxError: Unexpected token {Javascript ES2015 导入抛出 Uncaught SyntaxError: Unexpected token {
【发布时间】：2018-05-20 16:27:51
【问题描述】：

我有一个托管在 Firebase 主机上的网站。我想为其添加材料主题（按钮、文本字段等...）。所以，我运行了命令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';，也会抛出相同的错误（除了“{”字符之外，它不需要“*”字符）。

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

顺便说一句：我知道 import 语句正在使用的文件存在。还有，Node.js 不是服务器端的吗？

【问题讨论】：

导入/导出仅在最新版本的标志后面可用。如果你想在旧版本的节点上使用这些文件，你将不得不对它们进行传输。
如何更新到最新版本？

标签： javascript node.js material-design firebase-hosting

【解决方案1】：

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

版本 8.11.2 LTS 可以使用。

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

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

【讨论】：