之前准备看vue源码,查看了一篇引导文档,找到了核心方法。
function
此时产生了一个疑惑,关于process.env.NODE_ENV
原本设想:在node环境中,process是一个全局对象,可以直接访问,代码看起来没问题。但是浏览器环境下是没有process对象的,放在浏览器中执行时,发现并未报错!!!
![50a36d1b9eab95702205171f67faa0ab.png](https://i-blog.csdnimg.cn/blog_migrate/43e99b4e800ff41493da8c63b751a957.jpeg)
此时尝试打印process.env.NODE_ENV和process.env,发现:
![2e314cd7ce317a55f9fc1bddcb133ac3.png](https://i-blog.csdnimg.cn/blog_migrate/f8ca0dd5080d480dfb90c96ae135bd7b.png)
process.env.NODE_ENV的值为development !!!
process.env直接抛错,原因是process未定义(因为确实未定义)
由此可以判断出,在浏览器端,process.env.NODE_ENV这句并不是走的常规对象调用的方式,而是被作为整体替换掉了,后面找到了webpack类似说法
为了验证此猜测,我们再用打包后的vue.js进行调试:
![134513e30ce2a925113babe1339cff90.png](https://i-blog.csdnimg.cn/blog_migrate/db119749950689e00b51f74443699cca.png)
可以看到process.env.NODE_ENV确实被替换成development了
结论:vue源码中的一下node变量如process.env.NODE_ENV等,在浏览器中运行之前已经被替换成了别的值,只有在调试时开启sourcemap才能看到源变量,这一步工作可能是打包工具做的。
为了进一步验证,继续查阅资料,终于找到端倪:Vue使用了rollup-plugin-replace插件进行了替换处理
![b179726ffa17eddad4bef83aa6508b0b.png](https://i-blog.csdnimg.cn/blog_migrate/3cd2f3f16b93d72847a88c1fb32d2604.jpeg)
其构建生成的readme文件中亦有相关信息
![1fb678be5dbc7b341d44532d0bdc69fd.png](https://i-blog.csdnimg.cn/blog_migrate/eaca7f958b519561c38d2b290833840a.jpeg)
至此,Vue函数中的疑惑基本解开,至于插件是如何替换的,后面在做调研,终于可以继续看源码了!!!