@mpxjs/webpack-plugin 2.6.102 → 2.6.107

package/lib/extractor.js

@@ -23,9 +23,9 @@ module.exports = function (content) {
   const mpx = mainCompilation.__mpx__
 
   const pagesMap = mpx.pagesMap
+  const getOutputPath = mpx.getOutputPath
 
   const extract = mpx.extract
-  const pathHash = mpx.pathHash
   const extractedMap = mpx.extractedMap
   const mode = mpx.mode
   const typeExtMap = config[mode].typeExtMap
@@ -50,8 +50,7 @@ module.exports = function (content) {
     if (filename) {
       return filename + typeExtMap[type]
     } else {
-      const resourceName = path.parse(resourcePath).name
-      const outputPath = path.join(type, resourceName + pathHash(resourcePath) + typeExtMap[type])
+      const outputPath = getOutputPath(resourcePath, type, { ext: typeExtMap[type] })
       return mpx.getPackageInfo({
         resource: resourceRaw,
         outputPath,

package/lib/index.js

@@ -101,6 +101,7 @@ class MpxWebpackPlugin {
     options.resolveMode = options.resolveMode || 'webpack'
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
+    options.autoVirtualHostRules = options.autoVirtualHostRules || {}
     options.forceDisableInject = options.forceDisableInject || false
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
@@ -123,6 +124,7 @@ class MpxWebpackPlugin {
     options.forceUsePageCtor = options.forceUsePageCtor || false
     options.postcssInlineConfig = options.postcssInlineConfig || {}
     options.transRpxRules = options.transRpxRules || null
+    options.webConfig = options.webConfig || {}
     options.auditResource = options.auditResource || false
     options.decodeHTMLText = options.decodeHTMLText || false
     options.nativeOptions = Object.assign({
@@ -141,6 +143,7 @@ class MpxWebpackPlugin {
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
     }
+    options.customOutputPath = options.customOutputPath || null
     this.options = options
   }
 
@@ -435,7 +438,9 @@ class MpxWebpackPlugin {
           externalClasses: this.options.externalClasses,
           projectRoot: this.options.projectRoot,
           autoScopeRules: this.options.autoScopeRules,
+          autoVirtualHostRules: this.options.autoVirtualHostRules,
           transRpxRules: this.options.transRpxRules,
+          webConfig: this.options.webConfig,
           postcssInlineConfig: this.options.postcssInlineConfig,
           decodeHTMLText: this.options.decodeHTMLText,
           // native文件专用相关配置
@@ -482,6 +487,15 @@ class MpxWebpackPlugin {
             }
             return hash(hashPath)
           },
+          getOutputPath: (resourcePath, type, { ext = '', conflictPath = '' } = {}) => {
+            const name = path.parse(resourcePath).name
+            const hash = mpx.pathHash(resourcePath)
+            const customOutputPath = this.options.customOutputPath
+            if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext)
+            if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
+            return path.join(type, name + hash + ext)
+          },
           extract: (content, file, index, sideEffects) => {
             index = index === -1 ? 0 : index
             additionalAssets[file] = additionalAssets[file] || []
@@ -547,6 +561,13 @@ class MpxWebpackPlugin {
               if (currentResourceMap[resourcePath] === outputPath) {
                 alreadyOutputed = true
               } else {
+                for (let key in currentResourceMap) {
+                  if (currentResourceMap[key] === outputPath && key !== resourcePath) {
+                    outputPath = toPosix(path.join(packageRoot, mpx.getOutputPath(resourcePath, resourceType, { conflictPath: outputPath })))
+                    warn && warn(new Error(`Current ${resourceType} [${resourcePath}] is registered with a conflict outputPath [${currentResourceMap[key]}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+                    break
+                  }
+                }
                 currentResourceMap[resourcePath] = outputPath
               }
             } else if (!currentResourceMap[resourcePath]) {
@@ -948,6 +969,7 @@ try {
     context.setTimeout = setTimeout;
     context.JSON = JSON;
     context.Math = Math;
+    context.Date = Date;
     context.RegExp = RegExp;
     context.Infinity = Infinity;
     context.isFinite = isFinite;
@@ -962,6 +984,22 @@ try {
     context.ArrayBuffer = ArrayBuffer;
     context.Symbol = Symbol;
     context.Reflect = Reflect;
+    context.Object = Object;
+    context.Error = Error;
+    context.Array = Array;
+    context.Float32Array = Float32Array;
+    context.Float64Array = Float64Array;
+    context.Int16Array = Int16Array;
+    context.Int32Array = Int32Array;
+    context.Int8Array = Int8Array;
+    context.Uint16Array = Uint16Array;
+    context.Uint32Array = Uint32Array;
+    context.Uint8ClampedArray = Uint8ClampedArray;
+    context.String = String;
+    context.Function = Function;
+    context.SyntaxError = SyntaxError;
+    context.decodeURIComponent = decodeURIComponent;
+    context.encodeURIComponent = encodeURIComponent;
   }
 } catch(e){
 }\n`)

package/lib/json-compiler/index.js

@@ -26,6 +26,7 @@ module.exports = function (raw = '{}') {
   const options = loaderUtils.getOptions(this) || {}
   const mainCompilation = getMainCompilation(this._compilation)
   const mpx = mainCompilation.__mpx__
+  const getOutputPath = mpx.getOutputPath
 
   const emitWarning = (msg) => {
     this.emitWarning(
@@ -297,8 +298,7 @@ module.exports = function (raw = '{}') {
           let relativePath = path.relative(root, resourceName)
           outputPath = path.join('components', name + pathHash(root), relativePath)
         } else {
-          let componentName = parsed.name
-          outputPath = path.join('components', componentName + pathHash(resourcePath), componentName)
+          outputPath = getOutputPath(resourcePath, 'component')
         }
       }
       const { packageRoot, outputPath: componentPath, alreadyOutputed } = mpx.getPackageInfo({
@@ -515,10 +515,10 @@ module.exports = function (raw = '{}') {
       callback()
     }
 
-    const getPageName = (resourcePath, ext) => {
-      const baseName = path.basename(resourcePath, ext)
-      return path.join('pages', baseName + pathHash(resourcePath), baseName)
-    }
+    // const getPageName = (resourcePath, ext) => {
+    //   const baseName = path.basename(resourcePath, ext)
+    //   return path.join('pages', baseName + pathHash(resourcePath), baseName)
+    // }
 
     const processPages = (pages, srcRoot = '', tarRoot = '', context, callback) => {
       if (pages) {
@@ -552,18 +552,18 @@ module.exports = function (raw = '{}') {
               const relative = path.relative(context, resourcePath)
               if (/^\./.test(relative)) {
                 // 如果当前page不存在于context中，对其进行重命名
-                pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+                pageName = getOutputPath(resourcePath, 'page')
                 emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
               } else {
                 pageName = toPosix(path.join(tarRoot, /^(.*?)(\.[^.]*)?$/.exec(relative)[1]))
                 // 如果当前page与已有page存在命名冲突，也进行重命名
-                for (let key in pagesMap) {
-                  if (pagesMap[key] === pageName && key !== resourcePath) {
-                    const pageNameRaw = pageName
-                    pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
-                    emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
-                    break
-                  }
+              }
+              for (let key in pagesMap) {
+                if (pagesMap[key] === pageName && key !== resourcePath) {
+                  const pageNameRaw = pageName
+                  pageName = getOutputPath(resourcePath, 'page', { conflictPath: pageNameRaw })
+                  emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+                  break
                 }
               }
             }

package/lib/loader.js

@@ -15,7 +15,7 @@ const processTemplate = require('./web/processTemplate')
 const readJsonForSrc = require('./utils/read-json-for-src')
 const normalize = require('./utils/normalize')
 const getMainCompilation = require('./utils/get-main-compilation')
-
+const { MPX_APP_MODULE_ID } = require('./staticConfig')
 module.exports = function (content) {
   this.cacheable()
 
@@ -38,6 +38,7 @@ module.exports = function (content) {
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
   const vueContentCache = mpx.vueContentCache
+  const webRouteMode = mpx.webConfig.routeMode || 'hash'
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
   // 支持资源query传入page或component支持页面/组件单独编译
@@ -66,7 +67,6 @@ module.exports = function (content) {
     // component
     ctorType = 'component'
   }
-
   const loaderContext = this
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
@@ -88,7 +88,10 @@ module.exports = function (content) {
 
   const filePath = resourcePath
 
-  const moduleId = 'm' + mpx.pathHash(filePath)
+  let moduleId = 'm' + mpx.pathHash(filePath)
+  if (ctorType === 'app') {
+    moduleId = MPX_APP_MODULE_ID
+  }
 
   const parts = parseComponent(content, {
     filePath,
@@ -242,6 +245,7 @@ module.exports = function (content) {
               i18n,
               componentGenerics,
               projectRoot,
+              webRouteMode,
               jsonConfig: jsonRes.jsonObj,
               componentId: queryObj.componentId || '',
               tabBarMap: jsonRes.tabBarMap,
@@ -306,6 +310,7 @@ module.exports = function (content) {
         ctor = 'Component'
       }
       globalInjectCode += `global.currentCtor = ${ctor}\n`
+      globalInjectCode += `global.currentResourceType = '${ctorType}'\n`
       globalInjectCode += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()
       }))}\n`
@@ -394,6 +399,8 @@ module.exports = function (content) {
           }
         })
         output += styleInjectionCode + '\n'
+      } else if (ctorType === 'app' && mode === 'ali') {
+        output += getRequire('styles', {}) + '\n'
       }
 
       // json

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

@@ -79,7 +79,7 @@ module.exports = function ({ print }) {
           if (isMustache(value)) {
             // 如果是个变量，报warning
             baiduValueLog({ name, value })
-          } else if (supportList.indexOf(value) === -1) {
+          } else if (value && supportList.indexOf(value) === -1) {
             baiduValueLogError({ name, value })
           }
         },
@@ -91,7 +91,7 @@ module.exports = function ({ print }) {
           if (isMustache(value)) {
             // 如果是个变量，报warning
             qqValueLog({ name, value })
-          } else if (supportList.indexOf(value) === -1) {
+          } else if (value && supportList.indexOf(value) === -1) {
             qqValueLogError({ name, value })
           }
         },
@@ -103,7 +103,7 @@ module.exports = function ({ print }) {
             ttValueLog({ name, value })
           } else {
             const supportList = ['share', 'getPhoneNumber', 'contact']
-            if (supportList.indexOf(value) === -1) {
+            if (value && supportList.indexOf(value) === -1) {
               ttValueLogError({ name, value })
             }
           }

package/lib/plugin-loader.js

@@ -54,6 +54,7 @@ module.exports = function (source) {
   const context = this.context
   const packageName = 'main'
   const pagesMap = mpx.pagesMap
+  const getOutputPath = mpx.getOutputPath
   const componentsMap = mpx.componentsMap[packageName]
   const getEntryNode = mpx.getEntryNode
   const resolveMode = mpx.resolveMode
@@ -191,8 +192,7 @@ module.exports = function (source) {
             let relativePath = path.relative(root, resourceName)
             outputPath = path.join('components', name + pathHash(root), relativePath)
           } else {
-            let componentName = parsed.name
-            outputPath = path.join('components', componentName + pathHash(resourcePath), componentName)
+            outputPath = getOutputPath(resourcePath, 'component')
           }
           const componentPath = toPosix(outputPath)
           pluginEntry.publicComponents[name] = componentPath

package/lib/runtime/components/web/getInnerListeners.js

@@ -1,4 +1,5 @@
 import { isEmptyObject } from './util'
+const isTouchDevice = 'ontouchstart' in document.documentElement
 
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
@@ -54,58 +55,63 @@ function processTap (listeners, context) {
   })
   if (isEmptyObject(listenerMap)) return
   context.__mpxTapInfo = context.__mpxTapInfo || {}
-  let events = {
-    touchstart (e) {
-      context.__mpxTapInfo.detail = {
-        x: e.changedTouches[0].pageX,
-        y: e.changedTouches[0].pageY
-      }
-      context.__mpxTapInfo.startTimer = null
-      context.__mpxTapInfo.needTap = true
-      context.__mpxTapInfo.hadTouch = true
-      if (listenerMap.longpress || listenerMap.longtap) {
-        context.__mpxTapInfo.startTimer = setTimeout(() => {
+  let events
+  if (isTouchDevice) {
+    events = {
+      touchstart (e) {
+        context.__mpxTapInfo.detail = {
+          x: e.changedTouches[0].pageX,
+          y: e.changedTouches[0].pageY
+        }
+        context.__mpxTapInfo.startTimer = null
+        context.__mpxTapInfo.needTap = true
+        if (listenerMap.longpress || listenerMap.longtap) {
+          context.__mpxTapInfo.startTimer = setTimeout(() => {
+            context.__mpxTapInfo.needTap = false
+            if (listenerMap.longpress) {
+              const re = inheritEvent('longpress', e, context.__mpxTapInfo.detail)
+              context.$emit('longpress', re)
+            }
+            if (listenerMap.longtap) {
+              const re = inheritEvent('longtap', e, context.__mpxTapInfo.detail)
+              context.$emit('longtap', re)
+            }
+          }, 350)
+        }
+      },
+      touchmove (e) {
+        const tapDetailInfo = context.__mpxTapInfo.detail || {}
+        const currentPageX = e.changedTouches[0].pageX
+        const currentPageY = e.changedTouches[0].pageY
+        if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
           context.__mpxTapInfo.needTap = false
-          if (listenerMap.longpress) {
-            const re = inheritEvent('longpress', e, context.__mpxTapInfo.detail)
-            context.$emit('longpress', re)
-          }
-          if (listenerMap.longtap) {
-            const re = inheritEvent('longtap', e, context.__mpxTapInfo.detail)
-            context.$emit('longtap', re)
-          }
-        }, 350)
-      }
-    },
-    touchmove (e) {
-      const tapDetailInfo = context.__mpxTapInfo.detail || {}
-      const currentPageX = e.changedTouches[0].pageX
-      const currentPageY = e.changedTouches[0].pageY
-      if (Math.abs(currentPageX - tapDetailInfo.x) > 1 || Math.abs(currentPageY - tapDetailInfo.y) > 1) {
-        context.__mpxTapInfo.needTap = false
+          context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
+          context.__mpxTapInfo.startTimer = null
+        }
+      },
+      touchend (e) {
         context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
-        context.__mpxTapInfo.startTimer = null
-      }
-    },
-    touchend (e) {
-      context.__mpxTapInfo.startTimer && clearTimeout(context.__mpxTapInfo.startTimer)
-      if (listenerMap.tap && context.__mpxTapInfo.needTap) {
-        const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
-        context.$emit('tap', re)
+        if (listenerMap.tap && context.__mpxTapInfo.needTap) {
+          const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
+          context.$emit('tap', re)
+        }
       }
-    },
-    click (e) {
-      if (listenerMap.tap && !context.__mpxTapInfo.hadTouch) {
-        context.__mpxTapInfo.detail = {
-          x: e.pageX,
-          y: e.pageY
+    }
+  } else {
+    events = {
+      click (e) {
+        if (listenerMap.tap) {
+          context.__mpxTapInfo.detail = {
+            x: e.pageX,
+            y: e.pageY
+          }
+          const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
+          context.$emit('tap', re)
         }
-        const re = inheritEvent('tap', e, context.__mpxTapInfo.detail)
-        context.$emit('tap', re)
       }
-      context.__mpxTapInfo.hadTouch = false
     }
   }
+
   mergeListeners(listeners, events, {
     force: true
   })

package/lib/runtime/components/web/mpx-keep-alive.vue

@@ -1,5 +1,6 @@
 <script>
   import { inBrowser } from '../../../utils/env'
+
   function isDef (v) {
     return v !== undefined && v !== null
   }
@@ -30,7 +31,7 @@
 
   function getVnodeKey (vnode) {
     if (vnode && vnode.componentOptions) {
-      return vnode.key || vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? ('::' + (vnode.componentOptions.tag)) : '')
+      return vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? ('::' + (vnode.componentOptions.tag)) : '')
     }
   }
 
@@ -73,6 +74,8 @@
             const current = stack[i - 1]
             if (current.vnode && current.vnodeKey === vnodeKey && current.vnode.componentInstance) {
               vnode.componentInstance = current.vnode.componentInstance
+              // 避免组件实例复用但是vnode.key不一致带来的bad case
+              vnode.key = current.vnode.key
               break
             }
           }

package/lib/runtime/components/web/mpx-tab-bar-container.vue

@@ -15,7 +15,7 @@
     'mpx-tab-bar': tabBarPagesMap['mpx-tab-bar']
   }
   tabBar.list.forEach(({ pagePath }) => {
-    const name = pagePath.replace('/', '-')
+    const name = pagePath.replace(/\//g, '-')
     const page = tabBarPagesMap[pagePath]
     if (page) {
       components[name] = page
@@ -39,7 +39,7 @@
       currentComponent () {
         const index = this.currentIndex
         const tabItem = tabBar.list[index]
-        return tabItem.pagePath.replace('/', '-')
+        return tabItem.pagePath.replace(/\//g, '-')
       }
     },
     watch: {

package/lib/runtime/optionProcessor.js

@@ -12,6 +12,7 @@ export default function processOption (
   componentGenerics,
   genericsInfo,
   mixin,
+  webRouteMode,
   Vue,
   VueRouter,
   i18n
@@ -122,6 +123,7 @@ export default function processOption (
         })
       }
       global.__mpxRouter = option.router = new VueRouter({
+        mode: webRouteMode,
         routes: routes
       })
       global.__mpxRouter.stack = []

package/lib/selector.js

@@ -23,7 +23,9 @@ module.exports = function (content) {
   })
   let part = parts[query.type] || {}
   if (Array.isArray(part)) {
-    part = part[query.index]
+    part = part[query.index] || {
+      content: ''
+    }
   }
   this.callback(null, part.content, part.map)
 }

package/lib/staticConfig.js

@@ -0,0 +1,4 @@
+module.exports = {
+  MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
+  MPX_APP_MODULE_ID: 'mpx-app-scope' // app文件moduleId
+}

package/lib/style-compiler/index.js

@@ -2,22 +2,28 @@ const getMainCompilation = require('../utils/get-main-compilation')
 const postcss = require('postcss')
 const loaderUtils = require('loader-utils')
 const loadPostcssConfig = require('./load-postcss-config')
-
+const { MPX_ROOT_VIEW } = require('../staticConfig')
 const trim = require('./plugins/trim')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
+const transSpecial = require('./plugins/trans-special')
 const matchCondition = require('../utils/match-condition')
+const parseRequest = require('../utils/parse-request')
 
 module.exports = function (css, map) {
   this.cacheable()
   const cb = this.async()
   const loaderOptions = loaderUtils.getOptions(this) || {}
-
   const mainCompilation = getMainCompilation(this._compilation)
   const mpx = mainCompilation.__mpx__
   const defs = mpx.defs
+  const { resourcePath, queryObj } = parseRequest(this.resource)
+  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
+  const componentsMap = mpx.componentsMap[packageName]
+  const pagesMap = mpx.pagesMap
+  const isApp = (!componentsMap[resourcePath] && !pagesMap[resourcePath])
 
   const transRpxRulesRaw = mpx.transRpxRules
 
@@ -38,6 +44,10 @@ module.exports = function (css, map) {
       },
       config.options
     )
+    // ali环境处理host选择器
+    if (mpx.mode === 'ali') {
+      plugins.push(transSpecial({ id: loaderOptions.moduleId || loaderOptions.mid }))
+    }
 
     if (loaderOptions.scoped) {
       const moduleId = loaderOptions.moduleId || loaderOptions.mid
@@ -79,6 +89,10 @@ module.exports = function (css, map) {
     return postcss(plugins)
       .process(css, options)
       .then(result => {
+        // ali环境添加全局样式抹平root差异
+        if (mpx.mode === 'ali' && isApp) {
+          result.css += `\n.${MPX_ROOT_VIEW} { display: inline; line-height: normal; }\n`
+        }
         if (result.messages) {
           result.messages.forEach(({ type, file }) => {
             if (type === 'dependency') {

package/lib/style-compiler/plugins/trans-special.js

@@ -0,0 +1,21 @@
+const postcss = require('postcss')
+const selectorParser = require('postcss-selector-parser')
+
+module.exports = postcss.plugin('trans-special', ({ id }) => root => {
+  root.each(function rewriteSelector (node) {
+    if (!node.selector) return
+    node.selector = selectorParser(selectors => {
+      selectors.each(selector => {
+        selector.each(n => {
+          if (/^:host$/.test(n.value)) {
+            const compoundSelectors = n.nodes
+            n.replaceWith(selectorParser.className({
+              value: 'host-' + id
+            }))
+            selector.insertAfter(n, compoundSelectors)
+          }
+        })
+      })
+    }).process(node.selector).result
+  })
+})

package/lib/template-compiler/bind-this.js

@@ -1,7 +1,7 @@
-const babylon = require('babylon')
-const traverse = require('babel-traverse').default
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const traverse = require('@babel/traverse').default
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 
 let names = 'Infinity,undefined,NaN,isFinite,isNaN,' +
   'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +

package/lib/template-compiler/compiler.js

@@ -1,6 +1,7 @@
 const JSON5 = require('json5')
 const he = require('he')
 const config = require('../config')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../staticConfig')
 const normalize = require('../utils/normalize')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 const isEmptyObject = require('../utils/is-empty-object')
@@ -803,7 +804,7 @@ function parse (template, options) {
 
   function genTempRoot () {
     // 使用临时节点作为root，处理multi root的情况
-    root = currentParent = getTempNode()
+    root = currentParent = getVirtualHostRoot(options, meta)
     stack.push(root)
   }
 
@@ -1876,10 +1877,11 @@ function processWebExternalClassesHack (el, options) {
 function processScoped (el, options) {
   if (options.hasScoped && isRealNode(el)) {
     const moduleId = options.moduleId
+    const rootModuleId = options.isComponent ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
-      value: staticClass ? `${staticClass} ${moduleId}` : moduleId
+      value: `${staticClass || ''} ${moduleId} ${rootModuleId}`
     }])
   }
 }
@@ -1899,41 +1901,67 @@ function processBuiltInComponents (el, meta) {
 }
 
 function processAliStyleClassHack (el, options, root) {
+  let processor
+  // 处理组件标签
+  if (isComponentNode(el, options)) processor = ({ value, typeName }) => [typeName, value]
+  // 处理组件根节点
+  if (options.isComponent && el === root && isRealNode(el)) {
+    processor = ({ name, value, typeName }) => {
+      let sep = name === 'style' ? ';' : ' '
+      value = value ? `{{${typeName}||''}}${sep}${value}` : `{{${typeName}||''}}`
+      return [ name, value ]
+    }
+  }
+  // 非上述两种不处理
+  if (!processor) return
+  // 处理style、class
   ['style', 'class'].forEach((type) => {
     let exp = getAndRemoveAttr(el, type).val
-    let sep = type === 'style' ? ';' : ' '
-
-    let typeName = 'mpx' + type.replace(/^./, (matched) => {
-      return matched.toUpperCase()
+    let typeName = 'mpx' + type.replace(/^./, (matched) => matched.toUpperCase())
+    let [newName, newValue] = processor({
+      name: type,
+      value: exp,
+      typeName
     })
-
-    if (options.isComponent && el.parent === root && isRealNode(el)) {
-      if (exp !== undefined) {
-        exp = `{{${typeName}||''}}` + sep + exp
-      } else {
-        exp = `{{${typeName}||''}}`
-      }
-    }
-    if (exp !== undefined) {
-      if (isComponentNode(el, options)) {
-        addAttrs(el, [{
-          name: typeName,
-          value: exp
-        }])
-      } else {
-        addAttrs(el, [{
-          name: type,
-          value: exp
-        }])
-      }
+    if (newValue !== undefined) {
+      addAttrs(el, [{
+        name: newName,
+        value: newValue
+      }])
     }
   })
 }
+// 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
+function getVirtualHostRoot (options, meta) {
+  if (options.isComponent) {
+    // 处理组件时
+    if (mode === 'wx' && options.hasVirtualHost) {
+      // wx组件注入virtualHost配置
+      !meta.options && (meta.options = {})
+      meta.options.virtualHost = true
+    }
+    if (mode === 'ali' && !options.hasVirtualHost) {
+      // ali组件根节点实体化
+      let rootView = createASTElement('view', [
+        {
+          name: 'class',
+          value: `${MPX_ROOT_VIEW} host-${options.moduleId}`
+        }
+      ])
+      processElement(rootView, rootView, options, meta)
+      return rootView
+    }
+  }
+  return getTempNode()
+}
 
 function processShow (el, options, root) {
   let show = getAndRemoveAttr(el, config[mode].directive.show).val
   if (mode === 'swan') show = wrapMustache(show)
-  if (options.isComponent && el.parent === root && isRealNode(el)) {
+  let processFlag = el.parent === root
+  // 当ali且未开启virtualHost时，mpxShow打到根节点上
+  if (mode === 'ali' && !options.hasVirtualHost) processFlag = el === root
+  if (options.isComponent && processFlag && isRealNode(el)) {
     if (show !== undefined) {
       show = `{{${parseMustache(show).result}&&mpxShow}}`
     } else {

package/lib/template-compiler/index.js

@@ -60,7 +60,8 @@ module.exports = function (raw) {
     globalComponents: Object.keys(mpx.usingComponents),
     // deprecated option
     globalMpxAttrsFilter: mpx.globalMpxAttrsFilter,
-    forceProxyEvent: matchCondition(this.resourcePath, mpx.forceProxyEventRules)
+    forceProxyEvent: matchCondition(this.resourcePath, mpx.forceProxyEventRules),
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
   })
 
   let ast = parsed.root
@@ -122,6 +123,10 @@ ${e.stack}`)
   };\n`
   }
 
+  if (meta.options) {
+    globalInjectCode += bindThis(`global.currentInject.injectOptions = ${JSON.stringify(meta.options)};`).code + '\n'
+  }
+
   const issuer = this._module.issuer
   const parser = issuer.parser
 

package/lib/template-compiler/trans-dynamic-class-expr.js

@@ -1,6 +1,6 @@
-const babylon = require('babylon')
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 const dash2hump = require('../utils/hump-dash').dash2hump
 
 module.exports = function transDynamicClassExpr (expr) {

package/lib/web/processScript.js

@@ -39,6 +39,7 @@ module.exports = function (script, options, callback) {
   const genericsInfo = options.genericsInfo
   const componentGenerics = options.componentGenerics
   const forceDisableBuiltInLoader = options.forceDisableBuiltInLoader
+  const webRouteMode = options.webRouteMode
 
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
@@ -254,7 +255,8 @@ module.exports = function (script, options, callback) {
     ${JSON.stringify(tabBarMap)},
     ${JSON.stringify(componentGenerics)},
     ${JSON.stringify(genericsInfo)},
-    getWxsMixin(wxsModules)`
+    getWxsMixin(wxsModules),
+    ${JSON.stringify(webRouteMode)}`
 
       if (ctorType === 'app') {
         content += `,

package/lib/wxs/wxs-loader.js

@@ -17,6 +17,7 @@ module.exports = function () {
   const assetsInfo = mpx.assetsInfo
   const mode = mpx.mode
   const wxsMap = mpx.wxsMap
+  const getOutputPath = mpx.getOutputPath
   const rootName = mainCompilation._preparedEntrypoints[0].name
   let { resourcePath, queryObj } = parseRequest(this.resource)
   const { resourcePath: issuerResourcePath, queryObj: issuerQueryObj } = parseRequest(queryObj.issuerResource || this._module.issuer.resource)
@@ -36,9 +37,9 @@ module.exports = function () {
   if (wxsModule) {
     resourcePath = `${resourcePath}~${wxsModule}`
   }
-
-  const name = path.parse(resourcePath).name + mpx.pathHash(resourcePath)
-  let filename = path.join(/^\.([^.]+)/.exec(config[mode].wxs.ext)[1], `${name}${config[mode].wxs.ext}`)
+  const packageRoot = queryObj.packageRoot || ''
+  const ext = config[mode].wxs.ext
+  let filename = toPosix(path.join(packageRoot, getOutputPath(resourcePath, ext.slice(1), { ext })))
 
   filename = mpx.getPackageInfo({
     resource: this.resource,

package/lib/wxs/wxs-pre-loader.js

@@ -1,7 +1,7 @@
-const babylon = require('babylon')
-const traverse = require('babel-traverse').default
-const t = require('babel-types')
-const generate = require('babel-generator').default
+const babylon = require('@babel/parser')
+const traverse = require('@babel/traverse').default
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 const getMainCompilation = require('../utils/get-main-compilation')
 const parseRequest = require('../utils/parse-request')
 const isEmptyObject = require('../utils/is-empty-object')

package/lib/wxss/processCss.js

@@ -3,37 +3,37 @@
   Author Tobias Koppers @sokra
   Modified by @hiyuki
 */
-var formatCodeFrame = require('babel-code-frame')
-var Tokenizer = require('css-selector-tokenizer')
-var postcss = require('postcss')
-var loaderUtils = require('loader-utils')
-var assign = require('object-assign')
-var getLocalIdent = require('./getLocalIdent')
+const formatCodeFrame = require('@babel/code-frame')
+const Tokenizer = require('css-selector-tokenizer')
+const postcss = require('postcss')
+const loaderUtils = require('loader-utils')
+const assign = require('object-assign')
+const getLocalIdent = require('./getLocalIdent')
 
-var icssUtils = require('icss-utils')
-var localByDefault = require('postcss-modules-local-by-default')
-var extractImports = require('postcss-modules-extract-imports')
-var modulesScope = require('postcss-modules-scope')
-var modulesValues = require('postcss-modules-values')
-var valueParser = require('postcss-value-parser')
-var isUrlRequest = require('../utils/is-url-request')
+const icssUtils = require('icss-utils')
+const localByDefault = require('postcss-modules-local-by-default')
+const extractImports = require('postcss-modules-extract-imports')
+const modulesScope = require('postcss-modules-scope')
+const modulesValues = require('postcss-modules-values')
+const valueParser = require('postcss-value-parser')
+const isUrlRequest = require('../utils/is-url-request')
 
-var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
+const parserPlugin = postcss.plugin('css-loader-parser', function (options) {
   return function (css) {
-    var imports = {}
-    var exports = {}
-    var importItems = []
-    var urlItems = []
+    const imports = {}
+    let exports = {}
+    const importItems = []
+    const urlItems = []
 
     function replaceImportsInString (str) {
       if (options.import) {
-        var tokens = valueParser(str)
+        const tokens = valueParser(str)
         tokens.walk(function (node) {
           if (node.type !== 'word') {
             return
           }
-          var token = node.value
-          var importIndex = imports['$' + token]
+          const token = node.value
+          const importIndex = imports['$' + token]
           if (typeof importIndex === 'number') {
             node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
           }
@@ -45,8 +45,8 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
 
     if (options.import) {
       css.walkAtRules(/^import$/i, function (rule) {
-        var values = Tokenizer.parseValues(rule.params)
-        var url = values.nodes[0].nodes[0]
+        const values = Tokenizer.parseValues(rule.params)
+        let url = values.nodes[0].nodes[0]
         if (url && url.type === 'url') {
           url = url.url
         } else if (url && url.type === 'string') {
@@ -56,7 +56,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
           return
         }
         values.nodes[0].nodes.shift()
-        var mediaQuery = Tokenizer.stringifyValues(values)
+        const mediaQuery = Tokenizer.stringifyValues(values)
 
         if (isUrlRequest(url, options.root)) {
           url = loaderUtils.urlToRequest(url, options.root)
@@ -70,10 +70,10 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
       })
     }
 
-    var icss = icssUtils.extractICSS(css)
+    const icss = icssUtils.extractICSS(css)
     exports = icss.icssExports
     Object.keys(icss.icssImports).forEach(function (key) {
-      var url = loaderUtils.parseString(key)
+      const url = loaderUtils.parseString(key)
       Object.keys(icss.icssImports[key]).forEach(function (prop) {
         imports['$' + prop] = importItems.length
         importItems.push({
@@ -101,7 +101,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
           item.nodes.forEach(processNode)
           break
         case 'item':
-          var importIndex = imports['$' + item.name]
+          const importIndex = imports['$' + item.name]
           if (typeof importIndex === 'number') {
             item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
           }
@@ -112,7 +112,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
             item.stringType = ''
             delete item.innerSpacingBefore
             delete item.innerSpacingAfter
-            var url = item.url
+            const url = item.url
             item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
             urlItems.push({
               url: url
@@ -123,7 +123,7 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
     }
 
     css.walkDecls(function (decl) {
-      var values = Tokenizer.parseValues(decl.value)
+      const values = Tokenizer.parseValues(decl.value)
       values.nodes.forEach(function (value) {
         value.nodes.forEach(processNode)
       })
@@ -142,17 +142,17 @@ var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
 })
 
 module.exports = function processCss (inputSource, inputMap, options, callback) {
-  var query = options.query
-  var root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
-  var context = query.context
-  var localIdentName = query.localIdentName || '[hash:base64]'
-  var localIdentRegExp = query.localIdentRegExp
-  var forceMinimize = query.minimize
-  var minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
+  const query = options.query
+  const root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
+  const context = query.context
+  const localIdentName = query.localIdentName || '[hash:base64]'
+  const localIdentRegExp = query.localIdentRegExp
+  const forceMinimize = query.minimize
+  const minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
 
-  var customGetLocalIdent = query.getLocalIdent || getLocalIdent
+  const customGetLocalIdent = query.getLocalIdent || getLocalIdent
 
-  var parserOptions = {
+  const parserOptions = {
     root: root,
     mode: options.mode,
     url: query.url !== false,
@@ -160,7 +160,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     resolve: options.resolve
   }
 
-  var pipeline = postcss([
+  const pipeline = postcss([
     modulesValues,
     localByDefault({
       mode: options.mode,
@@ -192,8 +192,8 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
   ])
 
   if (minimize) {
-    var cssnano = require('cssnano')
-    var minimizeOptions = assign({}, query.minimize);
+    const cssnano = require('cssnano')
+    const minimizeOptions = assign({}, query.minimize);
     ['zindex', 'normalizeUrl', 'discardUnused', 'mergeIdents', 'reduceIdents', 'autoprefixer', 'svgo'].forEach(function (name) {
       if (typeof minimizeOptions[name] === 'undefined') {
         minimizeOptions[name] = false
@@ -226,7 +226,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     })
   }).catch(function (err) {
     if (err.name === 'CssSyntaxError') {
-      var wrappedError = new CSSLoaderError(
+      const wrappedError = new CSSLoaderError(
         'Syntax Error',
         err.reason,
         err.line != null && err.column != null
@@ -242,7 +242,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
 }
 
 function formatMessage (message, loc, source) {
-  var formatted = message
+  let formatted = message
   if (loc) {
     formatted = formatted +
       ' (' + loc.line + ':' + loc.column + ')'
@@ -260,7 +260,7 @@ function CSSLoaderError (name, message, loc, source, error) {
   this.name = name
   this.error = error
   this.message = formatMessage(message, loc, source)
-  this.hideStack = true
+  this.message = formatMessage(message, loc, source)
 }
 
 CSSLoaderError.prototype = Object.create(Error.prototype)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.6.102",
+  "version": "2.6.107",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -15,6 +15,11 @@
     "lib"
   ],
   "dependencies": {
+    "@babel/code-frame": "^7.16.0",
+    "@babel/generator": "^7.16.0",
+    "@babel/parser": "^7.16.2",
+    "@babel/traverse": "^7.16.0",
+    "@babel/types": "^7.16.0",
     "@better-scroll/core": "^2.2.1",
     "@better-scroll/movable": "^2.2.1",
     "@better-scroll/observe-dom": "^2.2.1",
@@ -24,11 +29,6 @@
     "@better-scroll/zoom": "^2.2.1",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
-    "babel-code-frame": "^6.26.0",
-    "babel-generator": "^6.26.1",
-    "babel-traverse": "^6.26.0",
-    "babel-types": "^6.26.0",
-    "babylon": "^6.18.0",
     "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
@@ -81,5 +81,5 @@
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
   },
-  "gitHead": "377633613e39511e147269e988e3459f50421de5"
+  "gitHead": "c5821595c58c2908d56de41e68f1462b949bf646"
 }