V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
rookiemaster
V2EX  ›  Node.js

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

  •  
  •   rookiemaster · 208 天前 · 2101 次点击
    这是一个创建于 208 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目目录
    --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 "../".
    

    搞不懂...

    15 条回复    2024-06-07 23:10:25 +08:00
    rookiemaster
        1
    rookiemaster  
    OP
       208 天前   ❤️ 1
    为什么写 vue 的时候在 script 标签里写 import axios from "axios";就可以,是构建工具实现的吗
    ysc3839
        2
    ysc3839  
       208 天前 via Android   ❤️ 1
    是构建工具实现的
    Kokororin
        3
    Kokororin  
       208 天前
    提示已经告诉你了,改成这样就可以了:import axios from "/node_modules/axios/dist/esm/axios.js"
    rookiemaster
        4
    rookiemaster  
    OP
       208 天前
    @Kokororin 不行,又提示 axios 依赖的库的导入有问题
    vituralfuture
        5
    vituralfuture  
       208 天前 via Android
    看看 webpack 的文档
    Kokororin
        6
    Kokororin  
       208 天前
    @rookiemaster 看下路径是否是对的,协议是否是 http://而不是 file:///
    ysc3839
        7
    ysc3839  
       208 天前 via Android
    你想在自己的项目里自己写,用 Vite 就行了。Webpack 也行,不过个人更推荐 Vite ,整体复杂度没那么高。
    lisongeee
        8
    lisongeee  
       208 天前
    直接将 main.js 改成

    import axios from 'https://cdn.jsdelivr.net/npm/axios/dist/esm/axios.min.js'
    DOLLOR
        9
    DOLLOR  
       208 天前
    @rookiemaster
    是的,没错。
    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
    NessajCN
        10
    NessajCN  
       208 天前
    node_modules 在你服务器上
    用户的浏览器怎么能导入你服务器上的模块呢
    vue 是把相关的脚本都打包给了浏览器才能做到让浏览器能导入模块的呀
    所以你要达到类似的目的,就必须把你 node_modules 里的脚本让用户浏览器能看到才行
    譬如放到 index.html 同级目录下,保证远程用 http://youserver/axios.js 能看到脚本,
    然后在 index.html 内 <script src="axios.js" type="module" />
    这样才能在让浏览器可以正常用 axios 模块
    iOCZS
        11
    iOCZS  
       208 天前
    这是 webpack 等打包工具的功能啦,
    你可以选择在 HTML 里引入远程地址,也可以将三方代码全写入一个 vendor 文件,然后再引入 HTML 中。
    甚至可以是异步的,通过 js 动态插入 script 块。
    beginor
        12
    beginor  
       208 天前 via Android
    可以配置一个 [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
    TimPeake
        13
    TimPeake  
       208 天前
    又一个萌新,来人,叉出去
    hwf
        14
    hwf  
       207 天前
    基础基础还是 xxx 基础
    skkakaka2
        15
    skkakaka2  
       200 天前
    首先,你想引入一个文件肯定要有相对路径或者绝对路径的,你直接 from 'axios'浏览器怎么可能识别,你可以用相对路径引用试一下,vite 或者 webpack 是会自动索引 nodemodules 里面的模块来一起打包的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5274 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 07:11 · PVG 15:11 · LAX 23:11 · JFK 02:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.