SFC 转化结果怎么转换成实例

[RonkTsang]

weex-loader：

var __vue_exports__, __vue_options__
var __vue_styles__ = []

/* styles */
__vue_styles__.push(require("!!../node_modules/weex-vue-loader/lib/style-loader!../node_modules/weex-vue-loader/lib/style-rewriter?id=data-v-dc790388!../node_modules/weex-vue-loader/lib/selector?type=styles&index=0!./hello.vue")
)

// __vue_styles__ 为一个数组
// 格式为：
// [ 
//   { 
//      className: { 
//         ...style 
//       }, 
//       className: {}
//    },
//   { ... }, ...
// ]

/* script */
__vue_exports__ = require("!!../node_modules/weex-vue-loader/lib/script-loader!../node_modules/weex-vue-loader/lib/selector?type=script&index=0!./hello.vue")

/* template */
var __vue_template__ = require("!!../node_modules/weex-vue-loader/lib/template-compiler?id=data-v-dc790388!../node_modules/weex-vue-loader/lib/selector?type=template&index=0!./hello.vue")
__vue_options__ = __vue_exports__ = __vue_exports__ || {}
if (
  typeof __vue_exports__.default === "object" ||
  typeof __vue_exports__.default === "function"
) {
if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
__vue_options__ = __vue_exports__ = __vue_exports__.default
}
if (typeof __vue_options__ === "function") {
  __vue_options__ = __vue_options__.options
}
__vue_options__.__file = "D:\\Viola\\webpack-v\\v-r-t\\webpack-test\\src\\hello.vue"
__vue_options__.render = __vue_template__.render
__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
__vue_options__._scopeId = "data-v-8229fd3a"
__vue_options__.style = __vue_options__.style || {}
__vue_styles__.forEach(function (module) {
  for (var name in module) {
    __vue_options__.style[name] = module[name]
  }
})

/*
循环将 所有的 class-style 保持在  __vue_options__.style
格式为：
{
  className: {  ...style  },
  className: {  ...style  }
}

后续可通过 vnode.ctx.$options.style 获取到，但设置 className 时抽取 style 加上 （setStyle）
*/

if (typeof __register_static_styles__ === "function") {
  __register_static_styles__(__vue_options__._scopeId, __vue_styles__)
}

module.exports = __vue_exports__

---

重要过程：

• 配置 转换成一个构造器，继承于 Vue，接着作为 new Vue( ) 的参数之一， vnode.componentOptions.Ctor

function createComponentInstanceForVnode() 中 return new vnode.componentOptions.Ctor(options)

---

weex 的 style 转换

• Vue-template-compiler 中的 parse 方法将style 部分提出来

• Weex-style-rewriter

  通过 postCSS 转换为标准css样式表

• style-loader

  通过 genStyleString 方法转化为 json

  genStyleString 使用的是 weex-styler

• weex-styler

  • 引用 npm 包 css
  • parse 方法中 css.parse() 转换为了 CSS AST
  • 解析 AST，转化为 style object