@mpxjs/webpack-plugin 2.9.11-test.0 → 2.9.12

package/lib/index.js

@@ -9,6 +9,7 @@ const NullFactory = require('webpack/lib/NullFactory')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
 const CommonJsExtractDependency = require('./dependencies/CommonJsExtractDependency')
+const harmonySpecifierTag = require('webpack/lib/dependencies/HarmonyImportDependencyParserPlugin').harmonySpecifierTag
 const NormalModule = require('webpack/lib/NormalModule')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
@@ -327,30 +328,39 @@ class MpxWebpackPlugin {
     compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
 
     const optimization = compiler.options.optimization
-    optimization.runtimeChunk = {
-      name: (entrypoint) => {
-        for (const packageName in mpx.independentSubpackagesMap) {
-          if (hasOwn(mpx.independentSubpackagesMap, packageName) && isChunkInPackage(entrypoint.name, packageName)) {
-            return `${packageName}/bundle`
+    if (this.options.mode !== 'web') {
+      optimization.runtimeChunk = {
+        name: (entrypoint) => {
+          for (const packageName in mpx.independentSubpackagesMap) {
+            if (hasOwn(mpx.independentSubpackagesMap, packageName) && isChunkInPackage(entrypoint.name, packageName)) {
+              return `${packageName}/bundle`
+            }
           }
+          return 'bundle'
         }
-        return 'bundle'
       }
     }
-    const splitChunksOptions = Object.assign({
-      defaultSizeTypes: ['javascript', 'unknown'],
-      chunks: 'all',
-      usedExports: optimization.usedExports === true,
-      minChunks: 1,
-      minSize: 1000,
-      enforceSizeThreshold: Infinity,
-      maxAsyncRequests: 30,
-      maxInitialRequests: 30,
-      automaticNameDelimiter: '-'
-    }, optimization.splitChunks)
-    delete optimization.splitChunks
-    const splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
-    splitChunksPlugin.apply(compiler)
+
+    let splitChunksOptions = null
+    let splitChunksPlugin = null
+    // 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
+    if (optimization.splitChunks !== false) {
+      splitChunksOptions = Object.assign({
+        chunks: 'all',
+        usedExports: optimization.usedExports === true,
+        minChunks: 1,
+        minSize: 1000,
+        enforceSizeThreshold: Infinity,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        automaticNameDelimiter: '-',
+        cacheGroups: {}
+      }, optimization.splitChunks)
+      splitChunksOptions.defaultSizeTypes = ['javascript', 'unknown']
+      delete optimization.splitChunks
+      splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
+      splitChunksPlugin.apply(compiler)
+    }
 
     // 代理writeFile
     if (this.options.writeMode === 'changed') {
@@ -447,7 +457,6 @@ class MpxWebpackPlugin {
           },
           name: `${packageName}/bundle`,
           minChunks: 2,
-          minSize: 1000,
           priority: 100,
           chunks: 'all'
         }
@@ -952,15 +961,35 @@ class MpxWebpackPlugin {
             }
           }
         }
-        // 自动跟进分包配置修改splitChunksPlugin配置
+        // 自动使用分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false
-          Object.keys(mpx.componentsMap).forEach((packageName) => {
-            if (!hasOwn(splitChunksOptions.cacheGroups, packageName)) {
+          if (mpx.mode === 'web') {
+            // web独立处理splitChunk
+            if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
+              splitChunksOptions.cacheGroups.main = {
+                chunks: 'initial',
+                name: 'bundle',
+                test: /[\\/]node_modules[\\/]/
+              }
               needInit = true
-              splitChunksOptions.cacheGroups[packageName] = getPackageCacheGroup(packageName)
             }
-          })
+            if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
+              splitChunksOptions.cacheGroups.async = {
+                chunks: 'async',
+                name: 'async',
+                minChunks: 2
+              }
+              needInit = true
+            }
+          } else {
+            Object.keys(mpx.componentsMap).forEach((packageName) => {
+              if (!hasOwn(splitChunksOptions.cacheGroups, packageName)) {
+                splitChunksOptions.cacheGroups[packageName] = getPackageCacheGroup(packageName)
+                needInit = true
+              }
+            })
+          }
           if (needInit) {
             splitChunksPlugin.options = new SplitChunksPlugin(splitChunksOptions).options
           }
@@ -1304,56 +1333,56 @@ class MpxWebpackPlugin {
           }
 
           // 为跨平台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 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)
-          // }
-          //
-          // parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          // parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          // parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          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 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)
+          }
+
+          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
       }
       normalModuleFactory.hooks.parser.for('javascript/auto').tap('MpxWebpackPlugin', normalModuleFactoryParserCallback)

