V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chenliangngng
V2EX  ›  前端开发

webpack 本地 import 模块时,在异步函数里面使用此模块时发生了什么?

  •  
  •   chenliangngng · 2020-01-14 22:07:58 +08:00 · 1146 次点击
    这是一个创建于 942 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我用 vue cli3 搭的项目出现了点问题

    main.js 如下

    import {a} from './test'

    setTimeout(() => {

    debugger

    console.log(a)

    }, 0)

    test.js 如下

    export const a = {}

    如上,在本地编译的时候,你会发现在 debugger 的地方,浏览器直接调用变量 a 会提示 a 未声明。

    参照以往调试经验,在异步函数的回调中,变量 a 被重命名成了_a 或者_a1,_a2 之类的东西,而在 debugger 处调用_a 和_a 之类的依然会提示变量未声明

    请问这是怎么回事?

    我项目里面的实际问题是,通过 import 导入一个模块 a 以后,在接口的回调函数中直接调用了 a,在本地调试时,浏览器提示_a 未声明,而不是 a 未声明。打包以后的代码在环境上跑却没有任何问题,问题仅限在本地调试时出现

    2 条回复    2020-01-18 03:21:16 +08:00
    yyfearth
        1
    yyfearth  
       2020-01-15 08:20:38 +08:00   ❤️ 1
    一般情况下你需要 sourcemap 这样浏览器会自动给你做一些事情 但是 webpack 处理 import 的情况除外

    import {a} 这种 不像 function 会把(a)编译成 _a _a1 这样
    因为 webpack 之类的 会把 module 编译成非常复杂的东西 比方说 __WEBPACK_XXXXX_MODULE_.XXXXXX["a"] 类似这样的东西 根本摸不着头脑
    所以你需要被 debugger 放到 console.log 后面 就可以看到结果了
    yyfearth
        2
    yyfearth  
       2020-01-18 03:21:16 +08:00
    我碰到的问题比你的糟糕多了
    我之前碰到了 babel 和 webpack 插件版本冲突
    导致 import 部分出问题 然后爆出来 __WEBPACK_XXXXX_MODULE_... not a function
    所以我才发现了上面这种情况
    但是完全无能为力 console.log 的结果完全正确 但是就是执行不了
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2344 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 03:02 · PVG 11:02 · LAX 20:02 · JFK 23:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.