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

icepy
1,558 阅读5分钟

如图：从基础工具开始


先简单介绍一下为什么要研究这个事情的背景，我们希望可以基于weex framework.js定制一份自己的实现，自从Hanks（同事）提交了PR之后，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的构建有兴趣，也可以摸着上述的脉络，阅读一下，整个库打包的路径，对于阅读源码，有极大的帮助。


向狼叔学习，如果想深入沟通，获取最新消息，欢迎参加icepy的小密圈


人在囧途，编程之道。


  • 主要涵盖Vue，跨平台移动端技术（Weex），Python机器学习，全栈四个部分

  • 分享我的学习，职业经历，偶尔会发点感想，笔记

  • 每周分享两次专题“讨论”

  • 更有阿里全栈大神乔爷，小爝，justjavac，前端早读君，神秘Weex，创业者松哥，等大神陪伴，背景各不相同，会有火花哟

  • 优秀平台的内推机会，通过交流之后觉得你很靠谱，如果你也想换份工作，内推我们都很乐意帮忙

  • 提供一个平台，让圈友可以互相交流，分享


一年时限，门票：99¥，100以后恢复原价199¥/年



如果对weex有兴趣，点击阅读原文，进入国内最专业的 weex 论坛。^_^


你身边如果有朋友对混合领域（跨技术栈）或全栈感兴趣，可以转发给他们看哦，^_^先谢过啦。



更多精彩内容可关注我的个人微信公众号：搜索fed-talk或者扫描下列二维码，也欢迎您将它分享给自己的朋友。


avatar
文章
阅读
粉丝