@mpxjs/webpack-plugin 2.7.17 → 2.7.20

package/lib/dependencies/DynamicEntryDependency.js

@@ -114,8 +114,8 @@ class DynamicEntryDependency extends NullDependency {
   updateHash (hash, context) {
     const { resultPath, relativePath } = this
     if (resultPath) hash.update(resultPath)
-    // relativePath为MPX_CURRENT_CHUNK时，插入随机数hash使当前module的codeGeneration cache失效，以执行dep.apply动态获取当前module所属的chunk路径
-    if (relativePath === MPX_CURRENT_CHUNK) hash.update('' + Math.random())
+    // relativePath为MPX_CURRENT_CHUNK时，插入随机hash使当前module的codeGeneration cache失效，从而执行dep.apply动态获取当前module所属的chunk路径
+    if (relativePath === MPX_CURRENT_CHUNK) hash.update('' + (+new Date()) + Math.random())
     super.updateHash(hash, context)
   }
 

package/lib/index.js

@@ -951,6 +951,9 @@ class MpxWebpackPlugin {
                 parser.state.current.addDependency(dep)
               }
               return true
+            } else {
+              compilation.errors.push(new Error(`The require async JS [${request}] need to declare subpackage name by root`))
+              return true
             }
           }
         }
@@ -969,46 +972,6 @@ class MpxWebpackPlugin {
             stage: -1000
           }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers))
 
-        const transHandler = (expr) => {
-          const module = parser.state.module
-          const current = parser.state.current
-          const { queryObj, resourcePath } = parseRequest(module.resource)
-          const localSrcMode = queryObj.mode
-          const globalSrcMode = mpx.srcMode
-          const srcMode = localSrcMode || globalSrcMode
-          const mode = mpx.mode
-
-          let target
-
-          if (expr.type === 'Identifier') {
-            target = expr
-          } else if (expr.type === 'MemberExpression') {
-            target = expr.object
-          }
-          if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('@mpxjs') !== -1 || !target || mode === srcMode) {
-            return
-          }
-
-          const type = target.name
-
-          const name = type === 'wx' ? 'mpx' : 'createFactory'
-          const replaceContent = type === 'wx' ? 'mpx' : `createFactory(${JSON.stringify(type)})`
-
-          const dep = new ReplaceDependency(replaceContent, target.range)
-          current.addPresentationalDependency(dep)
-
-          let needInject = true
-          for (let dep of module.dependencies) {
-            if (dep instanceof CommonJsVariableDependency && dep.name === name) {
-              needInject = false
-              break
-            }
-          }
-          if (needInject) {
-            const dep = new CommonJsVariableDependency(`@mpxjs/core/src/runtime/${name}`, name)
-            module.addDependency(dep)
-          }
-        }
         // hack babel polyfill global
         parser.hooks.statementIf.tap('MpxWebpackPlugin', (expr) => {
           if (/core-js.+microtask/.test(parser.state.module.resource)) {
@@ -1043,90 +1006,119 @@ class MpxWebpackPlugin {
           }
         })
 
+        // 处理跨平台转换
         if (mpx.srcMode !== mpx.mode) {
-          // 全量替换未声明的wx identifier
-          parser.hooks.expression.for('wx').tap('MpxWebpackPlugin', transHandler)
-
-          // parser.hooks.evaluate.for('MemberExpression').tap('MpxWebpackPlugin', (expr) => {
-          //   // Undeclared varible for wx[identifier]()
-          //   // TODO Unable to handle wx[identifier]
-          //   if (expr.object.name === 'wx' && !parser.scope.definitions.has('wx')) {
-          //     transHandler(expr)
-          //   }
-          // })
-          // // Trans for wx.xx, wx['xx'], wx.xx(), wx['xx']()
-          // parser.hooks.expressionMemberChain.for('wx').tap('MpxWebpackPlugin', transHandler)
+          // 处理跨平台全局对象转换
+          const transGlobalObject = (expr) => {
+            const module = parser.state.module
+            const current = parser.state.current
+            const { queryObj, resourcePath } = parseRequest(module.resource)
+            const localSrcMode = queryObj.mode
+            const globalSrcMode = mpx.srcMode
+            const srcMode = localSrcMode || globalSrcMode
+            const mode = mpx.mode
+
+            let target
+            if (expr.type === 'Identifier') {
+              target = expr
+            } else if (expr.type === 'MemberExpression') {
+              target = expr.object
+            }
+
+            if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('@mpxjs') !== -1 || !target || mode === srcMode) return
+
+            const type = target.name
+            const name = type === 'wx' ? 'mpx' : 'createFactory'
+            const replaceContent = type === 'wx' ? 'mpx' : `createFactory(${JSON.stringify(type)})`
+
+            const dep = new ReplaceDependency(replaceContent, target.range)
+            current.addPresentationalDependency(dep)
+
+            let needInject = true
+            for (let dep of module.dependencies) {
+              if (dep instanceof CommonJsVariableDependency && dep.name === name) {
+                needInject = false
+                break
+              }
+            }
+            if (needInject) {
+              const dep = new CommonJsVariableDependency(`@mpxjs/core/src/runtime/${name}`, name)
+              module.addDependency(dep)
+            }
+          }
+
+          // 转换wx全局对象
+          parser.hooks.expression.for('wx').tap('MpxWebpackPlugin', transGlobalObject)
           // Proxy ctor for transMode
           if (!this.options.forceDisableProxyCtor) {
             parser.hooks.call.for('Page').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             parser.hooks.call.for('Component').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             parser.hooks.call.for('App').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             if (mpx.mode === 'ali' || mpx.mode === 'web') {
               // 支付宝和web不支持Behaviors
               parser.hooks.call.for('Behavior').tap('MpxWebpackPlugin', (expr) => {
-                transHandler(expr.callee)
+                transGlobalObject(expr.callee)
               })
             }
           }
-        }
 
