vue 中watch函数名_Vue函数中的process.env.NODE_ENV

之前准备看vue源码，查看了一篇引导文档，找到了核心方法。

function Vue(options) {
      
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
      
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

此时产生了一个疑惑，关于process.env.NODE_ENV

原本设想：在node环境中，process是一个全局对象，可以直接访问，代码看起来没问题。但是浏览器环境下是没有process对象的，放在浏览器中执行时，发现并未报错！！！

Vue核心函数（开启sourcemap）

此时尝试打印process.env.NODE_ENV和process.env，发现：

process.env.NODE_ENV的值为development ！！！

process.env直接抛错，原因是process未定义（因为确实未定义）

由此可以判断出，在浏览器端，process.env.NODE_ENV这句并不是走的常规对象调用的方式，而是被作为整体替换掉了，后面找到了webpack类似说法

为了验证此猜测，我们再用打包后的vue.js进行调试：

vue.js 开发环境源码

可以看到process.env.NODE_ENV确实被替换成development了

结论：vue源码中的一下node变量如process.env.NODE_ENV等，在浏览器中运行之前已经被替换成了别的值，只有在调试时开启sourcemap才能看到源变量，这一步工作可能是打包工具做的。

为了进一步验证，继续查阅资料，终于找到端倪：Vue使用了rollup-plugin-replace插件进行了替换处理

其构建生成的readme文件中亦有相关信息

至此，Vue函数中的疑惑基本解开，至于插件是如何替换的，后面在做调研，终于可以继续看源码了！！！