package/lib/platform/template/wx/component-config/README.md

@@ -14,7 +14,7 @@ web的额外逻辑，因为小程序组件和web存在差异，比如事件相
 
 Mpx的转换一个重要原则是转不了的东西通过控制台打印提示用户，要求用户提供一份符合对应平台的代码通过条件编译支持。因此错误输出格式保持一致是有必要的。
 
-在 index.web.js 中，会汇总每个组件的转换规则函数，为了使错误信息标准化，一致化，错误打印函数的生成函数实现在index.js里。
+在 index.js 中，会汇总每个组件的转换规则函数，为了使错误信息标准化，一致化，错误打印函数的生成函数实现在index.js里。
 
 每个组件文件是一个方法，接受错误打印生成方法，根据组件名生成对应的错误打印方法。
 

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

@@ -39,7 +39,7 @@
     render: function render () {
       const slot = this.$slots.default
       const vnode = getFirstComponentChild(slot)
-      if (!isBrowser) {
+      if (!isBrowser || !vnode) {
         return vnode || (slot && slot[0])
       }
       const router = global.__mpxRouter

package/lib/runtime/components/web/mpx-web-view.vue

@@ -4,8 +4,7 @@
 
 <script>
   import { getCustomEvent } from './getInnerListeners'
-  import promisify from './promisify'
-  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
+  import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy/src/web/api/index'
 
   const eventLoad = 'load'
   const eventError = 'error'
@@ -96,7 +95,7 @@
       messageCallback (event) {
         const hostValidate = this.hostValidate(event.origin)
         const data = event.data
-        let value = data.payload
+        const value = data.payload
         if (!hostValidate) {
           return
         }
@@ -109,19 +108,19 @@
             })
             break
           case 'navigateTo':
-            asyncCallback = promisify(value, navigateTo)
+            asyncCallback = navigateTo(value)
             break
           case 'navigateBack':
-            asyncCallback = promisify(value = {}, navigateBack)
+            asyncCallback = value ? navigateBack(value) : navigateBack()
             break
           case 'redirectTo':
-            asyncCallback = promisify(value, redirectTo)
+            asyncCallback = redirectTo(value)
             break
           case 'switchTab':
-            asyncCallback = promisify(value, switchTab)
+            asyncCallback = switchTab(value)
             break
           case 'reLaunch':
-            asyncCallback = promisify(value, reLaunch)
+            asyncCallback = reLaunch(value)
             break
           case 'getLocation':
             const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation

package/lib/runtime/optionProcessor.js

@@ -325,7 +325,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
   }
 }
 