-        const apiBlackListMap = [
-          'createApp',
-          'createPage',
-          'createComponent',
-          'createStore',
-          'createStoreWithThis',
-          'mixin',
-          'injectMixins',
-          'toPureObject',
-          'observable',
-          'watch',
-          'use',
-          'set',
-          'remove',
-          'delete: del',
-          'setConvertRule',
-          'getMixin',
-          'getComputed',
-          'implement'
-        ].reduce((map, api) => {
-          map[api] = true
-          return map
-        }, {})
-
-        const handler = (expr) => {
-          const callee = expr.callee
-          const args = expr.arguments
-          const name = callee.object.name
-          const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
-          const localSrcMode = queryObj.mode
-          const globalSrcMode = mpx.srcMode
-          const srcMode = localSrcMode || globalSrcMode
-
-          if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) {
-            return
-          }
+          // 为跨平台api调用注入srcMode参数指导api运行时转换
+          const apiBlackListMap = [
+            'createApp',
+            'createPage',
+            'createComponent',
+            'createStore',
+            'createStoreWithThis',
+            'mixin',
+            'injectMixins',
+            'toPureObject',
+            'observable',
+            'watch',
+            'use',
+            'set',
+            'remove',
+            'delete',
+            'setConvertRule',
+            'getMixin',
+            'getComputed',
+            'implement'
+          ].reduce((map, api) => {
+            map[api] = true
+            return map
+          }, {})
 
-          const srcModeString = `__mpx_src_mode_${srcMode}__`
-          const dep = new InjectDependency({
-            content: args.length
-              ? `, ${JSON.stringify(srcModeString)}`
-              : JSON.stringify(srcModeString),
-            index: expr.end - 1
-          })
-          parser.state.current.addPresentationalDependency(dep)
-        }
+          const injectSrcModeForTransApi = (expr, members) => {
+            // members为空数组时，callee并不是memberExpression
+            if (!members.length) return
+            const callee = expr.callee
+            const args = expr.arguments
+            const name = callee.object.name
+            const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
+            const localSrcMode = queryObj.mode
+            const globalSrcMode = mpx.srcMode
+            const srcMode = localSrcMode || globalSrcMode
+
+            if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) return
+
+            const srcModeString = `__mpx_src_mode_${srcMode}__`
+            const dep = new InjectDependency({
+              content: args.length
+                ? `, ${JSON.stringify(srcModeString)}`
+                : JSON.stringify(srcModeString),
+              index: expr.end - 1
+            })
+            parser.state.current.addPresentationalDependency(dep)
+          }
 
