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

[chenliangngng]

我用 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 未声明。打包以后的代码在环境上跑却没有任何问题，问题仅限在本地调试时出现

[yyfearth]

一般情况下你需要 sourcemap 这样浏览器会自动给你做一些事情 但是 webpack 处理 import 的情况除外

import {a} 这种 不像 function 会把(a)编译成 _a _a1 这样
因为 webpack 之类的 会把 module 编译成非常复杂的东西 比方说 __WEBPACK_XXXXX_MODULE_.XXXXXX["a"] 类似这样的东西 根本摸不着头脑
所以你需要被 debugger 放到 console.log 后面 就可以看到结果了

[yyfearth]

我碰到的问题比你的糟糕多了
我之前碰到了 babel 和 webpack 插件版本冲突
导致 import 部分出问题 然后爆出来 __WEBPACK_XXXXX_MODULE_... not a function
所以我才发现了上面这种情况
但是完全无能为力 console.log 的结果完全正确 但是就是执行不了