说明

• 首先这篇文章是读 vue.js 源代码的梳理性文章，文章分块梳理，记录着自己的一些理解及大致过程；更重要的一点是希望在 vue.js 3.0 发布前深入的了解其原理。

• 如果你从未看过或者接触过 vue.js 源代码，建议你参考以下列出的 vue.js 解析的相关文章，因为这些文章更细致的讲解了这个工程，本文只是以一些 demo 演示某一功能点或 API 实现，力求简要梳理过程。

  • - 强烈推荐

• 如果搞清楚了工程目录及入口，建议直接去看代码，这样比较高效 ( 遇到难以理解对应着回来看看别人的讲解，加以理解即可 )

• 文章所涉及到的代码，基本都是缩减版，具体还请参阅 。

• 。

简单谈谈工程结构

上图简单介绍了整个 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 简单介绍

const builds = {  ...  // Runtime+compiler development build (Browser)  'web-full-dev': {    entry: resolve('web/entry-runtime-with-compiler.js'),    dest: resolve('dist/vue.js'),    format: 'umd',    env: 'development',    alias: { he: './entity-decoder' },    banner  },  ...};function genConfig(name) {  const opts = builds[name]; // 映射目标配置  const config = {    input: opts.entry,    external: opts.external,    plugins: [...].concat(opts.plugins || []),    output: {      file: opts.dest,      format: opts.format,      banner: opts.banner,      name: opts.moduleName || 'Vue'    },    sourceMap: true // 为了更清晰调试代码，建议你开启  };  ...  return config;}if (process.env.TARGET) {  module.exports = genConfig(process.env.TARGET);}...复制代码

• 在 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 如下：

      
                    
    
      
     
{
   { message }}
    
    
      复制代码

承接下文 -