Vue 源码解析-- 文件入口及分布

孙淑建发布于2019-08-26 14:06 / 2898人阅读

摘要：文件和指定了加载的入口文件，它们都指向运行时版的，一个包内同时发布了两种模块规范的版本。编译后生成的版本的代码。基于模块规范的使用语法书写的模块。

package.json 文件

//main和module指定了加载的入口文件，它们都指向运行时版的Vue，
// 一个包内同时发布了两种模块规范的版本。
"main": "dist/vue.runtime.common.js",   //编译后生成的 ES5 版本的代码。
"module": "dist/vue.runtime.esm.js",    //基于 ES6 模块规范的使用ES5语法书写的模块。
"script": {
    ...
    "dev": rollup -w -c scripts/config.js --environment TARGET:web-full-dev
    ...
}

scripts/config.js

if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}
const builds = {
    ...
    "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
      },
      ...
}
// process.env.TARGET 有值所以执行 web-full-dev

vue文件分布

compiler 编译器代码将template编译为render

core 核心代码

- components  全局组件 （只有keep-alive）
- global-api  静态属性 和方法
- instance 构造函数 放在Vue原型链上的属性和方法
- observer  双向绑定
- util 工具方法
- vdom 虚拟DOM

platforms 平台代码

server 服务端渲染

sfc 解析.vue 文件

share 通用代码

core/index

import Vue from "./instance/index"

  引入Vue的构造函数，在Vue.prototype上面挂载了两个只读属性$isServer和$ssrContext

GPU服务器海外云主机 vue源码 vue webrtc 源码 webrtc 源码分析入口分布式系统及云计算

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110057.html

实现element-ui的按需引入，按需打包加载

摘要：简单说明原理使用实现按需引入打包。这里采用多入口配置，实现各个功能模块分别打包成一个文件，并使用将样式进行抽离后，按入口进行打包为对应的文件。只要在指定入口名为。这个相关配置已经发布了包。简单说明原理：使用babel-plugin-component实现按需引入、打包。将webpack配置成多入口，保证最终打包的目录结构符合babel-plugin-component插件的要求，实...

TesterHome 2019-08-23 10:41 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
VUE源码--目录结构（一）

摘要：源码目录结构打包相关的配置文件，其中最重要的是。主要是根据不同的入口，打包为不同的文件。这个目录下的代码逻辑会把文件内容解析成一个的对象。源码目录结构 VUE 2.6.10 ├── scripts # 打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打包为不同的文件。 ├── dist # 打包之后文...

tuniutech 2019-08-23 16:31 评论0 收藏0