webpack 本地 import 模块时，在异步函数里面使用此模块时发生了什么？
chenliangngng · 2020-01-14 22:07:58 +08:00 · 1616 次点击这是一个创建于 1767 天前的主题，其中的信息可能已经有所发展或是发生改变。
我用 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 未声明。打包以后的代码在环境上跑却没有任何问题，问题仅限在本地调试时出现
 |
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 后面 就可以看到结果了 |
|
2
yyfearth 2020-01-18 03:21:16 +08:00
我碰到的问题比你的糟糕多了
我之前碰到了 babel 和 webpack 插件版本冲突 导致 import 部分出问题 然后爆出来 __WEBPACK_XXXXX_MODULE_... not a function 所以我才发现了上面这种情况 但是完全无能为力 console.log 的结果完全正确 但是就是执行不了 |
Select Language