由构建读懂Vue2.0，为自己的定制实现添砖加瓦！

Tecode 发布于2019-06-25 11:04 / 1510人阅读

摘要：先简单介绍一下为什么要研究这个事情的背景，我们希望可以基于定制一份自己的实现，的融合程度已经到达了的仓库，学会这个，也有助于摸清楚的脉络。

先简单介绍一下为什么要研究这个事情的背景，我们希望可以基于weex framework.js定制一份自己的实现，weex的融合程度已经到达了Vue的仓库，学会这个，也有助于摸清楚Vue的脉络。

先从package.json开始，从scripts里能找出五处跟构建weex有关系的钩子，分别是：

"dev:weex": "TARGET=weex-framework rollup -w -c build/config.js", 
"dev:weex:compiler": "TARGET=weex-compiler rollup -w -c build/config.js",    
"build": "node build/build.js",    
"build:weex": "npm run build -- weex-vue-framework,weex-template-compiler",    
"test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.json",    
"release:weex": "bash build/release-weex.sh",

不管是dev环境还是build环境都指向了build/build.js和build/config.js这两处文件，而release指向了一段shell脚本，先从release开始看看这段脚本有什么作用：

set -e
CUR_VERSION=`node build/get-weex-version.js -c`
NEXT_VERSION=`node build/get-weex-version.js`
echo "Current: $CUR_VERSION"
read -p "Enter new version ($NEXT_VERSION): " -n 1 -r
if ! [[ -z $REPLY ]]; then
  NEXT_VERSION=$REPLY
fi
read -p "Releasing weex-vue-framework@$NEXT_VERSION - are you sure? (y/n) " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
  echo "Releasing weex-vue-framework@$NEXT_VERSION ..."
  npm run lint
  npm run flow
  npm run test:weex 
  # build
  WEEX_VERSION=$NEXT_VERSION npm run build:weex  
  # update package
  cd packages/weex-vue-framework
  npm version $NEXT_VERSION
  npm publish  cd -  cd packages/weex-template-compiler
  npm version $NEXT_VERSION
  npm publish  cd -  
  # commit
  git add src/entries/weex*
  git add packages/weex*
  git commit -m "[release] weex-vue-framework@$NEXT_VERSION"fi

从脉络上来看，前面三项的lint flow test都是次要的，主要的是从npm run build:weex开始，看来release也是走到了build/build.js中。

继续阅读build/build.js文件，东西不多，只是一段构建脚本，通过process.argv拿到运行的参数，然后使用rollup来启动构建。在这个文件中，有这么一行代码：let builds = require("./config.js").getAllBuilds()，暂停一下，继续阅读build/config.js文件，可以看到大段的配置信息，找到跟weex相关的有三个，分别是"weex-factory’，"weex-framework’，"weex-compiler’，而且也可以从entry中找到入口文件，有了入口就比较好办了。

（建议：第一个要学的东西是rollup构建）

从构建脚本读起来，它使用Rollup 构建，起始位置从entries开始，直接载入了weex/framework，在这里引用vue-runtime（core/index.js），看起来整段脚本使用ES6编写，而且其内部所引用的都是短路径，猜测应该是起了别名的，回到build目录中，可以看见有alias.js文件，这里可以看到很多有用的别名：

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

（注明：这个比React扁平化的构建方式，更易读）

既然找到了weex framework入口文件，在阅读这个文件中，找到了几行关键性的代码，我判断它应该与定制实现framework有关系。

const VueFactory = require("./factory")

在 createVueModuleInstance 函数中的：

const exports = {}
VueFactory(exports, renderer)
const Vue = exports.Vue

在createInstance函数中的：

Object.freeze(weexInstanceVar)// Each instance has a independent `Vue` mdoule instance
const Vue = instance.Vue = createVueModuleInstance(instanceId, moduleGetter)
const instanceVars = Object.assign({
  Vue,
  weex: weexInstanceVar,    // deprecated
  __weex_require_module__: weexInstanceVar.requireModule // eslint-disable-line
}, timerAPIs)
callFunction(instanceVars, appCode)

这是weex能运行Vue的关键之处，那么其实问题也来，在platforms/weex目录下并没有明显的./factory 文件，那么这个是从哪里来的呢？

（注明：到这里先暂停一下，不管这个./factory是从哪里来的，且继续往下看。）

