@mpxjs/webpack-plugin 2.8.42 → 2.9.0-beta.1

package/lib/runtime/stringify.wxs

@@ -24,8 +24,9 @@ function objectKeys (obj) {
         var shift = false
         for (var i = 1; i < objStr.length - 1; i++) {
           var item = objStr[i]
+          var lastItem = objStr[i - 1]
           if (inKey) {
-            if (item === ':') {
+            if (item === ':' && lastItem === '"') {
               keys.push(key.slice(1, -1))
               key = ''
               inKey = false
@@ -93,18 +94,53 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
+var escapeMap = {
+  '(': '_pl_',
+  ')': '_pr_',
+  '[': '_bl_',
+  ']': '_br_',
+  '{': '_cl_',
+  '#': '_h_',
+  '!': '_i_',
+  '/': '_s_',
+  '.': '_d_',
+  ':': '_c_',
+  ',': '_2c_',
+  '%': '_p_',
+  // wxs can not use '\'' as key
+  // wxs环境中'\''!=="'"，此文件不能格式化，否则会导致程序错误
+  "'": '_q_',
+  // wxs can not use '"' as key
+  '"': '_dq_',
+  '+': '_a_',
+  '$': '_si_'
+}
+
+var escapeReg = genRegExp('[()[\]{}#!/.:,%\'"+$]', 'g')
+
+function mpEscape (str) {
+  return str.replace(escapeReg, function (match) {
+    if (escapeMap[match]) return escapeMap[match]
+    // fix wxs can not use '}' as key
+    if (match === '}') return '_cr_'
+    // unknown escaped
+    return '_u_'
+  })
+}
+
+
 function stringifyDynamicClass (value) {
-  if (!value) return ''
   if (isArray(value)) {
-    return stringifyArray(value)
-  }
-  if (isObject(value)) {
-    return stringifyObject(value)
+    value = stringifyArray(value)
+  } else if (isObject(value)) {
+    value = stringifyObject(value)
   }
+
   if (typeof value === 'string') {
-    return value
+    return mpEscape(value)
+  } else {
+    return ''
   }
-  return ''
 }
 
 function stringifyArray (value) {

package/lib/template-compiler/compiler.js

@@ -762,7 +762,7 @@ function parse (template, options) {
     },
     comment: function comment (text) {
       if (!currentParent) genTempRoot()
-      if (options.hasComment) {
+      if (options.hasComment || /mpx_config_/.test(text)) {
         currentParent.children.push({
           type: 3,
           text: text,
@@ -967,7 +967,7 @@ function processComponentIs (el, options) {
 
   const is = getAndRemoveAttr(el, 'is').val
   if (is) {
-    el.is = parseMustache(is).result
+    el.is = parseMustacheWithContext(is).result
   } else {
     warn$1('<component> tag should have attrs[is].')
   }
@@ -979,7 +979,7 @@ function parseFuncStr2 (str) {
   const funcRE = /^([^()]+)(\((.*)\))?/
   const match = funcRE.exec(str)
   if (match) {
-    const funcName = parseMustache(match[1]).result
+    const funcName = parseMustacheWithContext(match[1]).result
     const hasArgs = !!match[2]
     let args = match[3] ? `,${match[3]}` : ''
     const ret = /(,|^)\s*(\$event)\s*(,|$)/.exec(args)
@@ -1163,19 +1163,9 @@ function wrapMustache (val) {
   return val && !tagRE.test(val) ? `{{${val}}}` : val
 }
 
-function parseMustache (raw = '') {
-  let replaced = false
-  if (tagRE.test(raw)) {
-    const ret = []
-    let lastLastIndex = 0
-    let match
-    while (match = tagREG.exec(raw)) {
-      const pre = raw.substring(lastLastIndex, match.index)
-      if (pre) {
-        ret.push(stringify(pre))
-      }
-      let exp = match[1]
-
+function parseMustacheWithContext (raw = '') {
+  return parseMustache(raw, (exp) => {
+    if (defs) {
       // eval处理的话，和别的判断条件，比如运行时的判断混用情况下得不到一个结果，还是正则替换
       const defKeys = Object.keys(defs)
       defKeys.forEach((defKey) => {
@@ -1183,42 +1173,70 @@ function parseMustache (raw = '') {
         const defREG = new RegExp(`\\b${defKey}\\b`, 'g')
         if (defRE.test(exp)) {
           exp = exp.replace(defREG, stringify(defs[defKey]))
-          replaced = true
         }
       })
+    }
 
-      if (i18n) {
-        for (const i18nFuncName of i18nFuncNames) {
-          const funcNameRE = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`)
-          const funcNameREG = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`, 'g')
-          if (funcNameRE.test(exp)) {
-            if (i18n.useComputed || !i18nFuncName.startsWith('\\$')) {
-              const i18nInjectComputedKey = `_i${i18nInjectableComputed.length + 1}`
-              i18nInjectableComputed.push(`${i18nInjectComputedKey} () {\nreturn ${exp.trim()}}`)
-              exp = i18nInjectComputedKey
-            } else {
-              exp = exp.replace(funcNameREG, `${i18nModuleName}.$1(null, _l, _fl, `)
-            }
-            hasI18n = true
-            replaced = true
-            break
+    if (i18n) {
+      for (const i18nFuncName of i18nFuncNames) {
+        const funcNameRE = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`)
+        const funcNameREG = new RegExp(`(?<![A-Za-z0-9_$.])${i18nFuncName}\\(`, 'g')
+        if (funcNameRE.test(exp)) {
+          if (i18n.useComputed || !i18nFuncName.startsWith('\\$')) {
+            const i18nInjectComputedKey = `_i${i18nInjectableComputed.length + 1}`
+            i18nInjectableComputed.push(`${i18nInjectComputedKey} () {\nreturn ${exp.trim()}}`)
+            exp = i18nInjectComputedKey
+          } else {
+            exp = exp.replace(funcNameREG, `${i18nModuleName}.$1(null, _l, _fl, `)
           }
+          hasI18n = true
+          break
         }
       }
+    }
+
+    return exp
+  })
+}
+
+function parseMustache (raw = '', expHandler = exp => exp, strHandler = str => str) {
+  let replaced = false
+  if (tagRE.test(raw)) {
+    const ret = []
+    let lastLastIndex = 0
+    let match
+    while (match = tagREG.exec(raw)) {
+      const pre = raw.substring(lastLastIndex, match.index)
+      if (pre) {
+        const pre2 = strHandler(pre)
+        if (pre2 !== pre) replaced = true
+        if (pre2) ret.push(stringify(pre2))
+      }
+
+      const exp = match[1].trim()
+      if (exp) {
+        const exp2 = expHandler(exp)
+        if (exp2 !== exp) replaced = true
+        if (exp2) ret.push(`(${exp2})`)
+      }
 
-      ret.push(`(${exp.trim()})`)
       lastLastIndex = tagREG.lastIndex
     }
+
     const post = raw.substring(lastLastIndex)
     if (post) {
-      ret.push(stringify(post))
+      const post2 = strHandler(post)
+      if (post2 !== post) replaced = true
+      if (post2) ret.push(stringify(post2))
     }
+
     let result
     if (ret.length === 1) {
       result = ret[0]
     } else {
       result = `(${ret.join('+')})`
     }
+
     return {
       result,
       hasBinding: true,
@@ -1226,10 +1244,14 @@ function parseMustache (raw = '') {
       replaced
     }
   }
+
+  const raw2 = strHandler(raw)
+  if (raw2 !== raw) replaced = true
+
   return {
-    result: stringify(raw),
+    result: stringify(raw2),
     hasBinding: false,
-    val: raw,
+    val: raw2,
     replaced
   }
 }
@@ -1247,14 +1269,14 @@ function processIf (el) {
   let val = getAndRemoveAttr(el, config[mode].directive.if).val
   if (val) {
     if (mode === 'swan') val = wrapMustache(val)
-    const parsed = parseMustache(val)
+    const parsed = parseMustacheWithContext(val)
     el.if = {
       raw: parsed.val,
       exp: parsed.result
     }
   } else if (val = getAndRemoveAttr(el, config[mode].directive.elseif).val) {
     if (mode === 'swan') val = wrapMustache(val)
-    const parsed = parseMustache(val)
+    const parsed = parseMustacheWithContext(val)
     el.elseif = {
       raw: parsed.val,
       exp: parsed.result
@@ -1296,7 +1318,7 @@ function processFor (el) {
       }
     } else {
       if (mode === 'swan') val = wrapMustache(val)
-      const parsed = parseMustache(val)
+      const parsed = parseMustacheWithContext(val)
       el.for = {
         raw: parsed.val,
         exp: parsed.result
@@ -1408,14 +1430,14 @@ function processAttrs (el, options) {
     const isTemplateData = el.tag === 'template' && attr.name === 'data'
     const needWrap = isTemplateData && mode !== 'swan'
     const value = needWrap ? `{${attr.value}}` : attr.value
-    const parsed = parseMustache(value)
+    const parsed = parseMustacheWithContext(value)
     if (parsed.hasBinding) {
       // 该属性判断用于提供给运行时对于计算属性作为props传递时提出警告
       const isProps = isComponentNode(el, options) && !(attr.name === 'class' || attr.name === 'style')
       addExp(el, parsed.result, isProps)
-    }
-    if (parsed.replaced) {
-      modifyAttr(el, attr.name, needWrap ? parsed.val.slice(1, -1) : parsed.val)
+      if (parsed.replaced) {
+        modifyAttr(el, attr.name, needWrap ? parsed.val.slice(1, -1) : parsed.val)
+      }
     }
   })
 }
@@ -1547,7 +1569,7 @@ function processText (el) {
   if (el.type !== 3 || el.isComment) {
     return
   }
-  const parsed = parseMustache(el.text)
+  const parsed = parseMustacheWithContext(el.text)
   if (parsed.hasBinding) {
     addExp(el, parsed.result)
   }
@@ -1592,8 +1614,8 @@ function processClass (el, meta) {
   let staticClass = getAndRemoveAttr(el, type).val || ''
   staticClass = staticClass.replace(/\s+/g, ' ')
   if (dynamicClass) {
-    const staticClassExp = parseMustache(staticClass).result
-    const dynamicClassExp = transDynamicClassExpr(parseMustache(dynamicClass).result, {
+    const staticClassExp = parseMustacheWithContext(staticClass).result
+    const dynamicClassExp = transDynamicClassExpr(parseMustacheWithContext(dynamicClass).result, {
       error: error$1
     })
     addAttrs(el, [{
@@ -1628,8 +1650,8 @@ function processStyle (el, meta) {
   let staticStyle = getAndRemoveAttr(el, type).val || ''
   staticStyle = staticStyle.replace(/\s+/g, ' ')
   if (dynamicStyle) {
-    const staticStyleExp = parseMustache(staticStyle).result
-    const dynamicStyleExp = parseMustache(dynamicStyle).result
+    const staticStyleExp = parseMustacheWithContext(staticStyle).result
+    const dynamicStyleExp = parseMustacheWithContext(dynamicStyle).result
     addAttrs(el, [{
       name: targetType,
       value: `{{${stringifyModuleName}.stringifyStyle(${staticStyleExp}, ${dynamicStyleExp})}}`
@@ -1870,7 +1892,7 @@ function processShow (el, options, root) {
   if (options.hasVirtualHost) {
     if (options.isComponent && el.parent === root && isRealNode(el)) {
       if (show !== undefined) {
-        show = `{{${parseMustache(show).result}&&mpxShow}}`
+        show = `{{${parseMustacheWithContext(show).result}&&mpxShow}}`
       } else {
         show = '{{mpxShow}}'
       }
@@ -1892,7 +1914,7 @@ function processShow (el, options, root) {
 
   function processShowStyle () {
     if (show !== undefined) {
-      const showExp = parseMustache(show).result
+      const showExp = parseMustacheWithContext(show).result
       let oldStyle = getAndRemoveAttr(el, 'style').val
       oldStyle = oldStyle ? oldStyle + ';' : ''
       addAttrs(el, [{
@@ -2376,6 +2398,7 @@ module.exports = {
   makeAttrsMap,
   stringifyAttr,
   parseMustache,
+  parseMustacheWithContext,
   stringifyWithResolveComputed,
   addAttrs
 }

package/lib/utils/ts-loader-watch-run-loader-filter.js

@@ -1,10 +1,9 @@
 module.exports = (loaders, loaderIndex) => {
-  for (let len = loaders.length; len > 0; --len) {
-    const currentLoader = loaders[len - 1]
+  for (let i = loaderIndex; i >= 0; i--) {
+    const currentLoader = loaders[i]
     if (currentLoader.path.endsWith('ts-loader/dist/stringify-loader.js')) {
-      break
+      return i
     }
-    loaderIndex--
   }
   return loaderIndex
 }

package/lib/web/processMainScript.js

@@ -0,0 +1,56 @@
+const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const { buildComponentsMap, buildPagesMap, buildGlobalParams, shallowStringify, stringifyRequest, buildI18n } = require('./script-helper')
+
+module.exports = function (script, {
+  loaderContext,
+  ctorType,
+  srcMode,
+  moduleId,
+  isProduction,
+  jsonConfig,
+  localComponentsMap,
+  tabBar,
+  tabBarMap,
+  tabBarStr,
+  localPagesMap,
+  resource
+}, callback) {
+  const { i18n, webConfig } = loaderContext.getMpx()
+
+  const { pagesMap, firstPage, globalTabBar } = buildPagesMap({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBarStr })
+
+  const componentsMap = buildComponentsMap({ localComponentsMap, loaderContext })
+
+  const scriptSrcMode = script ? script.mode || srcMode : srcMode
+
+  let output = `\n  import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+          import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
+          import Vue from 'vue'
+          import VueRouter from 'vue-router'
+          import Mpx from '@mpxjs/core'
+          import App from ${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}
+          Vue.use(VueRouter)
+  \n`
+
+  if (i18n) {
+    output += buildI18n({ i18n, loaderContext })
+  }
+
+  output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, jsonConfig, webConfig, isMain: true, globalTabBar })
+  output += `export default processAppOption({
+                        App,
+                        tabBarMap: ${JSON.stringify(tabBarMap)},
+                        firstPage: ${JSON.stringify(firstPage)},
+                        pagesMap: ${shallowStringify(pagesMap)},
+                        componentsMap: ${shallowStringify(componentsMap)},
+                        Vue,
+                        VueRouter,
+                        webConfig: ${JSON.stringify(webConfig)}
+                    })`
+
+  callback(null, {
+    output
+  })
+}

package/lib/web/processScript.js

@@ -1,33 +1,8 @@
 const genComponentTag = require('../utils/gen-component-tag')
 const loaderUtils = require('loader-utils')
-const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
-const hasOwn = require('../utils/has-own')
-const createHelpers = require('../helpers')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
-const tabBarContainerPath = normalize.lib('runtime/components/web/mpx-tab-bar-container.vue')
-const tabBarPath = normalize.lib('runtime/components/web/mpx-tab-bar.vue')
-
-function shallowStringify (obj) {
-  const arr = []
-  for (const key in obj) {
-    if (hasOwn(obj, key)) {
-      let value = obj[key]
-      if (Array.isArray(value)) {
-        value = `[${value.join(',')}]`
-      }
-      arr.push(`'${key}':${value}`)
-    }
-  }
-  return `{${arr.join(',')}}`
-}
-
-function getAsyncChunkName (chunkName) {
-  if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}" */`
-  }
-  return ''
-}
+const { buildComponentsMap, getRequireScript, buildGlobalParams, shallowStringify } = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -38,50 +13,14 @@ module.exports = function (script, {
   componentGenerics,
   jsonConfig,
   outputPath,
-  tabBarMap,
-  tabBarStr,
   builtInComponentsMap,
   genericsInfo,
   wxsModuleMap,
-  localComponentsMap,
-  localPagesMap
+  localComponentsMap
 }, callback) {
-  const {
-    i18n,
-    projectRoot,
-    webConfig,
-    appInfo
-  } = loaderContext.getMpx()
-  const { getRequire } = createHelpers(loaderContext)
-  const tabBar = jsonConfig.tabBar
-
-  const emitWarning = (msg) => {
-    loaderContext.emitWarning(
-      new Error('[script processor][' + loaderContext.resource + ']: ' + msg)
-    )
-  }
+  const { projectRoot, appInfo } = loaderContext.getMpx()
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
-  const tabBarPagesMap = {}
-  if (tabBar && tabBarMap) {
-    // 挂载tabBar组件
-    const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { isComponent: true }))
-    tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
-    // 挂载tabBar页面
-    Object.keys(tabBarMap).forEach((pagePath) => {
-      const pageCfg = localPagesMap[pagePath]
-      if (pageCfg) {
-        const pageRequest = stringifyRequest(pageCfg.resource)
-        if (pageCfg.async) {
-          tabBarPagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
-        } else {
-          tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
-        }
-      } else {
-        emitWarning(`TabBar page path ${pagePath} is not exist in local page map, please check!`)
-      }
-    })
-  }
 
   let output = '/* script */\n'
 
@@ -101,58 +40,7 @@ module.exports = function (script, {
       return attrs
     },
     content (script) {
-      let content = `\n  import processOption, { getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
-      // add import
-      if (ctorType === 'app') {
-        content += `  import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
-  import Vue from 'vue'
-  import VueRouter from 'vue-router'
-  import Mpx from '@mpxjs/core'
-  Vue.use(VueRouter)
-  global.getApp = function(){}
-  global.getCurrentPages = function(){
-    if(!global.__mpxRouter) return []
-    // @ts-ignore
-    return global.__mpxRouter.stack.map(item => {
-      let page
-      const vnode = item.vnode
-      if(vnode && vnode.componentInstance) {
-        page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
-      }
-      return page || { route: item.path.slice(1) }
-    })
-  }
-  global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
-  global.__mpxGenericsMap = {}
-  global.__mpxOptionsMap = {}
-  global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
-  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
-  global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
-        if (i18n) {
-          const i18nObj = Object.assign({}, i18n)
-          content += `  import VueI18n from 'vue-i18n'
-  import { createI18n } from 'vue-i18n-bridge'
-
-  Vue.use(VueI18n , { bridge: true })\n`
-          const requestObj = {}
-          const i18nKeys = ['messages', 'dateTimeFormats', 'numberFormats']
-          i18nKeys.forEach((key) => {
-            if (i18nObj[`${key}Path`]) {
-              requestObj[key] = stringifyRequest(i18nObj[`${key}Path`])
-              delete i18nObj[`${key}Path`]
-            }
-          })
-          content += `  const i18nCfg = ${JSON.stringify(i18nObj)}\n`
-          Object.keys(requestObj).forEach((key) => {
-            content += `  i18nCfg.${key} = require(${requestObj[key]})\n`
-          })
-          content += '  i18nCfg.legacy = false\n'
-          content += `  const i18n = createI18n(i18nCfg, VueI18n)
-  Vue.use(i18n)
-  Mpx.i18n = i18n
-  \n`
-        }
-      }
+      let content = `\n  import processComponentOption, { getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
       let hasApp = true
       if (!appInfo.name) {
         hasApp = false
@@ -166,63 +54,10 @@ module.exports = function (script, {
           content += `  wxsModules.${module} = ${expression}\n`
         })
       }
-      let firstPage = ''
-      const pagesMap = {}
-      const componentsMap = {}
-      Object.keys(localPagesMap).forEach((pagePath) => {
-        const pageCfg = localPagesMap[pagePath]
-        const pageRequest = stringifyRequest(pageCfg.resource)
-        if (tabBarMap && tabBarMap[pagePath]) {
-          pagesMap[pagePath] = `getComponent(require(${stringifyRequest(tabBarContainerPath)}), { __mpxBuiltIn: true })`
-        } else {
-          if (pageCfg.async) {
-            pagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
-          } else {
-            // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
-            pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
-          }
-        }
 
-        if (pageCfg.isFirst) {
-          firstPage = pagePath
-        }
-      })
-
-      Object.keys(localComponentsMap).forEach((componentName) => {
-        const componentCfg = localComponentsMap[componentName]
-        const componentRequest = stringifyRequest(componentCfg.resource)
-        if (componentCfg.async) {
-          componentsMap[componentName] = `()=>import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(res => getComponent(res))`
-        } else {
-          componentsMap[componentName] = `getComponent(require(${componentRequest}))`
-        }
-      })
-
-      Object.keys(builtInComponentsMap).forEach((componentName) => {
-        const componentCfg = builtInComponentsMap[componentName]
-        const componentRequest = stringifyRequest(componentCfg.resource)
-        componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
-      })
-
-      content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
-      content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
-      content += `  global.currentInject = ${JSON.stringify({ moduleId })}\n`
-      if (!isProduction) {
-        content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
-      }
+      // 获取组件集合
+      const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext })
 
-      content += '  /** script content **/\n'
-
-      // 传递ctorType以补全js内容
-      const extraOptions = {
-        ctorType,
-        lang: script.lang || 'js'
-      }
-      // todo 仅靠vueContentCache保障模块唯一性还是不够严谨，后续需要考虑去除原始query后构建request
-      content += `  ${getRequire('script', script, extraOptions)}\n`
-
-      // createApp/Page/Component执行完成后立刻获取当前的option并暂存
-      content += `  const currentOption = global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
@@ -237,36 +72,21 @@ module.exports = function (script, {
             pageConfig[key] = jsonConfig[key]
           })
       }
-      // 为了执行顺序正确，tabBarPagesMap在app逻辑执行完成后注入，保障小程序中app->page->component的js执行顺序
-      if (tabBarStr && tabBarPagesMap) {
-        content += `  global.__tabBar = ${tabBarStr}
-  Vue.observable(global.__tabBar)
-  // @ts-ignore
-  global.__tabBarPagesMap = ${shallowStringify(tabBarPagesMap)}\n`
-      }
-      // 配置平台转换通过createFactory在core中convertor中定义和进行
-      // 通过processOption进行组件注册和路由注入
-      content += `  export default processOption(
-    currentOption,
-    ${JSON.stringify(ctorType)},
-    ${JSON.stringify(firstPage)},
-    ${JSON.stringify(outputPath)},
-    ${JSON.stringify(pageConfig)},
-    // @ts-ignore
-    ${shallowStringify(pagesMap)},
+
+      content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction })
+      content += getRequireScript({ ctorType, script, loaderContext })
+      content += `  export default processComponentOption({
+    option: global.__mpxOptionsMap[${JSON.stringify(moduleId)}],
+    ctorType: ${JSON.stringify(ctorType)},
+    outputPath: ${JSON.stringify(outputPath)},
+    pageConfig: ${JSON.stringify(pageConfig)},
     // @ts-ignore
-    ${shallowStringify(componentsMap)},
-    ${JSON.stringify(tabBarMap)},
-    ${JSON.stringify(componentGenerics)},
-    ${JSON.stringify(genericsInfo)},
-    getWxsMixin(wxsModules),
-    ${hasApp}`
-      if (ctorType === 'app') {
-        content += `,
-    Vue,
-    VueRouter`
-      }
-      content += '\n  )\n'
+    componentsMap: ${shallowStringify(componentsMap)},
+    componentGenerics: ${JSON.stringify(componentGenerics)},
+    genericsInfo: ${JSON.stringify(genericsInfo)},
+    mixin: getWxsMixin(wxsModules),
+    hasApp: ${hasApp}`
+      content += '\n  })\n'
       return content
     }
   })

package/lib/web/processTemplate.js

@@ -38,7 +38,8 @@ module.exports = function (template, {
     wxsContentMap,
     decodeHTMLText,
     externalClasses,
-    checkUsingComponents
+    checkUsingComponents,
+    webConfig
     // autoVirtualHostRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
@@ -48,9 +49,11 @@ module.exports = function (template, {
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
+    const { el } = webConfig
+    const idName = el?.match(/#(.*)/)?.[1] || 'app'
     template = {
       tag: 'template',
-      content: '<div class="app"><mpx-keep-alive><router-view class="page"></router-view></mpx-keep-alive></div>'
+      content: `<div id="${idName}" class="app"><mpx-keep-alive><router-view class="page"></router-view></mpx-keep-alive></div>`
     }
     builtInComponentsMap['mpx-keep-alive'] = {
       resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })