如何使用 ES 模块通过 URL 导入？

Question

我想直接从 URL 导入像 axios 这样的库并使用它。

我不想将其添加为 script，它会将 axios 添加到 window 对象（，如下所示） .

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

我想要这样的东西，我可以直接从 URL.

导入 axios

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);

显然这是行不通的，因为上述 CDN 提供的 JavaScript 代码并不打算与 ES 模块一起使用。有解决方法吗？

Answer 1

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

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

如果您仍想将 ES 模块与 CDN 一起使用，This article 可能会有所帮助。

Answer 2

您不需要在 app.js 中导入 axios，因为它已经在您的 html 中导入，只需删除导入即可一切正常

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

fetchData();

Answer 3

您可以使用 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 link。

如何使用 ES 模块通过 URL 导入？

How to import via a URL using ES modules?

javascript

esmodules

index.html

app.js

index.html

app.js