@mpxjs/webpack-plugin 2.10.6-beta.1 → 2.10.6-beta.2

package/lib/dependencies/WriteVfsDependency.js

@@ -0,0 +1,46 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class WriteVfsDependency extends NullDependency {
+  constructor (filename, content) {
+    super()
+    this.filename = filename
+    this.content = content
+  }
+
+  get type () {
+    return 'mpx app entry'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const vfs = mpx.__vfs
+    if (vfs) {
+      vfs.writeModule(this.filename, this.content)
+    }
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.filename)
+    write(this.content)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.filename = read()
+    this.content = read()
+    super.deserialize(context)
+  }
+}
+
+WriteVfsDependency.Template = class WriteVfsDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(WriteVfsDependency, '@mpxjs/webpack-plugin/lib/dependencies/WriteVfsDependency')
+
+module.exports = WriteVfsDependency

package/lib/index.js

@@ -44,6 +44,7 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordLoaderContentDependency = require('./dependencies/RecordLoaderContentDependency')
 const RecordRuntimeInfoDependency = require('./dependencies/RecordRuntimeInfoDependency')
+const WriteVfsDependency = require('./dependencies/WriteVfsDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
@@ -654,6 +655,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordRuntimeInfoDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordRuntimeInfoDependency, new RecordRuntimeInfoDependency.Template())
 
+      compilation.dependencyFactories.set(WriteVfsDependency, new NullFactory())
+      compilation.dependencyTemplates.set(WriteVfsDependency, new WriteVfsDependency.Template())
+
       compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
     })
 
