vue2.x源码解析四——1.入口文件

最新推荐文章于 2024-07-09 15:18:33 发布

南张门

最新推荐文章于 2024-07-09 15:18:33 发布

阅读量1k

点赞数

分类专栏： vue源码文章标签： vue源码 vue 入口文件 vue入口文件

本文链接：https://blog.csdn.net/haochangdi123/article/details/80873734

版权

本文深入解析Vue2.x的入口文件，从`package.json`的`npm run dev`开始，探讨`scripts/config.js`如何配置Rollup。详细介绍了如何找到Vue对象的起点`/src/platforms/web/entry-runtime-with-compiler.js`，分析Vue对象的构造及实例方法，并讲解`initGlobalAPI`如何扩展全局静态方法，提供对Vue实例和全局API的理解。

摘要由CSDN通过智能技术生成

1.从package.json文件开始

由上一节的学习，我们应该已经基本明白了Vue源码的整个构建的基本过程，下面我们来学习和了解Vue的入口文件

1.1 npm run dev

还是要看根目录下的package.json文件。这里我们只看第一个，也就是npm run dev所执行的命令。

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

由这行命令我们看到，用到的构建工具是rollup，我们在上一节已经讲到了，我们只需要知道它是一个类似于webpack的打包工具就行了，
接着 scripts/config.js，就知道了需要运行scripts/config.js了
web-full-dev 是向scripts/config.js文件传递的参数

1.2 scripts/config.js

这个文件我们上一节也讲到了，他会根据传入参数的不同，而根据不同版本的Vue.js形成构建工具rollup的不同配置

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 (opts) {
  ...
}

if (process.env.TARGET) {
  module.exports = genConfig(builds[process.env.TARGET])
} else {
  exports.getBuild = name => genConfig(builds[name])
  exports.getAllBuilds = () => Object.keys(builds).map(name => genConfig(builds[name]))