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

先简单介绍一下为什么要研究这个事情的背景，我们希望可以基于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的构建有兴趣，也可以摸着上述的脉络，阅读一下，整个库打包的路径，对于阅读源码，有极大的帮助。