Nodejs：为什么浏览器环境的 js 无法调用 node_module 下的 axios 库

发布于 1周前 作者 caililin 来自 nodejs/Nestjs

项目目录
--my_app
----node_modules
------axios
----index.html
----main.js

index.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="main.js" type="module"></script>
</head>
<body>

</body>
</html>

main.js 代码：

import axios from "axios";

axios.get(‘http://localhost:5173/’)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(‘Error:’, error);
});

浏览器 console 报错：

TypeError: Failed to resolve module specifier "axios". Relative references must start with either "/", "./", or "../".

搞不懂...


Nodejs：为什么浏览器环境的 js 无法调用 node_module 下的 axios 库

Harmonyos Next教程
16 回复

为什么写 vue 的时候在 script 标签里写 import axios from “axios”;就可以，是构建工具实现的吗


是构建工具实现的

提示已经告诉你了，改成这样就可以了：import axios from “/node_modules/axios/dist/esm/axios.js”

不行，又提示 axios 依赖的库的导入有问题

看看 webpack 的文档

看下路径是否是对的，协议是否是 http://而不是 file:///

你想在自己的项目里自己写，用 Vite 就行了。Webpack 也行，不过个人更推荐 Vite ，整体复杂度没那么高。

直接将 main.js 改成

import axios from ‘https://cdn.jsdelivr.net/npm/axios/dist/esm/axios.min.js’


是的，没错。
vite 会自动帮你把 import axios from "axios"转化为浏览器可识别的地址。
如果你不用预构建工具，你就要自己写 importmap 。
比如
<script type=“importmap”>
{
“imports”: {
“axios”: “/node_modules/axios/dist/esm/axios.js”
}
}
</script>

参见
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

node_modules 在你服务器上
用户的浏览器怎么能导入你服务器上的模块呢
vue 是把相关的脚本都打包给了浏览器才能做到让浏览器能导入模块的呀
所以你要达到类似的目的，就必须把你 node_modules 里的脚本让用户浏览器能看到才行
譬如放到 index.html 同级目录下，保证远程用 http://youserver/axios.js 能看到脚本，
然后在 index.html 内 <script src=“axios.js” type=“module” />
这样才能在让浏览器可以正常用 axios 模块

这是 webpack 等打包工具的功能啦，
你可以选择在 HTML 里引入远程地址，也可以将三方代码全写入一个 vendor 文件，然后再引入 HTML 中。
甚至可以是异步的，通过 js 动态插入 script 块。

可以配置一个 [importmap]( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) ，让浏览器知道你所需要的第三方库在哪里。

顺便晒一篇我的笔记 https://beginor.github.io/2021/08/16/using-es-modules-in-borwser-with-importmaps.html

又一个萌新，来人，叉出去

基础基础还是 xxx 基础

首先，你想引入一个文件肯定要有相对路径或者绝对路径的，你直接 from 'axios’浏览器怎么可能识别，你可以用相对路径引用试一下，vite 或者 webpack 是会自动索引 nodemodules 里面的模块来一起打包的

在浏览器环境中，JavaScript 无法直接调用 node_modules 下的 axios 库，主要因为以下几个原因：

  1. 环境差异： Node.js 和浏览器环境有着本质的不同。Node.js 是一个服务器端环境，支持文件系统操作、网络通信等，而浏览器环境出于安全考虑，对这些功能进行了限制。

  2. 模块系统： Node.js 使用 CommonJS 模块系统，通过 require 函数引入模块。而浏览器环境通常使用 ES6 模块系统，通过 import 语句引入模块。此外，浏览器不支持 node_modules 的解析机制。

  3. 依赖差异： axios 库依赖于 Node.js 的内置模块（如 http、https），这些模块在浏览器环境中不可用。

为了在浏览器中使用类似 axios 的功能，你可以使用专门为浏览器设计的库，如 axios 的浏览器版本，或者使用 Fetch API，这是现代浏览器提供的原生网络请求接口。

示例代码（使用 Fetch API）：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

如果你确实需要在浏览器中使用 axios，你可以使用 axios 提供的浏览器构建版本，通过 CDN 或打包工具（如 Webpack）引入。

总之，由于环境、模块系统和依赖的差异，浏览器环境的 JavaScript 无法直接调用 node_modules 下的 axios 库。

回到顶部