“未捕获的语法错误：导入声明可能只出现在模块的顶层”：1:18 再次询问

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。

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

我生疏了，我知道这个问题是超级基本的（我希望它是超级基本的），我只是想要一个错误。我得到的不是告诉我真正发生了什么。

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

Answer 1

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

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

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

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

所以——除非你喜欢冒险，否则使用捆绑器。

在撰写本文时，我建议您查看Snowpack；这是街区里的新孩子，但看起来很有前途。