Firebase宿主引发错误：未捕获语法错误：意外标识符

我正在尝试使用firebase主机托管网站，但收到错误： 未捕获的语法错误：意外的标识符

它发生在script.js:1中。源代码如下所示：

import axios from 'axios';

callWs();
console.log('This worked now!');

async function callWs() {
    try {
        const res = await axios(
            `https://us-central1-jpabiggmbh-001.cloudfunctions.net/realexData?amt=${500}&curr=${'CHF'}`
        );
        console.log('This function ran just now!');
    } catch (e) {
        console.log(e);
    }
    console.log(res);
}

{
  "database": {
    "rules": "database.rules.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

我的文件夹结构看起来像是公共树上的焦点：

我正在index.html中调用脚本：

---

错误来自包含以下代码的第1行：

import axios from 'axios';

这是一份声明。浏览器中的本机模块支持仍然非常新。Firefox刚刚开始发布这个。您需要确保您使用的浏览器是可用的

加载模块脚本时，需要执行以下操作

或

从packageName导入是一种速记工具，用于指代本地安装的依赖项

由于您在脚本中运行导入，因此它被视为一个脚本。动态导入目前仅在Chrome中提供，并且具有不同的语法

import('https://unpkg.com/axios@0.18.0/dist/axios.min.js')
  .then(axios => {
    axios.get(...);
  });

---

最终，您尝试使用一种尚未完全准备好使用的技术。我建议您考虑添加一个类似或的构建步骤。

感谢您的广泛回复，非常有用！我有一个关于firebase的后续问题，考虑到firebase只支持静态内容，这也会起到作用吗？您实际上可以提供服务。如果您是用TypeScript编写函数，您可以在函数中使用原始导入，但是您无法向用户提供JS文件。

<script type="module" src="script.js"></script>

import * as axios from '/node_modules/axios/dist/axios.min.js';

import * as axios from 'https://unpkg.com/axios@0.18.0/dist/axios.min.js';

import('https://unpkg.com/axios@0.18.0/dist/axios.min.js')
  .then(axios => {
    axios.get(...);
  });