@@ -677,6 +681,8 @@ class MpxWebpackPlugin {
           componentsMap: {
             main: {}
           },
+          // 用于template模版获取父组件引用的自定义组件，目前仅输出web时下支持使用
+          parentLocalComponentsMap: {},
           // 静态资源(图片，字体，独立样式)等，依照所属包进行记录
           staticResourcesMap: {
             main: {}

package/lib/platform/index.js

@@ -9,6 +9,7 @@ module.exports = function getRulesRunner ({
   testKey,
   mainKey,
   waterfall,
+  moduleId,
   warn,
   error
 }) {
@@ -23,13 +24,14 @@ module.exports = function getRulesRunner ({
       wx: require('./json/wx')
     }
   }
-  const spec = specMap[type] && specMap[type][srcMode] && specMap[type][srcMode]({ warn, error })
+  const spec = specMap[type] && specMap[type][srcMode] && specMap[type][srcMode]({ warn, error, moduleId })
   if (spec && spec.supportedModes.indexOf(mode) > -1) {
     const normalizeTest = spec.normalizeTest
     const mainRules = mainKey ? spec[mainKey] : spec
     if (mainRules) {
       return function (input) {
-        return runRules(mainRules, input, { mode, data, meta, testKey, waterfall, normalizeTest })
+        const a = runRules(mainRules, input, { mode, data, meta, testKey, waterfall, normalizeTest })
+        return a
       }
     }
   }

package/lib/platform/template/wx/component-config/index.js

@@ -45,7 +45,7 @@ const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
 
-module.exports = function getComponentConfigs ({ warn, error }) {
+module.exports = function getComponentConfigs ({ warn, error, moduleId }) {
   /**
    * universal print for detail component warn or error
    * @param {object} config
@@ -116,7 +116,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     map({ print }),
     canvas({ print }),
     wxs({ print }),
-    template(),
+    template({ moduleId }),
     block(),
     icon(),
     webView({ print }),

package/lib/platform/template/wx/component-config/template.js

@@ -1,8 +1,13 @@
 const TAG_NAME = 'template'
 
-module.exports = function () {
+module.exports = function ({ moduleId }) {
   return {
     test: TAG_NAME,
+    web (tag, { el }) {
+      if (el.attrsMap[':is']) {
+        return 'component'
+      }
+    },
     props: [
       {
         test: 'data',
@@ -11,6 +16,26 @@ module.exports = function () {
             name,
             value: `{${value}}`
           }
+        },
+        web ({ value }) {
+          let bindValue = value
+          if (moduleId) {
+            const lastIndex = value.lastIndexOf('}}')
+            bindValue = value ? value.slice(0, lastIndex) + `, _data_v_id: '${moduleId}'}}` : `{{ _data_v_id: '${moduleId}' }}`
+          }
+          return {
+            name: 'v-bind',
+            value: bindValue
+          }
+        }
+      },
+      {
+        test: 'is',
+        web ({ value }) {
+          return {
+            name: ':is',
+            value: `'${value}'`
+          }
         }
       }
     ]

package/lib/platform/template/wx/index.js

@@ -3,11 +3,11 @@ const JSON5 = require('json5')
 const getComponentConfigs = require('./component-config')
 const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
-const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
+const { vbindMustache, parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
 const { dash2hump } = require('../../../utils/hump-dash')
 
-module.exports = function getSpec ({ warn, error }) {
+module.exports = function getSpec ({ warn, error, moduleId }) {
   function getRnDirectiveEventHandle (mode) {
     return function ({ name, value }, { eventRules, el }) {
       const match = this.test.exec(name)
@@ -68,6 +68,13 @@ module.exports = function getSpec ({ warn, error }) {
     postProps: [
       {
         web ({ name, value }) {
+          if (name === 'v-bind') {
+            const vbindValue = vbindMustache(value)
+            return {
+              name,
+              value: vbindValue
+            }
+          }
           const parsed = parseMustacheWithContext(value)
           if (name.startsWith('data-')) {
             return {
@@ -567,6 +574,6 @@ module.exports = function getSpec ({ warn, error }) {
       ]
     }
   }
-  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error }).concat({}), spec)
+  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error, moduleId }).concat({}), spec)
   return spec
 }

package/lib/runtime/optionProcessor.js

@@ -79,7 +79,7 @@ registered in parent context!`)
         transitionName: ''
       }
     }
-    if (!global.__mpx.config.webConfig.disablePageTransition) {
+    if (!global.__mpx.config.webConfig?.disablePageTransition) {
       option.watch = {
         $route: {
           handler () {
@@ -161,7 +161,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
         redirect: '/' + firstPage
       })
     }
-    const webRouteConfig = global.__mpx.config.webConfig.routeConfig || global.__mpx.config.webRouteConfig
+    const webRouteConfig = global.__mpx.config.webConfig?.routeConfig || global.__mpx.config.webRouteConfig
     global.__mpxRouter = option.router = new VueRouter(extend({ routes }, webRouteConfig))
     let mpxStackPath = []
     if (isBrowser) {

package/lib/template-compiler/compiler.js

@@ -16,6 +16,7 @@ const setBaseWxml = require('../runtime-render/base-wxml')
 const { parseExp } = require('./parse-exps')
 const shallowStringify = require('../utils/shallow-stringify')
 const { isReact, isWeb } = require('../utils/env')
+const getTemplateContent = require('../utils/get-template-content')
 
 const no = function () {
   return false
@@ -638,7 +639,7 @@ function parse (template, options) {
   componentGenerics = options.componentGenerics || {}
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
-  usingComponents = Object.keys(options.usingComponentsInfo)
+  usingComponents = Object.keys(options.usingComponentsInfo || {})
   usingComponentsInfo = options.usingComponentsInfo
 
   const _warn = content => {
@@ -661,6 +662,7 @@ function parse (template, options) {
     srcMode,
     type: 'template',
     testKey: 'tag',
+    moduleId,
     data: {
       usingComponents
     },
@@ -689,6 +691,7 @@ function parse (template, options) {
     root = currentParent = getVirtualHostRoot(options, meta)
     stack.push(root)
   }
+  options.template = template // processTemplate时需要对template(只用于处理含name的情况)做截取
 
   parseHTML(template, {
     warn: warn$1,
@@ -721,6 +724,7 @@ function parse (template, options) {
 
       currentParent.children.push(element)
       element.parent = currentParent
+
       processElement(element, root, options, meta)
 
       tagNames.add(element.tag)
@@ -1426,7 +1430,6 @@ function processEvent (el, options) {
           }
         }
       })
-
       addAttrs(el, [
         {
           name: resultName || config[mode].event.getEvent(type),
@@ -1462,6 +1465,13 @@ function wrapMustache (val) {
   return val && !tagRE.test(val) ? `{{${val}}}` : val
 }
 
+function vbindMustache (val) {
+  const bindREG = /\{\{((?:.|\n|\r|\.{3})+?)\}\}(?!})/
+  const match = bindREG.exec(val) || []
+  const matchStr = match[1]?.trim()
+  return matchStr ? `{${matchStr}}` : val
+}
+
 function parseOptionalChaining (str) {
   const wxsName = `${optionalChainWxsName}.g`
   let optionsRes
@@ -2302,7 +2312,7 @@ function processExternalClasses (el, options) {
     let classNames = classLikeAttrValue.split(/\s+/)
     let hasExternalClass = false
     classNames = classNames.map((className) => {
-      if (options.externalClasses.includes(className)) {
+      if (options.externalClasses?.includes(className)) {
         hasExternalClass = true
         return `($attrs[${stringify(className)}] || '')`
       }
@@ -2345,12 +2355,12 @@ function processExternalClasses (el, options) {
 }
 
 function processScoped (el) {
-  if (hasScoped && isRealNode(el)) {
+  if (hasScoped && isRealNode(el) && (isWeb(mode) && el.tag !== 'component')) { // 处理web下 template第一个元素不设置mpx-app-scope
     const rootModuleId = ctorType === 'component' ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
-      value: `${staticClass || ''} ${moduleId} ${rootModuleId}`
+      value: `${staticClass || ''} ${moduleId || ''} ${rootModuleId}`
     }])
   }
 }
@@ -2449,7 +2459,7 @@ function getVirtualHostRoot (options, meta) {
         const rootView = createASTElement('view', [
           {
             name: 'class',
-            value: `${MPX_ROOT_VIEW} host-${moduleId}`
+            value: `${MPX_ROOT_VIEW} ${moduleId ? 'host-' + moduleId : ''}` // 解决template2vue中拿不到moduleId的情况
           },
           {
             name: 'v-on',
@@ -2528,8 +2538,33 @@ function processTemplate (el) {
   }
 }
 
-function postProcessTemplate (el) {
+function processImport (el, meta) { // 收集import引用的地址
+  if (el.tag === 'import' && el.attrsMap.src) {
+    if (!meta.templateSrcList) {
+      meta.templateSrcList = []
+    }
+    if (!meta.templateSrcList.includes(el.attrsMap.src)) {
+      meta.templateSrcList.push(el.attrsMap.src)
+    }
+  }
+}
+
+function postProcessTemplate (el, meta, options) {
   if (el.isTemplate) {
+    if (mode === 'web') {
+      if (!meta.inlineTemplateMap) {
+        meta.inlineTemplateMap = {}
+      }
+      const name = el.attrsMap.name // 行内的template有name就收集template的内容和给内容生成一个地址
+      if (name) {
+        const content = getTemplateContent(options.template, name)
+        const filePath = options.filePath.replace(/.mpx$/, `-${name}.wxml`)
+        meta.inlineTemplateMap[name] = {
+          filePath,
+          content
+        }
+      }
+    }
     processingTemplate = false
     return true
   }
@@ -2679,6 +2714,7 @@ function processMpxTagName (el) {
 }
 
 function processElement (el, root, options, meta) {
+  const initialTag = el.tag // 预存，在这个阶段增加_fakeTemplate值会影响web小程序元素trans web元素
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
   if (el._matchStatus === statusEnum.MISMATCH) {
@@ -2705,10 +2741,17 @@ function processElement (el, root, options, meta) {
   const transAli = mode === 'ali' && srcMode === 'wx'
 
   if (isWeb(mode)) {
+    if (initialTag === 'block') {
+      el._fakeTemplate = true // 该值是在template2vue中处理block转换的template的情况
+    }
     // 收集内建组件
     processBuiltInComponents(el, meta)
     // 预处理代码维度条件编译
     processIfWeb(el)
+    // 预处理template逻辑
+    processTemplate(el)
+    // 预处理import逻辑
+    processImport(el, meta)
     processScoped(el)
     processEventWeb(el)
     // processWebExternalClassesHack(el, options)
@@ -2771,8 +2814,9 @@ function processElement (el, root, options, meta) {
 function closeElement (el, options, meta) {
   postProcessAtMode(el)
   postProcessWxs(el, meta)
-
   if (isWeb(mode)) {
+    // 处理web下template逻辑
+    postProcessTemplate(el, meta, options)
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
     return
@@ -2783,7 +2827,7 @@ function closeElement (el, options, meta) {
     return
   }
 
-  const isTemplate = postProcessTemplate(el) || processingTemplate
+  const isTemplate = postProcessTemplate(el, meta) || processingTemplate
   if (!isTemplate) {
     if (!isNative) {
       postProcessComponentIs(el, (child) => {
@@ -2905,6 +2949,11 @@ function serialize (root) {
           result += node.text
         }
       }
+      if (mode === 'web') {
+        if ((node.tag === 'template' && node.attrsMap && node.attrsMap.name) || node.tag === 'import') {
+          return result
+        }
+      }
 
       if (node.type === 1) {
         if (node.tag !== 'temp-node') {
@@ -3209,6 +3258,7 @@ module.exports = {
   genNode,
   makeAttrsMap,
   stringifyAttr,
+  vbindMustache,
   parseMustache,
   parseMustacheWithContext,
   stringifyWithResolveComputed,

package/lib/utils/get-template-content.js

@@ -0,0 +1,47 @@
+/*
+ 对template.wxml文件做截取
+ @source原始小程序文件
+ @name 要匹配的该name的template
+ */
+module.exports = function (source, name) {
+  // 使用正则表达式匹配具有 name 的 template 标签及其所有子元素
+  // 正则表达式使用非贪婪匹配来递归匹配嵌套的 template
+  const regex = new RegExp(`(<template[^>]*\\bname=["|']${name}["|'][^>]*>).*?`, 'g')
+
+  let startIndex = 0
+  let endIndex = 0
+  const match = regex.exec(source)
+  // 逐个处理匹配到的 template 标签及其内容
+  if (match) {
+    const matchRes = match[0]
+    const reg = /<\/?template\s*[^>]*>/g
+    let n = 0
+    startIndex = match.index
+    endIndex = startIndex + matchRes.length
+    let html = source.slice(endIndex)
+    while (html) {
+      const matchRes = html.match(reg)
+      if (matchRes.length) {
+        const matchTemp = matchRes[0]
+        const matchIndex = html.indexOf(matchTemp)
+        const matchLength = matchTemp.length
+        const cutLength = matchIndex + matchLength
+        if (matchTemp.startsWith('</template>')) {
+          if (n === 0) {
+            endIndex += cutLength
+            break
+          } else {
+            n--
+          }
+        } else {
+          n++
+        }
+        endIndex += cutLength
+        html = html.slice(cutLength)
+      }
+    }
+  } else {
+    return ''
+  }
+  return source.slice(startIndex, endIndex)
+}

package/lib/web/index.js

@@ -108,6 +108,8 @@ module.exports = function ({
         builtInComponentsMap: templateRes.builtInComponentsMap,
         genericsInfo: templateRes.genericsInfo,
         wxsModuleMap: templateRes.wxsModuleMap,
+        templateSrcList: templateRes.templateSrcList,
+        inlineTemplateMap: templateRes.inlineTemplateMap,
         localComponentsMap: jsonRes.localComponentsMap
       }, callback)
     }

package/lib/web/processScript.js

@@ -3,6 +3,8 @@ const loaderUtils = require('loader-utils')
 const normalize = require('../utils/normalize')
 const shallowStringify = require('../utils/shallow-stringify')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const wxmlTemplateLoader = normalize.lib('web/wxml-template-loader')
+const WriteVfsDependency = require('../dependencies/WriteVfsDependency')
 const {
   buildComponentsMap,
   getRequireScript,
@@ -22,18 +24,20 @@ module.exports = function (script, {
   builtInComponentsMap,
   genericsInfo,
   wxsModuleMap,
+  templateSrcList,
+  inlineTemplateMap,
   localComponentsMap
 }, callback) {
-  const { projectRoot, appInfo, webConfig } = loaderContext.getMpx()
+  const { projectRoot, appInfo, webConfig, __vfs: vfs, parentLocalComponentsMap } = loaderContext.getMpx()
 
   let output = '/* script */\n'
-
   let scriptSrcMode = srcMode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
     script = { tag: 'script' }
   }
+
   output += genComponentTag(script, {
     attrs (script) {
       const attrs = Object.assign({}, script.attrs)
@@ -58,17 +62,36 @@ module.exports = function (script, {
           content += `  wxsModules.${module} = ${expression}\n`
         })
       }
-
+      content += 'const templateModules = {}\n'
+      if (templateSrcList?.length) { // import标签处理
+        templateSrcList?.forEach((item) => {
+          content += `
+          const tempLoaderResult = require(${stringifyRequest(this, `!!${wxmlTemplateLoader}!${item}`)})\n
+          Object.assign(templateModules, tempLoaderResult)\n`
+        })
+      }
+      // 把wxml要的localComponentsMap merge到parentLocalComponentsMap中这样在 template2vue中就可以拿到对应的值
+      Object.assign(parentLocalComponentsMap, localComponentsMap)
       // 获取组件集合
       const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig })
-
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
         Object.assign(pageConfig, jsonConfig)
         delete pageConfig.usingComponents
       }
-
+      if (inlineTemplateMap) { // 处理行内template(只有属性为name的情况)
+        const inlineTemplateMapLists = Object.keys(inlineTemplateMap)
+        if (inlineTemplateMapLists.length) {
+          inlineTemplateMapLists.forEach((name) => {
+            const { filePath, content } = inlineTemplateMap[name]
+            loaderContext._module.addPresentationalDependency(new WriteVfsDependency(filePath, content)) // 处理缓存报错的情况
+            vfs.writeModule(filePath, content) // 截取template写入文件
+            const expression = `getComponent(require(${stringifyRequest(loaderContext, `${filePath}?is=${name}&localComponentsMap=${encodeURIComponent(JSON.stringify(localComponentsMap))}&isTemplate`)}))`
+            componentsMap[name] = expression
+          })
+        }
+      }
       content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, webConfig, hasApp })
       content += getRequireScript({ ctorType, script, loaderContext })
       content += `
@@ -78,7 +101,7 @@ module.exports = function (script, {
     outputPath: ${JSON.stringify(outputPath)},
     pageConfig: ${JSON.stringify(pageConfig)},
     // @ts-ignore
-    componentsMap: ${shallowStringify(componentsMap)},
+    componentsMap: Object.assign(${shallowStringify(componentsMap)}, templateModules),
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
     wxsMixin: getWxsMixin(wxsModules),
@@ -87,7 +110,6 @@ module.exports = function (script, {
       return content
     }
   })
-
   callback(null, {
     output
   })

package/lib/web/processTemplate.js

@@ -31,7 +31,7 @@ module.exports = function (template, {
   const { resourcePath, rawResourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
 
-  let wxsModuleMap, genericsInfo
+  let wxsModuleMap, genericsInfo, inlineTemplateMap, templateSrcList
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
@@ -54,7 +54,6 @@ module.exports = function (template, {
     if (template.lang) {
       return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans web mode temporarily, we will support it in the future!'))
     }
-
     output += genComponentTag(template, (template) => {
       if (ctorType === 'app') {
         return template.content
@@ -104,6 +103,12 @@ module.exports = function (template, {
             wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
           }
         }
+        if (meta.inlineTemplateMap) {
+          inlineTemplateMap = meta.inlineTemplateMap
+        }
+        if (meta.templateSrcList?.length) {
+          templateSrcList = meta.templateSrcList
+        }
         if (meta.builtInComponentsMap) {
           Object.keys(meta.builtInComponentsMap).forEach((name) => {
             builtInComponentsMap[name] = {
@@ -114,15 +119,16 @@ module.exports = function (template, {
         if (meta.genericsInfo) {
           genericsInfo = meta.genericsInfo
         }
-        return templateCompiler.serialize(root)
+        return templateCompiler.serialize(root, moduleId) // 增加moduleId给到template2vue拿到正确的scopedId
       }
     })
     output += '\n'
   }
-
   callback(null, {
     output,
     builtInComponentsMap,
+    inlineTemplateMap,
+    templateSrcList,
     genericsInfo,
     wxsModuleMap
   })

package/lib/web/template2vue.js

@@ -0,0 +1,280 @@
+const templateCompiler = require('../template-compiler/compiler')
+const parseRequest = require('../utils/parse-request')
+const addQuery = require('../utils/add-query')
+const { buildComponentsMap } = require('./script-helper')
+const loaderUtils = require('loader-utils')
+const normalize = require('../utils/normalize')
+const domTagConfig = require('../utils/dom-tag-config')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const shallowStringify = require('../utils/shallow-stringify')
+const { stringifyRequest } = require('./script-helper')
+const parseQuery = require('loader-utils').parseQuery
+const wxmlTemplateLoader = normalize.lib('web/wxml-template-loader')
+
+const getRefVarNames = function (str = '', discardProp) { // 获取元素属性上用到的动态数据keyname
+  const regex = /\(([a-zA-Z_$]\w*)\)/g
+  const matches = str.match(regex) || []
+  const variableNames = []
+  matches.forEach(name => {
+    const getName = /\((\w+)\)/.exec(name)
+    if (!discardProp.includes(getName[1]) && getName[1]) {
+      variableNames.push(getName[1].trim())
+    }
+  })
+  return variableNames
+}
+
+const getTextVarName = function (str = '', discardProp) { // 获取文本中的动态数据keyname
+  const regex = /\{\{([^{}]+?)(?:\..*?)?\}\}/g
+  const variables = []
+  let match
+
+  while ((match = regex.exec(str)) !== null) {
+    const inner = match[1] // 匹配 {{...}} 内部内容
+    const varName = inner.split('.')[0]
+    if (!discardProp.includes(varName) && varName) {
+      variables.push(varName.trim())
+    }
+  }
+  return variables
+}
+
+// 所有的props是在遍历模版的时候收集的，需要把true/false/for上面定义的item index剔除掉
+const addDiscardProp = function (attrList, discardProp) {
+  for (let i = 0; i < attrList.length; i++) {
+    if (attrList[i].name === 'v-for') {
+      const regex = /\(([^)]+)\)/
+      const match = attrList[i].value?.match(regex)
+      if (match) {
+        const discardValue = match[1].split(',').map(s => s.trim()) || []
+        discardProp.push(...discardValue)
+      }
+    }
+  }
+}
+
+const getEventName = function (eventStr = '') { // 获取事件用到的动态数据keyname 返回数组是避免将空值写入prop
+  const match = eventStr.match(/\[\[\s*"([^"]*)"\s*\]\]/)
+  if (match) {
+    const extractedValue = match[1]
+    const trimmedValue = extractedValue
+    return [trimmedValue]
+  }
+  return []
+}
+
+module.exports = function (content) {
+  const mpx = this.getMpx()
+  const {
+    wxsContentMap,
+    projectRoot
+  } = mpx
+  this._compiler = true
+  const query = parseQuery(this.resourceQuery)
+  if (!query.is) {
+    return content
+  }
+  let parentLocalComponentsMap = {}
+  try {
+    parentLocalComponentsMap = JSON.parse(query.localComponentsMap) // 拿取父组件上面的所有本地组件
+  } catch (e) {}
+  const { resourcePath, rawResourcePath } = parseRequest(this.resource)
+  const props = ['_data_v_id']
+  const { root, meta } = templateCompiler.parse(content, { // 调用已有的parse方法处理模版
+    warn: (msg) => {
+      this.emitWarning(
+        new Error('[template compiler][' + this.resource + ']: ' + msg)
+      )
+    },
+    error: (msg) => {
+      this.emitError(
+        new Error('[template compiler][' + this.resource + ']: ' + msg)
+      )
+    },
+    isTemp2vue: true,
+    mode: 'web',
+    srcMode: 'wx',
+    filePath: resourcePath,
+    usingComponents: []
+  })
+  const builtInComponentsMap = {}
+  if (meta.builtInComponentsMap) {
+    Object.keys(meta.builtInComponentsMap).forEach((name) => {
+      builtInComponentsMap[name] = {
+        resource: addQuery(meta.builtInComponentsMap[name], { isComponent: true })
+      }
+    })
+  }
+
+  if (meta.wxsContentMap) {
+    for (const module in meta.wxsContentMap) {
+      wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
+    }
+  }
+  const eventReg = /^@[a-zA-Z]+/
+  let isFindRoot = false
+  const componentNames = [] // 记录引用多少个组件
+  const localComponentsTags = []
+  function serialize (root) {
+    function walk (node, discardProp) {
+      let result = ''
+      if (node) {
+        if (node.type === 3) {
+          if (node.isComment) {
+            result += '<!--' + node.text + '-->'
+          } else {
+            const text = getTextVarName(node.text, discardProp) || []
+            props.push(...text)
+            result += node.text
+          }
+        }
+        if (node.type === 1) {
+          if (node.tag === 'wxs' || node.tag === 'import') { // wxml文件里不支持import wxs后续支持
+            return ''
+          } else if (node.tag !== 'temp-node') {
+            if (node.tag === 'component') { // 提前处理component上的bind逻辑，确保传入_data_v_id
+              if (!node.attrsMap['v-bind']) {
+                node.attrsList.push({
+                  name: 'v-bind',
+                  value: '{_data_v_id}'
+                })
+              } else {
+                node.attrsList.forEach(function (attr) {
+                  if (attr.name === 'v-bind') {
+                    attr.value = attr.value.replace('}', ', _data_v_id}')
+                  }
+                })
+              }
+            }
+            if (node.tag === 'template' && !node._fakeTemplate) {
+              if (node.attrsMap.name) { // template name处理逻辑
+                if (isFindRoot) {
+                  componentNames.push(node.attrsMap.name)
+                  return ''
+                }
+                isFindRoot = true
+                result += '<' + node.tag
+              } else { // 其他template逻辑全部丢弃
+                return ''
+              }
+            } else {
+              const { isBuildInTag, isOriginTag } = domTagConfig
+              if (!isBuildInTag(node.tag) && !isOriginTag(node.tag)) {
+                localComponentsTags.push(node.tag)
+              }
+              result += '<' + node.tag
+              const tagProps = []
+              addDiscardProp(node.attrsList, discardProp)
+              node.attrsList.forEach(function (attr) {
+                if (attr.name === ':class') {
+                  if (attr.value.trim().startsWith('[') && attr.value.trim().endsWith(']')) { // 数组情况下_data_v_id直接插在最后面
+                    attr.value = attr.value.replace(']', ', _data_v_id]')
+                  } else if (attr.value) {
+                    attr.value = `[${attr.value}, _data_v_id]` // 非数组情况下包装成数组后_data_v_id直接插在最后面
+                  }
+                }
+                const value = attr.value
+                if (eventReg.exec(attr.name)) { // 事件
+                  const result = getEventName(attr.value)
+                  tagProps.push(...result)
+                } else { // 属性
+                  const result = getRefVarNames(value, discardProp)
+                  tagProps.push(...result)
+                }
+                result += ' ' + attr.name
+                if (value != null) {
+                  result += '=' + templateCompiler.stringifyAttr(value)
+                }
+              })
+              props.push(...tagProps)
+            }
+            if (node.unary) {
+              result += '/>'
+            } else {
+              result += '>'
+              node.children.forEach(function (child) {
+                result += walk(child, discardProp)
+              })
+              result += '</' + node.tag + '>'
+            }
+          } else {
+            node.children.forEach(function (child) {
+              result += walk(child, discardProp)
+            })
+          }
+        }
+      }
+      discardProp.splice(2) // 清理掉本次循环记录的数据避免污染其他同级的props判断
+      return result
+    }
+    return walk(root, ['true', 'false'])
+  }
+  const tempCompMaps = []
+  const path = this.resourcePath || ''
+  const template = serialize(root)
+  componentNames.forEach((item) => {
+    tempCompMaps[item] = {
+      resource: `${path.replace(query.is, item)}?is=${item}&isTemplate`
+    }
+  })
+
+  const localComponentsMap = {}
+  localComponentsTags.forEach((item) => { // 做一次过滤避免不必要的自定义组件加载
+    if (parentLocalComponentsMap[item]) {
+      localComponentsMap[item] = parentLocalComponentsMap[item]
+    }
+  })
+  const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext: this, jsonConfig: {} })
+  let script = `\n<script>\n
+    import proxyEventMixin from '@mpxjs/core/src/platform/builtInMixins/proxyEventMixin.web.js'
+    import MpxProxy from '@mpxjs/core/src/core/proxy.js'
+    const {getComponent} = require(${stringifyRequest(this, optionProcessorPath)})\n`
+  script += 'const templateModules = {}\n'
+  meta.templateSrcList?.forEach((item) => {
+    script += `
+          const tempLoaderResult = require(${stringifyRequest(this, `!!${wxmlTemplateLoader}!${item}`)})\n
+          Object.assign(templateModules, tempLoaderResult)\n`
+  })
+
+  // 注入wxs模块
+  const wxsModuleMap = meta.wxsModuleMap
+  script += '  var wxsModules = {}\n'
+  const finalProp = [...(new Set(props))]
+  if (wxsModuleMap) {
+    Object.keys(wxsModuleMap).forEach((module) => {
+      const src = loaderUtils.urlToRequest(wxsModuleMap[module], projectRoot)
+      const expression = `require(${stringifyRequest(this, src)})`
+      const index = finalProp.indexOf(module)
+      if (index > -1) { // 干掉模版中收集的wxs的字段
+        finalProp.splice(index, 1)
+      }
+      script += `  wxsModules.${module} = ${expression}\n`
+    })
+  }
+  script += `export default {
+      name: '${query.is}',
+      props: ${JSON.stringify(finalProp)},
+      mixins: [proxyEventMixin()],
+      beforeCreate () {
+        this.__mpxProxy = new MpxProxy({}, this, true)
+        this.__mpxProxy.created()
+        Object.keys(wxsModules).forEach((key) => {
+          if (key in this) {
+            console.error('[Mpx runtime error]: The wxs module key ['+key+'}] exist in the component/page instance already, please check and rename it!')
+          } else {
+            this[key] = wxsModules[key]
+          }
+        })
+      },
+      components: Object.assign(${shallowStringify(componentsMap)}, templateModules),
+    }
+  </script>`
+  const text = template + script
+  if (query.type === 'template') {
+    return template
+  } else if (query.type === 'script') {
+    return script
+  } else {
+    return text
+  }
+}

package/lib/web/wxml-template-loader.js

@@ -0,0 +1,29 @@
+const normalize = require('@mpxjs/webpack-plugin/lib/utils/normalize')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const shallowStringify = require('../utils/shallow-stringify')
+const getTemplateContent = require('../utils/get-template-content')
+const { stringifyRequest } = require('@mpxjs/webpack-plugin/lib/web/script-helper')
+const WriteVfsDependency = require('../dependencies/WriteVfsDependency')
+
+module.exports = function (content) {
+  const regex = /<template[^>]*\sname\s*=\s*"([^"]*)"[^>]*>/g
+  const mpx = this.getMpx()
+  let match
+  const templateNames = []
+
+  while ((match = regex.exec(content)) !== null) {
+    templateNames.push(match[1])
+  }
+  const templateMaps = {}
+  templateNames.forEach((name, index) => {
+    const cutContent = getTemplateContent(content, name)
+    const resourcePath = this.resourcePath.replace(/.wxml$/, `-${name}.wxml`)
+    this._module.addPresentationalDependency(new WriteVfsDependency(resourcePath, cutContent))
+    mpx.__vfs.writeModule(resourcePath, cutContent)
+    templateMaps[name] = `getComponent(require(${stringifyRequest(this, `${resourcePath}?is=${name}&localComponentsMap=${encodeURIComponent(JSON.stringify(mpx.parentLocalComponentsMap))}&isTemplate`)}))` // template2vue是在外部配置没办法拿到parentLocalComponentsMap，所以通过query传递
+  })
+  return `
+  const {getComponent} = require(${stringifyRequest(this, optionProcessorPath)})\n
+  module.exports = ${shallowStringify(templateMaps)}
+  `
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.6-beta.1",
+  "version": "2.10.6-beta.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"