在createInstance函数中，会执行createVueModuleInstance来挂起Vue的引用，而createVueModuleInstance函数里，看起来weex团队用到了Vue.mixin来扩展。

（建议：第二个要学的内容，Vue.mixin是什么鬼）

而createInstance函数中注入了一个instanceVars，这才是在Native端weex容器中能真正使用的对象。

（建议：第三个要学的内容，freeze是什么鬼，assign是什么鬼）

至此，整个脉络就比较清晰了，后期考虑好之后我们可以很方便的实现定制。

不过，回到上面的VueFactory到底是什么？只能从build/build.js文件里着手了，如果它也是一个构建后的平行“文件”，这个极有可能就是指向vue-runtime.js文件的，（猜测），不过看起来好像还有一些其他的东西。从release shell脚本处理可以看出来，它执行了npm run build:weex，而这个npm 钩子实际上是传入了[ "weex-vue-framework", "weex-template-compiler" ]给build/build.js文件，通过这个解析能得到config.js里的配置清单，之所以需要传入一个exports，是因为最后这个VueFactory里会最终存在exports.Vue = Vue$2来进行交换，这样，就比较明了了。

大家要是对Vue的构建有兴趣，也可以摸着上述的脉络，阅读一下，整个库打包的路径，对于阅读源码，有极大的帮助。

服务器托管云服务器 vue2.0 cdn 构建自己的云服务器怎么构建自己的云服务器怎样构建自己的云服务器

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

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

由构建读懂Vue2.0，为自己的定制实现添砖加瓦！

摘要：先简单介绍一下为什么要研究这个事情的背景，我们希望可以基于定制一份自己的实现，的融合程度已经到达了的仓库，学会这个，也有助于摸清楚的脉络。先简单介绍一下为什么要研究这个事情的背景，我们希望可以基于weex framework.js定制一份自己的实现，weex的融合程度已经到达了Vue的仓库，学会这个，也有助于摸清楚Vue的脉络。先从package.json开始，从scripts里能...

ShowerSun 2019-06-25 15:58 评论0 收藏0
一文读懂TOGAF企业架构

摘要：虽然是一个可用于开发和实施企业系统，流程和结构的框架，但可用作可视建模语言，可用于创建描述。验证业务上下文并创建架构工作声明业务架构开发业务架构。 TOGAF ®，由The Open Group的标准，是一个成熟的企业架构方法和框架由世界领先的组织使用，以提高业务效率。它是最突出和最可靠的企业架构标准，可确保企业架构专业人员之间的一致标准，方法和通信。精通TOGAF标准的企业架构专业人...

cfanr 2019-08-23 18:34 评论0 收藏0
一文读懂TOGAF企业架构

摘要：虽然是一个可用于开发和实施企业系统，流程和结构的框架，但可用作可视建模语言，可用于创建描述。验证业务上下文并创建架构工作声明业务架构开发业务架构。 TOGAF ®，由The Open Group的标准，是一个成熟的企业架构方法和框架由世界领先的组织使用，以提高业务效率。它是最突出和最可靠的企业架构标准，可确保企业架构专业人员之间的一致标准，方法和通信。精通TOGAF标准的企业架构专业人...

JasinYip 2019-08-01 14:04 评论0 收藏0
Python和FFmpeg强强联合

摘要：核心子进程运行控制。由应用来看，关键是录制屏幕和录制摄像头，以及用快捷键控制在这两者之间切换。限制条件是超过三个月快捷键失效。实现分两步安装时在注册表特定位置，假如是，写入目录相关信息。在程序运行时，检测当前目录是否存在于注册表下。录制项目终于做完，不用总是提醒自己抓紧时间这样来想问题了。在完成之后带着一些满足感，回头看看哪些地方是需要改进的，哪些地方又是有更好的替代方案，自己又有哪...

ThreeWords 2019-07-30 16:55 评论0 收藏0
IaaS的演进！一文读懂裸金属和容器即服务

摘要：英特尔机架规模设计则能实现以机架为单位的软硬件解耦，为裸金属即服务提供容量更大的资源池，并可通过开放的和协议如和，高效发掘管理和调配这些资源。江湖上，一直流传着得IaaS（基础设施即服务），得公有云天下的说法。想握紧IaaS这柄云端杀手锏，大热的裸金属即服务和容器即服务，还不了解一下？它们为什么如此受人...

MadPecker 2019-04-25 16:21 评论0 收藏0