Merge pull request #57 from mpvue/xt/dev

mpvue-loader 3.0

Author: Dewyzee

lib/mp-compiler/index.js

@@ -4,7 +4,7 @@ const fs = require('fs')
 const deepEqual = require('deep-equal')
 const compiler = require('mpvue-template-compiler')
 
-const { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents } = require('./parse')
+const { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents, createMPParser } = require('./parse')
 const { parseComponentsDeps: parseComponentsDepsTs } = require('./parse-ts')
 const { genPageML } = require('./templates')
 
@@ -151,11 +151,15 @@ function compileMP (content, mpOptioins) {
 
   const babelrc = getBabelrc(mpOptioins.globalBabelrc)
   // app入口进行全局component解析
-  const { metadata } = babel.transform(content, { extends: babelrc, plugins: isApp ? [parseConfig, parseGlobalComponents] : [parseConfig] })
-
+  const { metadata, code } = babel.transform(content, { extends: babelrc, plugins: isApp ? [parseConfig, createMPParser, parseGlobalComponents] : [parseConfig, createMPParser] })
+  if (code) {
+    content = code
+  }
+  if (!metadata.globalComponents) {
+    metadata.globalComponents = {}
+  }
   // metadata: config
   const { rootComponent, globalComponents: globalComps } = metadata
-
   if (isApp) {
     // 保存旧数据，用于对比
     const oldGlobalComponents = globalComponents

lib/mp-compiler/parse.js

@@ -2,6 +2,7 @@
 
 const generate = require('babel-generator').default
 const babelon = require('babelon')
+const t = require('babel-types')
 
 function getImportsMap (metadata) {
   let { importsMap } = metadata
@@ -59,7 +60,6 @@ const configVisitor = {
     if (!arg) {
       return
     }
-
     const v = arg.type === 'Identifier' ? importsMap[arg.name] : importsMap['App']
     metadata.rootComponent = v || importsMap['index'] || importsMap['main']
   }
@@ -68,6 +68,87 @@ function parseConfig (babel) {
   return { visitor: configVisitor }
 }
 
+function createMPParser () {
+  return {
+    visitor: {
+      // 将import Vue from 'vue' 替换为 import {Vue, createMP} from 'vue'
+      ImportDeclaration: function (path) {
+        if (path.node.specifiers && path.node.source && path.node.source.value === 'vue') {
+          const specifiersValue = path.node.specifiers[0].local.name
+          path.node.specifiers = [
+            t.importSpecifier(t.identifier(specifiersValue), t.identifier(specifiersValue)),
+            t.importSpecifier(t.identifier('createMP'), t.identifier('createMP'))
+          ]
+        }
+      },
+      // 处理const app = new Vue(App)
+      // 构造为 createMp({
+      //    mpType: App.mpType,
+      //    init(){
+      //       return new Vue(App)
+      //    }
+      // })
+      VariableDeclaration: function (path) {
+        if (path.node.declarations &&
+          t.isVariableDeclarator(path.node.declarations[0]) &&
+          t.isNewExpression(path.node.declarations[0].init) &&
+          t.isIdentifier(path.node.declarations[0].init.callee, { name: 'Vue' })
+        ) {
+          const fnExpression = t.functionExpression(
+            null,
+            [],
+            t.blockStatement(
+              [
+                t.returnStatement(
+                  t.newExpression(
+                    path.node.declarations[0].init.callee,
+                    path.node.declarations[0].init.arguments
+                  )
+                )
+              ]
+            )
+          )
+          // 构造createMP的options
+          const objExpression = t.objectExpression(
+            [
+              t.objectProperty(
+                t.identifier('mpType'),
+                t.MemberExpression(
+                  t.identifier(path.node.declarations[0].init.arguments[0].name),
+                  t.identifier('mpType')
+                )
+              ),
+              t.objectProperty(
+                t.identifier('init'),
+                fnExpression
+              )
+            ]
+          )
+          path.replaceWith(t.expressionStatement(
+            t.callExpression(
+              t.identifier('createMP'),
+              [
+                objExpression
+              ]
+            )
+          ))
+        }
+      },
+      // main.js中app.$mount()移除掉
+      ExpressionStatement: function (path) {
+        if (
+          path.parentPath.node.type === 'Program' &&
+          path.node.expression.callee &&
+          path.node.expression.callee.property &&
+          path.node.expression.callee.property.name === '$mount'
+        ) {
+          path.remove()
+        }
+      }
+    }
+  }
+}
+
 // 解析 components
 const traverseComponentsVisitor = {
   Property: function (path) {
@@ -133,4 +214,4 @@ function parseGlobalComponents (babel) {
 function clearGlobalComponents () {
   globalComponents = {}
 }
-module.exports = { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents }
+module.exports = { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents, createMPParser }

package.json

@@ -76,6 +76,7 @@
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
     "babel-preset-env": "^1.6.0",
+    "babel-types": "^6.26.0",
     "chai": "^4.1.0",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.12.6",