-export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, webConfig }) {
+export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el }) {
   if (!isBrowser) {
     return context => {
       const { app, router, pinia = {} } = createApp({
@@ -364,6 +364,6 @@ export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue
     if (window.__INITIAL_STATE__ && pinia) {
       pinia.state.value = window.__INITIAL_STATE__
     }
-    app.$mount(webConfig.el || '#app')
+    app.$mount(el)
   }
 }

package/lib/style-compiler/index.js

@@ -82,9 +82,9 @@ module.exports = function (css, map) {
       }
     }
 
-    plugins.push(...config.plugins) // push user config plugins
+    const finalPlugins = config.prePlugins.concat(plugins, config.plugins)
 
-    return postcss(plugins)
+    return postcss(finalPlugins)
       .process(css, options)
       .then(result => {
         // ali环境添加全局样式抹平root差异

package/lib/style-compiler/load-postcss-config.js

@@ -1,4 +1,5 @@
 const load = require('postcss-load-config')
+const loadPlugins = require('postcss-load-config/src/plugins')
 
 let loaded
 
@@ -28,19 +29,26 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
     })
   }
 
-  return loaded.then(config => {
+  return loaded.then((config = {}) => {
     let plugins = inlineConfig.plugins || []
     let options = inlineConfig.options || {}
+    let prePlugins = inlineConfig.prePlugins || []
 
     // merge postcss config file
-    if (config && config.plugins) {
+    if (config.plugins) {
       plugins = plugins.concat(config.plugins)
     }
-    if (config && config.options) {
+    if (config.options) {
+      if (config.options.mpxPrePlugins) {
+        // 使入参和postcss格式保持一致
+        prePlugins = prePlugins.concat(loadPlugins({ plugins: config.options.mpxPrePlugins }, config.file))
+        delete config.options.mpxPrePlugins
+      }
       options = Object.assign({}, config.options, options)
     }
 
     return {
+      prePlugins,
       plugins,
       options
     }

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

@@ -121,24 +121,19 @@ function checkDelAndGetPath (path) {
     }
 
     if (t.isLogicalExpression(container)) { // case: a || ((b || c) && d)
-      ignore = true
-      break
-    }
-
-    // case: a ??= b
-    if (
-      key === 'right' &&
-      t.isAssignmentExpression(container) &&
-      ['??=', '||=', '&&='].includes(container.operator)
-    ) {
+      canDel = false
       ignore = true
       break
     }
 
     if (t.isConditionalExpression(container)) {
-      if (key === 'test') canDel = false
-      else ignore = true
-      break
+      if (key === 'test') {
+        canDel = false
+        break
+      } else {
+        ignore = true
+        replace = true
+      }
     }
 
     if (
@@ -229,11 +224,10 @@ module.exports = {
           // 删除局部作用域的变量
           if (scopeBinding) {
             if (renderReduce) {
-              const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
-              if (canDel && !ignore) {
+              const { delPath, canDel, replace } = checkDelAndGetPath(path)
+              if (canDel) {
                 delPath.delInfo = {
                   isLocal: true,
-                  canDel,
                   replace
                 }
               }
@@ -252,14 +246,16 @@ module.exports = {
           if (!renderReduce) return
 
           const { delPath, canDel, ignore, replace } = checkDelAndGetPath(path)
-          if (ignore) return
 
-          delPath.delInfo = {
-            keyPath,
-            canDel,
-            replace
+          if (canDel) {
+            delPath.delInfo = {
+              keyPath,
+              replace
+            }
           }
 
+          if (ignore) return // ignore不计数，不需要被统计
+
           const { bindings } = bindingsMap.get(currentBlock)
           const target = bindings[keyPath] || []
           target.push({
@@ -310,28 +306,26 @@ module.exports = {
       enter (path) {
         // 删除重复变量
         if (path.delInfo) {
-          const { keyPath, canDel, isLocal, replace } = path.delInfo
+          const { keyPath, isLocal, replace } = path.delInfo
           delete path.delInfo
 
-          if (canDel) {
-            if (isLocal) { // 局部作用域里的变量，可直接删除
-              dealRemove(path, replace)
-              return
-            }
-            const data = bindingsMap.get(currentBlock)
-            const { bindings, pBindings } = data
-            const allBindings = Object.assign({}, pBindings, bindings)
-
-            // 优先判断前缀，再判断全等
-            if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
-              dealRemove(path, replace)
-            } else {
-              const currentBlockVars = bindings[keyPath]
-              if (currentBlockVars.length > 1) {
-                const index = currentBlockVars.findIndex(item => !item.canDel)
-                if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量
-                  dealRemove(path, replace)
-                }
+          if (isLocal) { // 局部作用域里的变量，可直接删除
+            dealRemove(path, replace)
+            return
+          }
+          const data = bindingsMap.get(currentBlock)
+          const { bindings, pBindings } = data
+          const allBindings = Object.assign({}, pBindings, bindings)
+
+          // 优先判断前缀，再判断全等
+          if (checkPrefix(Object.keys(allBindings), keyPath) || pBindings[keyPath]) {
+            dealRemove(path, replace)
+          } else {
+            const currentBlockVars = bindings[keyPath] || [] // 对于只出现一次的可忽略变量，需要兜底
+            if (currentBlockVars.length >= 1) {
+              const index = currentBlockVars.findIndex(item => !item.canDel)
+              if (index !== -1 || currentBlockVars[0].path !== path) { // 当前block中存在不可删除的变量 || 不是第一个可删除变量，即可删除该变量
+                dealRemove(path, replace)
               }
             }
           }

package/lib/web/processMainScript.js

@@ -1,3 +1,4 @@
+// 该文件下的字符串语句需要使用 es5 语法
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
@@ -64,7 +65,7 @@ module.exports = function (script, {
     globalTabBar
   })
 
-  output += `\n  const App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
+  output += `\n  var App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
 
   output += `
   export default processAppOption({
@@ -75,7 +76,7 @@ module.exports = function (script, {
     componentsMap: ${shallowStringify(componentsMap)},
     Vue,
     VueRouter,
-    webConfig: ${JSON.stringify(webConfig)}
+    el: ${JSON.stringify(webConfig.el || '#app')}
   })\n`
 
   callback(null, {

package/lib/web/script-helper.js

@@ -69,7 +69,9 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
       if (pageCfg) {
         const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
         if (pageCfg.async) {
-          tabBarPagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+          tabBarPagesMap[pagePath] = `function() {
+            return import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(function(res) {return getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} })});
+          }`
         } else {
           tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
         }
@@ -94,7 +96,9 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
       pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), { __mpxBuiltIn: true })`
     } else {
       if (pageCfg.async) {
-        pagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+        pagesMap[pagePath] = `function() {
+          return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){ return getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} })});
+        }`
       } else {
         // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
         pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
@@ -132,12 +136,12 @@ function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProducti
     if (!(typeof window !== 'undefined')) {
       console.error('[Mpx runtime error]: Dangerous API! global.getCurrentPages is running in non browser environment, It may cause some problems, please use this method with caution')
     }
-    const router = global.__mpxRouter
+    var router = global.__mpxRouter
     if(!router) return []
     // @ts-ignore
-    return (router.lastStack || router.stack).map(item => {
-      let page
-      const vnode = item.vnode
+    return (router.lastStack || router.stack).map(function(item){
+      var page
+      var vnode = item.vnode
       if (vnode && vnode.componentInstance) {
         page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
       }
@@ -178,13 +182,13 @@ function buildI18n ({ i18n, loaderContext }) {
       delete i18nObj[`${key}Path`]
     }
   })
-  i18nContent += `  const i18nCfg = ${JSON.stringify(i18nObj)}\n`
+  i18nContent += `  var i18nCfg = ${JSON.stringify(i18nObj)}\n`
   Object.keys(requestObj).forEach((key) => {
     i18nContent += `  i18nCfg.${key} = require(${requestObj[key]})\n`
   })
   i18nContent += `
   i18nCfg.legacy = false
-  const i18n = createI18n(i18nCfg, VueI18n)
+  var i18n = createI18n(i18nCfg, VueI18n)
   Vue.use(i18n)
   Mpx.i18n = i18n\n`
   return i18nContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.11-test.0",
+  "version": "2.9.12",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "d244d661acb081b709fc99ca8f6add541f793877"
+  "gitHead": "f4f0a46610bed836be92b95417c6d66087d7cb0d"
 }

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

@@ -1,19 +0,0 @@
-function promisify (obj = {}, callback) {
-  return new Promise((resolve, reject) => {
-    const originSuccess = obj.success
-    const originFail = obj.fail
-    obj.success = function (res) {
-      originSuccess && originSuccess.call(this, res)
-      resolve(res)
-    }
-    obj.fail = function (e) {
-      originFail && originFail.call(this, e)
-      reject(e)
-    }
-    if (callback) {
-      callback(obj)
-    }
-  })
-}
-
-export default promisify