脚本宝典收集整理的这篇文章主要介绍了由构建读懂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的构建有兴趣，也可以摸着上述的脉络，阅读一下，整个库打包的路径，对于阅读源码，有极大的帮助。
以上是脚本宝典为你收集整理的由构建读懂Vue2.0，为自己的定制实现添砖加瓦！全部内容，希望文章能够帮你解决由构建读懂Vue2.0，为自己的定制实现添砖加瓦！所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。