如何让 axios 在浏览器中使用 ESM 模块？答案

【问题标题】：How to import via a URL using ES modules?如何让 axios 在浏览器中使用 ESM 模块？
【发布时间】：2021-10-12 01:15:04
【问题描述】：

所以，我只想在浏览器中使用 axios 和 ESM 模块。

index.html

<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./app.js" type="module"></script>
</body>

app.js

console.log(window.axios !== undefined); // true
const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username); // Bret

上面的 sn-p 工作正常，但我不希望它是这样的（即将axios 添加到window）。

我认为下面的解决方案（直接从 URL 导入）会起作用，但它不起作用。

index.html

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

app.js

import axios from "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js";

console.log(window.axios !== undefined);
const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username);

我知道 模块说明符 可以是完整的 URL（或相对路径），但在这种情况下似乎不起作用，为什么？我收到以下错误。

未捕获的语法错误：请求的模块“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”未提供名为“default”的导出

【问题讨论】：

标签： javascript axios es6-modules

【解决方案1】：

您可以使用 Skypack：

import axios from 'https://cdn.skypack.dev/axios';

const { data } = await axios.get(
  "https://jsonplaceholder.typicode.com/users/1"
);
console.log(data.username);

移除 jsDelivr CDN 链接。

【讨论】：

【解决方案2】：

CDN 提供的 JS 文件（如您的：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js）不会提供 ES6 模块导出。下载并搜索“export default”，什么都找不到。

如果您使用 npm，您可以将 axios 添加到您的依赖项中，并通过以下方式使用 axios import axios from 'axios'

如果您仍想在 CDN 中使用 ES 模块，This article 可能会有所帮助。

【讨论】：

如果我使用npm，我将无法在index.html 中使用script 标签
@SomShekharMukherjee 如果使用 npm，则无需再次编写 script 标签。您可以使用带有脚本标签的拉斐尔答案
我只是想在浏览器中打开index.html并使用它，只用npm可以吗？拉斐尔提到的我已经在我的问题中提到我不想使用它。

【解决方案3】：

你不需要在 app.js 中导入 axios，因为它已经在你的 html 中导入了，只需删除导入，一切都会正常工作

    async function fetchData() {
      const { data } = await axios.get(
        "https://jsonplaceholder.typicode.com/users/1"
      );
      console.log(data);
    }

fetchData();

【讨论】：

回答前请仔细阅读问题:(