react中引用的外部变量为什么在调试环境中看不到值？

Question

场景

比如我定义一个常量文件，在另一个组件引用，明明常量是管用的，但是在调试工具中，看引入的常量值却是undefined，为什么？

code

//constant.js
const Names={man:'zhangsan',woman:'xiaoli'}

export {Names}



//MyComponent.js
import {Names} from './constant.js'

...省略代码

componentDidMount(){
debugger;
}

操作

打开调试工具，当进入didMount的时候，可以用鼠标看下Names的值，是undefined，提示未定义。
但是在代码中使用确实是没问题的。

不仅仅是常量，所有import的都看不到值。

Answer 1

import {Names} from './constant.js'
步一、进行import的时候，webpack调用__webpack_require__方法，将模块（constant）缓存放入installedModules中 如图

步二、模块constant.js内部会被编译成如下

步三，在index.js 中 将导入进来的模块constant赋值给变量_constant,而Names只是_constant的一个属性,所以Names不在作用域中，报出 referenceError错误。

这个适用于所有import，将导入的模块缓存，使用的时候赋值给新变量，导入的所有方法或者变量都变成了新变量的一个属性，所以不存在作用域中

Answer 2

这不很好吗，当需要时才分配内存空间，节省空间。
试了一下，你加个console.log(Names),鼠标下就可以看到了具体内容了。

楼主问题可以简化成：调试工具下，为何下面b的值为undefined。

; (function() {
    var b = 2; (function() {
        debugger
    })()

})()