vue 项目sources源代码展示

转载

mob64ca13f7ab19 2024-07-16 13:58:20

文章标签 vue 项目sources源代码展示 vue.js javascript Vue git 文章分类 架构后端开发

1、下载源码

首先在Github上找到vue源码，使用git下载：

git clone https://github.com/vuejs/vue.git

安装依赖：

npm install

修改package.json的scripts里面的dev命令，添加--sourcemap，方便日后调试：

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"

打包，这里注意使用带编译器的版本，执行刚刚修改的脚本命令：

npm run dev

打包完成后会在dist目录下找到这两个文件：

vue 项目sources源代码展示_Vue

2、查找入口文件

我们从刚才打包的文件路径，找到scripts/config.js，在config.js文件中可以发现打包配置，它保存在builds数组中：

vue 项目sources源代码展示_vue.js_02

找到带编译器且运行在浏览器的配置（注意是开发环境dev）：

vue 项目sources源代码展示_javascript_03

找到入口文件路径entry，它通过resolve方法生成路径（Vue这里其实做了一个相当于alias插件做的事情，为了方便借助node生成了一些常用的文件夹路径保存在变量中，就和我们在vue项目中常见的@一样）。往上翻可以看到这个方法：

const aliases = require('./alias')
const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1)) 
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

这里引入了alias.js文件，找到这个文件，里面是一些路径配置：

const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}

通过分析这个文件，我们可以发现web这个字段对应的是src/platforms/web，通过resolve生成一个绝对路径，再结合build.js里面的resolve就可以生成最后的路径，但这里我们通过这个相对路径就可以找到。因此，直接跑到src下面的platforms中找到web目录，在web目录下找到entry-runtime-with-compiler.js文件：

vue 项目sources源代码展示_vue.js_04