Read Vue 2.0 from the build, and contribute to your customized implementation!

Time:2020-1-22

First, we will briefly introduce why we should study the background of this matter. We hope that we can customize our own implementation based on weex framework.js. The integration degree of weex has reached the warehouse of Vue. Learning this will help us to understand the context of Vue.

Starting from package.json, you can find five hooks related to the construction of weex in scripts, which are:

"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",

Both the dev environment and the build environment point to build / build.js and build / config.js, while release points to a shell script. Let’s start with release to see what the script does:

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 [email protected]$NEXT_VERSION - are you sure? (y/n) " -n 1 -r
echo
if [[ $REPLY =~ ^[Yy]$ ]]; then
  echo "Releasing [email protected]$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] [email protected]$NEXT_VERSION"fi

From the perspective of context, the lint flow tests of the first three items are all secondary, mainly starting from NPM run build: weex. It seems that release also goes to build / build.js.

Continue to read the build / build.js file, there is not much, just a build script, get the running parameters through process.argv, and then use rollup to start the build. In this file, there is a line of code: let builds = require (‘. / config. JS’). Getallbuilds(), pause for a while, continue reading the build / config.js file, you can see the configuration information of a large section, and find three related to weex, which are’ weex factory ‘,’ weex framework ‘,’ weex compiler ‘, and you can also find the entry file from the entry It’s easier to do.

(suggestion: the first thing to learn is roll up construction)

Read from the build script, it uses rollup to build, starting from entries, and directly loaded into the weex / framework. Here, it refers to Vue runtime (core / index. JS). It seems that the whole script is written with ES6, and the internal references are all short paths. Guess that it should be aliased. Back to the build directory, you can see the alias.js file, here you can See many useful aliases:

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')
}

(Note: This is easier to read than the flat construction of react)

Since I found the entry file of weex framework, I found several lines of key code in reading this file, and I judged that it should be related to the custom implementation framework.

const VueFactory = require('./factory')

In the createvuemoduleinstance function:

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

In the createinstance function:

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)

This is the key point for weex to run Vue. In fact, there is no obvious. / factory file in the platforms / weex directory. Where does this come from?

(Note: let’s pause here, no matter where this. / factory comes from, and keep looking down.)

In the createinstance function, createvuemoduleinstance is executed to suspend the reference of Vue. In the createvuemoduleinstance function, it seems that the weex team uses vue.mixin to extend.

(suggestion: the second thing to learn, what the devil is vue.mixin)

The createinstance function injects an instancevars, which is the object that can be used in the native weex container.

(suggestion: the third thing to learn, what is the ghost of freeze and what is the ghost of assign)

At this point, the whole context is relatively clear. After considering later, we can easily implement customization.

However, what is vuefactory back above? We can only start from the build / build.js file. If it is also a parallel “file” after construction, it is likely to point to the vue-runtime.js file (guess), but it seems that there are other things. From the release shell script processing, we can see that it executes NPM run build: weex, and this NPM hook actually passes in [‘weex Vue framework ‘,’weex template compiler’] to build / build.js file. Through this parsing, we can get the configuration list in config.js. The reason why we need to pass in an exports is that finally there will be exports.vue in this vuefactory =Vue $2 for exchange, so it’s clear.

If you are interested in the construction of Vue, you can also feel the above context and read the path of the whole library packaging, which is very helpful for reading the source code.

Recommended Today

Build HTTP service with C + + Mongoose

Mongoose source code address:https://github.com/cesanta/mo… Mongoose user manual:https://www.cesanta.com/devel… Mngoose set up HTTP service #include <string> #include “mongoose.h” using namespace std; static const char *s_http_port = “8000”; static void ev_handler(mg_connection *nc, int ev, void *ev_data) { struct http_message *hm = (struct http_message *) ev_data; if (ev == MG_EV_HTTP_REQUEST) { std::string uri; if (hm->uri.p && hm->uri.p[0] == ‘/’) […]