-        if (mpx.srcMode !== mpx.mode) {
-          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', handler)
-          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', handler)
-          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', handler)
+          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
       })
 

package/lib/json-compiler/helper.js

@@ -12,7 +12,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
   const resolveMode = mpx.resolveMode
   const externals = mpx.externals
   const root = mpx.projectRoot
-  const publicPath = loaderContext._compilation.outputOptions.publicPath || ''
+  const publicPath = loaderContext._compilation?.outputOptions.publicPath || ''
   const pathHash = mpx.pathHash
   const getOutputPath = mpx.getOutputPath
   const mode = mpx.mode

package/lib/json-compiler/index.js

@@ -96,6 +96,7 @@ module.exports = function (content) {
             } else {
               fs.readFile(file, (err, content) => {
                 if (err) return callback(err)
+                if (!this._compilation) return callback()
                 let targetPath = path.relative(context, file)
                 this._compilation.assets[targetPath] = {
                   size: function size () {
@@ -350,7 +351,7 @@ module.exports = function (content) {
     }
 
     const recordIndependent = (root, request) => {
-      this._module.addPresentationalDependency(new RecordIndependentDependency(root, request))
+      this._module && this._module.addPresentationalDependency(new RecordIndependentDependency(root, request))
     }
 
     const processIndependent = (otherConfig, context, tarRoot, callback) => {

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

@@ -181,9 +181,36 @@ module.exports = function getSpec ({ warn, error }) {
           }
         }
       },
+      {
+        // style样式绑定
+        test: /^(style|wx:style)$/,
+        web ({ value }, { el }) {
+          if (el.isStyleParsed) {
+            return false
+          }
+          let styleBinding = []
+          el.isStyleParsed = true
+          el.attrsList.map((item, index) => {
+            const parsed = parseMustache(item.value)
+            if (item.name === 'style') {
+              if (parsed.hasBinding || parsed.result.indexOf('rpx') > -1) {
+                styleBinding.push(parseMustache(item.value).result)
+              } else {
+                styleBinding.push(JSON.stringify(item.value))
+              }
+            } else if (item.name === 'wx:style') {
+              styleBinding.push(parseMustache(item.value).result)
+            }
+          })
+          return {
+            name: ':style',
+            value: `[${styleBinding}] | transRpxStyle`
+          }
+        }
+      },
       {
         // 样式类名绑定
-        test: /^wx:(class|style)$/,
+        test: /^wx:class$/,
         web ({ name, value }) {
           const dir = this.test.exec(name)[1]
           const parsed = parseMustache(value)

package/lib/runtime/optionProcessor.js

@@ -85,6 +85,51 @@ export default function processOption (
       }
     })
 
+    Vue.filter('transRpxStyle', style => {
+      const defaultTransRpxFn = function (match, $1) {
+        const rpx2vwRatio = +(100 / 750).toFixed(8)
+        return '' + ($1 * rpx2vwRatio) + 'vw'
+      }
+      const transRpxFn = global.__mpxTransRpxFn || defaultTransRpxFn
+      const parsedStyleObj = {}
+      const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+      const parseStyleText = (cssText) => {
+        const listDelimiter = /;(?![^(]*\))/g
+        const propertyDelimiter = /:(.+)/
+        if (typeof cssText === 'string') {
+          cssText.split(listDelimiter).forEach((item) => {
+            if (item) {
+              var tmp = item.split(propertyDelimiter)
+              tmp.length > 1 && (parsedStyleObj[tmp[0].trim()] = tmp[1].trim())
+            }
+          })
+        } else if (typeof cssText === 'object') {
+          if (Array.isArray(cssText)) {
+            cssText.forEach(cssItem => {
+              parseStyleText(cssItem)
+            })
+          } else {
+            Object.assign(parsedStyleObj, cssText)
+          }
+        }
+      }
+      const transRpxStyleFn = (val) => {
+        if (typeof val === 'string' && val.indexOf('rpx') > 0) {
+          return val.replace(rpxRegExpG, transRpxFn).replace(/"/g, '')
+        }
+        return val
+      }
+      if (style) {
+        style.forEach(item => {
+          parseStyleText(item)
+          for (let key in parsedStyleObj) {
+            parsedStyleObj[key] = transRpxStyleFn(parsedStyleObj[key])
+          }
+        })
+      }
+      return parsedStyleObj
+    })
+
     const routes = []
 
     for (const pagePath in pagesMap) {

package/lib/template-compiler/compiler.js

@@ -1901,20 +1901,20 @@ function getVirtualHostRoot (options, meta) {
 }
 
 function processShow (el, options, root) {
+  // 开启 virtualhost 全部走 props 传递处理
+  // 未开启 virtualhost 直接绑定 display:none 到节点上
   let show = getAndRemoveAttr(el, config[mode].directive.show).val
   if (mode === 'swan') show = wrapMustache(show)
-  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 {
-      show = '{{mpxShow}}'
+
+  if (options.hasVirtualHost) {
+    if (options.isComponent && el.parent === root && isRealNode(el)) {
+      if (show !== undefined) {
+        show = `{{${parseMustache(show).result}&&mpxShow}}`
+      } else {
+        show = '{{mpxShow}}'
+      }
     }
-  }
-  if (show !== undefined) {
-    if (isComponentNode(el, options)) {
+    if (isComponentNode(el, options) && show !== undefined) {
       if (show === '') {
         show = '{{false}}'
       }
@@ -1923,6 +1923,14 @@ function processShow (el, options, root) {
         value: show
       }])
     } else {
+      processShowStyle()
+    }
+  } else {
+    processShowStyle()
+  }
+
+  function processShowStyle () {
+    if (show !== undefined) {
       const showExp = parseMustache(show).result
       let oldStyle = getAndRemoveAttr(el, 'style').val
       oldStyle = oldStyle ? oldStyle + ';' : ''

package/lib/utils/eval-json-js.js

@@ -1,6 +1,7 @@
 const path = require('path')
 
 module.exports = function evalJSONJS (source, filename, loaderContext) {
+  if (!loaderContext._compiler) return {}
   const fs = loaderContext._compiler.inputFileSystem
   const defs = loaderContext.getMpx().defs
   const defKeys = Object.keys(defs)

package/lib/utils/get-entry-name.js

@@ -1,8 +1,8 @@
 module.exports = function (loaderContext) {
-  const compilation = loaderContext._compilation
-  const moduleGraph = compilation.moduleGraph
+  if (!loaderContext._compilation) return ''
+  const moduleGraph = loaderContext._compilation.moduleGraph
   let entryName = ''
-  for (const [name, { dependencies }] of compilation.entries) {
+  for (const [name, { dependencies }] of loaderContext._compilation.entries) {
     const entryModule = moduleGraph.getModule(dependencies[0])
     if (entryModule.resource === loaderContext.resource) {
       entryName = name

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

@@ -5,7 +5,6 @@ const async = require('async')
 const { JSON_JS_EXT } = require('./const')
 
 module.exports = function getJSONContent (json, loaderContext, callback) {
-  // error process
   if (!loaderContext._compiler) return callback(null, '{}')
   const fs = loaderContext._compiler.inputFileSystem
   async.waterfall([

package/lib/web/processJSON.js

@@ -219,8 +219,7 @@ module.exports = function (json, {
           }
 
           pagesMap[resourcePath] = outputPath
-          loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
-
+          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
           localPagesMap[outputPath] = {
             resource: addQuery(resource, { isPage: true }),
             async: tarRoot || queryObj.async,
@@ -269,8 +268,7 @@ module.exports = function (json, {
           }
           const { resourcePath, queryObj } = parseRequest(resource)
           componentsMap[resourcePath] = outputPath
-          loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-
+          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
           localComponentsMap[name] = {
             resource: addQuery(resource, {
               isComponent: true,

package/lib/web/processScript.js

@@ -129,8 +129,8 @@ module.exports = function (script, {
   global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
   global.__mpxGenericsMap = {}
   global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
-  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}\n`
-
+  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
+  global.__mpxTransRpxFn = ${mpx.webConfig.transRpxFn}\n`
         if (i18n) {
           const i18nObj = Object.assign({}, i18n)
           content += `  import VueI18n from 'vue-i18n'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.17",
+  "version": "2.7.20",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "6079aab5d336ecfac4a94a2fef44aa989cdf6614"
+  "gitHead": "b4a3fea64b6a0135989ce9b3b26ccb24318b8027"
 }