「试着读读 Vue 源代码」工程目录及本地运行（断点调试）

分手后的思念是犯贱 2021-09-19 22:58 167阅读 0赞

### 说明 ###

*  首先这篇文章是读 `vue.js` 源代码的梳理性文章，文章分块梳理，记录着自己的一些理解及大致过程；更重要的一点是希望在 `vue.js 3.0` 发布前深入的了解其原理。
 *  如果你从未看过或者接触过 `vue.js` 源代码，建议你参考以下列出的 `vue.js` 解析的相关文章，因为这些文章更细致的讲解了这个工程，本文只是以一些 `demo` 演示某一功能点或 `API` 实现，力求简要梳理过程。
    
     *  [逐行级别的源码分析][Link 1] *- 强烈推荐*
     *  [Vue.js 源码分析][Vue.js]
     *  [Vue.js 源码解析][Vue.js 1]
 *  如果搞清楚了工程目录及入口，建议直接去看代码，这样比较高效 ( 遇到难以理解对应着回来看看别人的讲解，加以理解即可 )
 *  文章所涉及到的代码，基本都是缩减版，具体还请参阅 [vue.js - 2.5.17][]。
 *  [如有任何疏漏和错误之处欢迎指正、交流][Link 2]。

### 简单谈谈工程结构 ###

![1][]

**上图简单介绍了整个 vue.js 的工程目录，我们关注的点：**

*  如何使 vue.js 跑起来，即本地运行（降低代码阅读难度）
 *  如何下手阅读，即找到我们所关心的入口（紧接着顺着思路往下走）

### 本地运行（断点调试） ###

首先找到 `package.json`

...
      "scripts": {
         "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
         "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs",
         "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
         "dev:test": "karma start test/unit/karma.dev.config.js",
         "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
         "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
         "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
         "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
         "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
         "build": "node scripts/build.js",
         "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
         "build:weex": "npm run build -- weex",
         "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run
                  test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
         "test:unit": "karma start test/unit/karma.unit.config.js",
      },
      ...
    复制代码

就本地运行、断点调试，我们只需关注 `”dev“` 选项；简单解释一下，`npm run dev` 执行 `scripts/config.js` 目标为 `web-full-dev`

`config.js` 简单介绍

*  在 `genConfig - config`中添加 `sourceMap: true`, 为了能够在断点调试时，把代码映射到单文件内部。
 *  根据 `package.json "dev"` 映射知道了 `web-full-dev` 再由配置文件找到入口文件：`entry: resolve('web/entry-runtime-with-compiler.js')`
    
     *  `"web"` 别名配置 - `alias.js` 查看实际映射为 `web: resolve('src/platforms/web')`
     *  最终锁定了入口文件：`src/platforms/web/entry-runtime-with-compiler.js`

执行代码并调试

*  安装依赖： `npm i | yarn`
 *  运行: `npm run dev | yarn dev`
    
     *  运行后会在 `dist` 目录下生成两个文件 `vue.js` `vue.js.map`
 *  引入生成 `vue.js` 代码, demo 如下：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>vue.js DEMO</title>
        <script src="dist/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <p>{
       { message }}</p>
        </div>
    
        <script>
          new Vue({
            el: '#app',
            data: {
              message: 'hello vue.js'
            }
          });
        </script>
      </body>
    </html>
    复制代码

![1 1][]

如果你对编程感兴趣或者想往编程方向发展，可以关注微信公众号【筑梦编程】，大家一起交流讨论！小编也会每天定时更新既有趣又有用的编程知识！

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FHcySunYang%2Fvue-design
[Vue.js]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fustbhuangyi%2Fvue-analysis
[Vue.js 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fanswershuto%2FlearnVue
[vue.js - 2.5.17]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fcllemon%2Fnotes%2Fissues%2F5
[1]: /images/20210812/a4557b1f67db4d3ab8e78255170e9568.png
[1 1]: /images/20210812/89270b9eb10c46a988a8a096498cf3ec.png