由构建读懂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的构建有兴趣,也可以摸着上述的脉络,阅读一下,整个库打包的路径,对于阅读源码,有极大的帮助。

IT文库 » 由构建读懂Vue2.0,为自己的定制实现添砖加瓦!
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址