javascript - "Uncaught SyntaxError: import declarations may only appear at top level of a module":1:18 asking again

Question

完整代码在这里:https://github.com/vscodr/axios_issue

离开 JS 一两分钟，在 python 中工作，现在我想尝试用 JS 完成一些我在 python 中一直在做的相同任务。我不能越过最愚蠢的事情! 将 Axios 作为依赖项安装后，

  "dependencies": {
    "axios": "^0.19.2"
  }

尝试使用脚本第一行的 axios:

import axios from 'axios' 
r = axios.get('https://swapi.dev')
console.log(r)

我不断得到:

Uncaught SyntaxError: import declarations may only appear at top level of a module

在阅读了关于此错误的所有 SO 帖子并确保我将脚本本身称为

之后

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

产生:

Uncaught TypeError: Error resolving module specifier: axios main.js:1:18

作为:

<script src="./main.js"></script>
<script src="/main.js"></script>
<script src="main.js"></script>

产生:

 Uncaught SyntaxError: import declarations may only appear at top level of a module :1:18

我提到了:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

因此，在重新发布这篇文章之前，我已经涵盖了大部分内容。

同样只是使用文档中的代码导致了同样的错误。

   axios.get('https://swapi.dev')
.then(function (response) {

// handle success
   console.log(response);
})
.catch(function (error) {

// handle error
  console.log(error);
})
  .finally(function () {

// always executed
  });

我公开羞辱自己以解决这个愚蠢的问题!这显然是来自浏览器的某种“跑回家找妈妈”错误，我怀疑 WEBPACK。

我不知道有任何我可能没有听说过的改变游戏规则的变化。

我很生疏，我知道问题是 super 基本的(我希望它是 super 基本的)，我只想要一个错误。我得到的是没有告诉我到底发生了什么。

在新机器上全新安装 Windows 和 VSCode

Answer 1

有几个概念需要澄清，看起来像。

import 和 export 是 ES 模块 (ESM) 语法。在浏览器中，如果您的脚本是 type="module"，您只能使用该语法，正如您所注意到的。抛开这个障碍，我们进入下一点。

当你npm install --save axios(或yarn add axios)时，你会得到一个包含的package.json {"dependencies": ...}，以及安装 axios 及其依赖项的 node_modules 目录。浏览器没有 package.json 和 node_modules 的概念，因此您的浏览器不知道在哪里可以找到您喜欢称为 axios 的东西。您可以在浏览器中使用像 Systemjs 这样的加载程序来指示它。

此外，并非所有浏览器都支持 ESM。这就是 Webpack、Rollup、Snowpack 等打包工具的用武之地——除了将 ESM 导入解析为 node_modules(或偶尔在其他地方)中的真实文件外，它们还允许您将 ESM 代码转换为常规 ES，以及将其捆绑到一个文件中以提高性能，或者将其缩小以获得更多。 (就 Webpack 而言，它基本上可以为你烤咖啡、做面包，还可以为你打造一个厨房水槽。)

因此 – 除非您喜欢冒险，否则请使用 bundler 。

我建议查看 Vite .