代码之家 › 专栏 › 技术社区 › rajap

javascript es2015导入引发未捕获的语法错误:意外的标记{

firebase-hosting material-design node.js javascript

rajap · 技术社区 · 6 年前

我有一个网站托管在FireBase托管上。我想添加材料主题到它(按钮,文本字段等…)。所以,我执行了命令 npm install --save @material/textfield . 然后我提取了名为 @material 到我的样式目录,使结构看起来像这样:

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

我可以从我的 main.css 通过添加 @import "@material/textfield/dist/mdc.textfield.css"; 到样式表的开头。这将正确更改按钮的样式。但是,当我为JS做同样的事情时,它不起作用。

根据材料设计的Github报告,我应该可以添加

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语句使用的文件exist。而且,node.js服务器端不是吗?