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

pvcm50d1  于 2023-01-30  发布在  iOS
关注(0)|答案(1)|浏览(310)

完整代码: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

mwyxok5s

mwyxok5s1#

似乎有几个概念需要澄清。
importexport是ES模块(ESM)语法。在浏览器中,正如您所注意到的,只有当您的脚本是type="module"时才能使用该语法。
当你npm install --save axios(或yarn add axios),你会得到一个包含{"dependencies": ...}package.json,以及一个node_modules目录,axios及其依赖项会安装到这个目录中。浏览器没有package.jsonnode_modules的概念,所以你的浏览器不知道在哪里可以找到你喜欢叫axios的东西。你可以在浏览器中使用像Systemjs这样的加载器来指示它。
此外,并非所有浏览器都支持ESM,这就是Webpack、Rollup、Snowpack等捆绑包的用武之地--除了将ESM导入到node_modules中的真实的文件之外(或者偶尔在其他地方),它们允许您将ESM代码转换为常规ES,以及将其捆绑到一个文件中以提高性能,或者将其缩小以获得更多性能。(就Webpack而言,它基本上是为你烤咖啡,为你做面包,还为你建造厨房Flume。)
所以,除非你想冒险,否则就用捆绑销售吧。
我建议您研究一下Vite

相关问题