Vue.js源码学习——项目构建

Posted 2021-10-09 小馒头儿

以下是在学习Vue.js源码过程中的一些知识点的记录，主要按照了Vue.js 技术揭秘这上的学习流程作为参考～

Version：2.6.12

构建：

在package.json中build对应的指令是"node scripts/build.js"

当使用指令npm run build的时候就会运行scripts/build.js文件

config.js

该文件在build.js中被引入，主要包含了一些构建配置

该文件主要包含了以下一些内容：

• builds对象

  1. 是一个对象，对象里面有很多的key也对应了一个对象
  2. key对应的对象中含有entry、dest、format、env、banner这些属性
• genConfig方法

  利用builds中的一个项生成新的一个配置对象，因为vue构建使用了rollup来进行，构造的新的config结构和rollup中的结构保持一致

import Vue from \'vue\' 做了什么事情？

1. 在Web应用下，使用Runtime+Compiler构建的Vue.js进行分析
2. 入口：src/platforms/web/entry-runtime-with-compiler.js

3. 在entry-runtime-with-compiler.js文件中可以看到引入了一个Vue

   import Vue from \'./runtime/index\'

4. 然后进入到runtime/index.js进行观察，这个文件里面也引入了Vue

   import Vue from \'core/index\'

5. 然后再进入这个core目录下的index.js，这个里面的Vue还是引入的

   import Vue from \'./instance/index\'

6. 最后进入到instance目录下的index.js，这个时候终于看见了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)
   }

   通过函数的方式来对Vue进行了定义，我们在Vue实例的时候用new来初始化对象。所以Vue的本质就是利用Function来构建，同时在使用的时候针对不同的场景来给Vue的原型上挂载方法。