@mpxjs/webpack-plugin 2.6.104 → 2.6.109

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/helpers.js

@@ -96,7 +96,7 @@ function resolveLoaders ({ options, projectRoot }) {
   }
 }
 
-module.exports = function createHelpers ({ loaderContext, options, moduleId, hasScoped, ctorType, hasComment, usingComponents, srcMode, isNative, projectRoot }) {
+module.exports = function createHelpers ({ loaderContext, options, moduleId, hasScoped, hasComment, usingComponents, srcMode, isNative, projectRoot }) {
   const rawRequest = getRawRequest(loaderContext, options.excludedPreLoaders)
   const {
     defaultLoaders,
@@ -253,8 +253,7 @@ module.exports = function createHelpers ({ loaderContext, options, moduleId, has
       styleCompiler = styleCompilerPath + '?' +
         JSON.stringify({
           moduleId,
-          scoped: !!scoped,
-          ctorType: ctorType
+          scoped: !!scoped
         })
       // normalize scss/sass/postcss if no specific loaders have been provided
       if (!loaders[lang]) {

package/lib/index.js

@@ -124,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({
@@ -142,6 +143,7 @@ class MpxWebpackPlugin {
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
     }
+    options.customOutputPath = options.customOutputPath || null
     this.options = options
   }
 
@@ -438,6 +440,7 @@ class MpxWebpackPlugin {
           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文件专用相关配置
@@ -484,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] || []
@@ -549,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]) {

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,6 +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()
 
@@ -88,7 +89,7 @@ module.exports = function (content) {
 
   let moduleId = 'm' + mpx.pathHash(filePath)
   if (ctorType === 'app') {
-    moduleId = 'mpx-app-scope'
+    moduleId = MPX_APP_MODULE_ID
   }
 
   const parts = parseComponent(content, {
@@ -155,7 +156,6 @@ module.exports = function (content) {
         options,
         moduleId,
         hasScoped,
-        ctorType,
         hasComment,
         usingComponents,
         srcMode,

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

@@ -73,7 +73,12 @@ module.exports = function getSpec ({ warn, error }) {
         swan: deletePath()
       },
       {
-        test: 'onReachBottomDistance|disableScroll',
+        test: 'onReachBottomDistance',
+        qq: deletePath(),
+        jd: deletePath()
+      },
+      {
+        test: 'disableScroll',
         ali: deletePath(),
         qq: deletePath(),
         jd: deletePath()
@@ -84,7 +89,7 @@ module.exports = function getSpec ({ warn, error }) {
         swan: deletePath()
       },
       {
-        test: 'navigationBarTextStyle|navigationStyle|backgroundColor|backgroundTextStyle',
+        test: 'navigationBarTextStyle|navigationStyle|backgroundTextStyle',
         ali: deletePath()
       },
       {

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

@@ -44,7 +44,7 @@ module.exports = function ({ print }) {
             // 如果是个变量，报warning~
             aliPropLog(attr)
           } else {
-            let supportedList = ['navigate', 'redirect', 'switchTab', 'navigateBack', 'reLaunch']
+            let supportedList = ['navigate', 'redirect', 'switchTab', 'navigateBack', 'reLaunch', 'exit']
             if (supportedList.indexOf(attr.value) === -1) {
               aliValueLogError(attr)
             }

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

@@ -25,23 +25,6 @@ export default function processOption (
       }
     }
 
-    // 注册v-ex-classes自定义指令处理externalClasses
-    Vue.directive('ex-classes', (el, binding, vnode) => {
-      const context = vnode.context
-      if (context) {
-        const externalClasses = context.$options.externalClasses || []
-        const classList = el.classList
-        binding.value.forEach((className) => {
-          const actualExternalClassNames = context.$attrs[className]
-          if (externalClasses.indexOf(className) !== -1 && actualExternalClassNames) {
-            classList.remove(className)
-            actualExternalClassNames.split(/\s+/).forEach((actualExternalClassName) => {
-              if (actualExternalClassName) classList.add(actualExternalClassName)
-            })
-          }
-        })
-      }
-    })
     Vue.directive('animation', (el, binding) => {
       const newActions = binding && binding.value && binding.value.actions
       if (el.actions === newActions) {
@@ -121,7 +104,9 @@ export default function processOption (
           redirect: '/' + firstPage
         })
       }
+      const webRouteConfig = global.__mpx.config.webRouteConfig
       global.__mpxRouter = option.router = new VueRouter({
+        ...webRouteConfig,
         routes: routes
       })
       global.__mpxRouter.stack = []

package/lib/runtime/stringify.wxs

@@ -93,7 +93,7 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
-function stringifyClass (value) {
+function stringifyDynamicClass (value) {
   if (!value) return ''
   if (likeArray(value)) {
     return stringifyArray(value)
@@ -111,7 +111,7 @@ function stringifyArray (value) {
   var res = ''
   var stringified
   for (var i = 0; i < value.length; i++) {
-    if (isDef(stringified = stringifyClass(value[i])) && stringified !== '') {
+    if (isDef(stringified = stringifyDynamicClass(value[i])) && stringified !== '') {
       if (res) res += ' '
       res += stringified
     }
@@ -207,7 +207,7 @@ module.exports = {
     if (typeof staticClass !== 'string') {
       return console.log('Template attr class must be a string!')
     }
-    return concat(staticClass, stringifyClass(dynamicClass))
+    return concat(staticClass, stringifyDynamicClass(dynamicClass))
   },
   stringifyStyle: function (staticStyle, dynamicStyle) {
     var normalizedDynamicStyle = normalizeDynamicStyle(dynamicStyle)

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,7 +2,7 @@ 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, MPX_APP_MODULE_ID } = require('../staticConfig')
 const trim = require('./plugins/trim')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
@@ -10,15 +10,20 @@ 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
 
@@ -85,8 +90,8 @@ module.exports = function (css, map) {
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异
-        if (mpx.mode === 'ali' && loaderOptions.ctorType === 'app') {
-          result.css += '\n.mpx-root-view { display: inline; line-height: normal; }\n'
+        if (mpx.mode === 'ali' && isApp) {
+          result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
         }
         if (result.messages) {
           result.messages.forEach(({ type, file }) => {

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')
@@ -1852,31 +1853,71 @@ function processAliExternalClassesHack (el, options) {
   }
 }
 
+// externalClasses只能模拟静态传递
 function processWebExternalClassesHack (el, options) {
-  // todo 处理scoped的情况, 处理组件多层传递externalClass的情况，通过externalClass属性传递实际类名及scopeId信息，可以使用特殊的类名形式代表scopeId，如#idstring
-  let staticClass = el.attrsMap['class']
-  let dynamicClass = el.attrsMap[':class']
-  if (staticClass || dynamicClass) {
-    const externalClasses = []
+  const staticClass = getAndRemoveAttr(el, 'class').val
+  if (staticClass) {
+    const classNames = staticClass.split(/\s+/)
+    const replacements = []
     options.externalClasses.forEach((className) => {
-      const reg = new RegExp('\\b' + className + '\\b')
-      if (reg.test(staticClass) || reg.test(dynamicClass)) {
-        externalClasses.push(className)
+      const index = classNames.indexOf(className)
+      if (index > -1) {
+        replacements.push(`$attrs[${JSON.stringify(className)}]`)
+        classNames.splice(index, 1)
       }
     })
-    if (externalClasses.length) {
+
+    if (classNames.length) {
+      addAttrs(el, [{
+        name: 'class',
+        value: classNames.join(' ')
+      }])
+    }
+
+    if (replacements.length) {
+      const dynamicClass = getAndRemoveAttr(el, ':class').val
+      if (dynamicClass) replacements.push(dynamicClass)
+
       addAttrs(el, [{
-        name: 'v-ex-classes',
-        value: JSON.stringify(externalClasses)
+        name: ':class',
+        value: `[${replacements.join(',')}]`
       }])
     }
   }
+
+  // 处理externalClasses多层透传
+  const isComponent = isComponentNode(el, options)
+  if (isComponent) {
+    options.externalClasses.forEach((classLikeAttrName) => {
+      let classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val
+      if (classLikeAttrValue) {
+        const classNames = classLikeAttrValue.split(/\s+/)
+        const replacements = []
+        options.externalClasses.forEach((className) => {
+          const index = classNames.indexOf(className)
+          if (index > -1) {
+            replacements.push(`$attrs[${JSON.stringify(className)}]`)
+            classNames.splice(index, 1)
+          }
+        })
+
+        if (classNames.length) {
+          replacements.unshift(JSON.stringify(classNames.join(' ')))
+        }
+
+        addAttrs(el, [{
+          name: ':' + classLikeAttrName,
+          value: `[${replacements.join(',')}].join(' ')`
+        }])
+      }
+    })
+  }
 }
 
 function processScoped (el, options) {
   if (options.hasScoped && isRealNode(el)) {
     const moduleId = options.moduleId
-    const rootModuleId = options.isComponent ? '' : 'mpx-app-scope' // 处理app全局样式对页面的影响
+    const rootModuleId = options.isComponent ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
@@ -1899,38 +1940,58 @@ function processBuiltInComponents (el, meta) {
   }
 }
 
-function processAliStyleClassHack (el, options) {
-  if (!isComponentNode(el, options)) return
+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 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 (exp !== undefined) {
+    if (newValue !== undefined) {
       addAttrs(el, [{
-        name: typeName,
-        value: exp
+        name: newName,
+        value: newValue
       }])
     }
   })
 }
+
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
 function getVirtualHostRoot (options, meta) {
-  if (mode === 'wx' && options.hasVirtualHost && options.isComponent) {
-    !meta.options && (meta.options = {})
-    meta.options.virtualHost = true
-  }
-  if (mode === 'ali' && !options.hasVirtualHost && options.isComponent) {
-    return createASTElement('view', [
-      {
-        name: 'class',
-        value: `mpx-root-view host-${options.moduleId} ${options.hasScoped ? options.moduleId : ''} {{mpxClass||''}}`
-      },
-      {
-        name: 'style',
-        style: `{{mpxStyle||''}}`
-      }
-    ])
+  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()
 }
@@ -1938,7 +1999,10 @@ function getVirtualHostRoot (options, meta) {
 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/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/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.104",
+  "version": "2.6.109",
   "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": "3823f982d03b0f58abbac3bc8cbbd73b85ac9ed8"
+  "gitHead": "1531292ee192d1af4d84e8aac8fa02afe5d92e24"
 }