@mpxjs/webpack-plugin 2.9.7 → 2.9.9

package/lib/index.js

@@ -15,6 +15,8 @@ const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
 const FlagEntryExportAsUsedPlugin = require('webpack/lib/FlagEntryExportAsUsedPlugin')
 const FileSystemInfo = require('webpack/lib/FileSystemInfo')
+const ImportDependency = require('webpack/lib/dependencies/ImportDependency')
+const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock')
 const normalize = require('./utils/normalize')
 const toPosix = require('./utils/to-posix')
 const addQuery = require('./utils/add-query')
@@ -325,36 +327,31 @@ class MpxWebpackPlugin {
     compiler.options.resolve.plugins.push(packageEntryPlugin)
     compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
 
-    let splitChunksPlugin
-    let splitChunksOptions
-
-    if (this.options.mode !== 'web') {
-      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`
-            }
+    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`
           }
-          return 'bundle'
         }
+        return 'bundle'
       }
-      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
-      splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
-      splitChunksPlugin.apply(compiler)
     }
+    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)
 
     // 代理writeFile
     if (this.options.writeMode === 'changed') {
@@ -635,7 +632,7 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
+          supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'web' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
           partialCompile: this.options.partialCompile,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
@@ -1092,16 +1089,30 @@ class MpxWebpackPlugin {
             if (tarRoot) {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
-              // 目前仅wx和ali支持require.async，ali需要开启enableAliRequireAsync，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (mpx.enableRequireAsync) {
-                const dep = new DynamicEntryDependency(request, 'export', '', tarRoot, '', context, range, {
-                  isRequireAsync: true,
-                  retryRequireAsync: !!this.options.retryRequireAsync
-                })
+              // wx、ali(需开启enableAliRequireAsync)和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
+              if (mpx.supportRequireAsync) {
+                if (mpx.mode === 'web') {
+                  const depBlock = new AsyncDependenciesBlock(
+                    {
+                      name: tarRoot
+                    },
+                    expr.loc,
+                    request
+                  )
+                  const dep = new ImportDependency(request, expr.range)
+                  dep.loc = expr.loc
+                  depBlock.addDependency(dep)
+                  parser.state.current.addBlock(depBlock)
+                } else {
+                  const dep = new DynamicEntryDependency(request, 'export', '', tarRoot, '', context, range, {
+                    isRequireAsync: true,
+                    retryRequireAsync: !!this.options.retryRequireAsync
+                  })
 
-                parser.state.current.addPresentationalDependency(dep)
-                // 包含require.async的模块不能被concatenate，避免DynamicEntryDependency中无法获取模块chunk以计算相对路径
-                parser.state.module.buildInfo.moduleConcatenationBailout = 'require async'
+                  parser.state.current.addPresentationalDependency(dep)
+                  // 包含require.async的模块不能被concatenate，避免DynamicEntryDependency中无法获取模块chunk以计算相对路径
+                  parser.state.module.buildInfo.moduleConcatenationBailout = 'require async'
+                }
               } else {
                 const range = expr.range
                 const dep = new CommonJsAsyncDependency(request, range)

package/lib/json-compiler/helper.js

@@ -17,7 +17,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
   const pathHash = mpx.pathHash
   const getOutputPath = mpx.getOutputPath
   const mode = mpx.mode
-  const enableRequireAsync = mpx.enableRequireAsync
+  const supportRequireAsync = mpx.supportRequireAsync
   const asyncSubpackageRules = mpx.asyncSubpackageRules
 
   const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
@@ -51,15 +51,15 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     resolve(context, component, loaderContext, (err, resource, info) => {
       if (err) return callback(err)
       const { resourcePath, queryObj } = parseRequest(resource)
-      let placeholder = null
+      let placeholder = ''
       if (queryObj.root) {
         // 删除root query
         resource = addQuery(resource, {}, false, ['root'])
         // 目前只有微信支持分包异步化
-        if (enableRequireAsync) {
+        if (supportRequireAsync) {
           tarRoot = queryObj.root
         }
-      } else if (!queryObj.root && asyncSubpackageRules && enableRequireAsync) {
+      } else if (!queryObj.root && asyncSubpackageRules && supportRequireAsync) {
         for (const item of asyncSubpackageRules) {
           if (matchCondition(resourcePath, item)) {
             tarRoot = item.root
@@ -97,7 +97,10 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       }
 
       const entry = getDynamicEntry(resource, 'component', outputPath, tarRoot, relativePath)
-      callback(null, entry, tarRoot, placeholder)
+      callback(null, entry, {
+        tarRoot,
+        placeholder
+      })
     })
   }
 

package/lib/json-compiler/index.js

@@ -14,6 +14,9 @@ const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalCo
 const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
 const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
 const resolve = require('../utils/resolve')
+const normalize = require('../utils/normalize')
+const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
+const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
 
 module.exports = function (content) {
   const nativeCallback = this.async()
@@ -65,9 +68,13 @@ module.exports = function (content) {
   }
   const normalizePlaceholder = (placeholder) => {
     if (typeof placeholder === 'string') {
-      placeholder = {
-        name: placeholder
+      const placeholderMap = mode === 'ali'
+      ? {
+        view: { name: 'mpx-view', resource: mpxViewPath },
+        text: { name: 'mpx-text', resource: mpxTextPath }
       }
+      : {}
+      placeholder = placeholderMap[placeholder] || { name: placeholder }
     }
     if (!placeholder.name) {
       emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
@@ -211,14 +218,14 @@ module.exports = function (content) {
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, { relativePath }, (err, entry, root, placeholder) => {
+        processComponent(component, context, { relativePath }, (err, entry, { tarRoot, placeholder } = {}) => {
           if (err === RESOLVE_IGNORED_ERR) {
             delete components[name]
             return callback()
           }
           if (err) return callback(err)
           components[name] = entry
-          if (root) {
+          if (tarRoot) {
             if (placeholder) {
               placeholder = normalizePlaceholder(placeholder)
               if (placeholder.resource) {

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

@@ -95,7 +95,7 @@
       },
       speed: {
         type: Number,
-        default: 1000
+        default: 500
       },
       scrollOptions: {
         type: Object,

package/lib/runtime/optionProcessor.d.ts

@@ -6,8 +6,10 @@ declare global {
   }
 }
 
-export default function processOption (...args: any): object
+export function processComponentOption (...args: any): object
 
 export function getComponent (...args: any): object
 
 export function getWxsMixin (...args: any): object
+
+export function processAppOption (...args: any): void

package/lib/runtime/optionProcessor.js

@@ -1,9 +1,9 @@
-import { hasOwn } from './utils'
+import { hasOwn, isEmptyObject } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
 
-export default function processComponentOption (
+export function processComponentOption (
   {
     option,
     ctorType,
@@ -12,7 +12,7 @@ export default function processComponentOption (
     componentsMap,
     componentGenerics,
     genericsInfo,
-    mixin,
+    wxsMixin,
     hasApp
   }
 ) {
@@ -40,7 +40,7 @@ registered in parent context!`)
     })
   }
 
-  if (componentGenerics) {
+  if (!isEmptyObject(componentGenerics)) {
     option.props = option.props || {}
     option.props.generichash = String
     Object.keys(componentGenerics).forEach((genericName) => {
@@ -64,10 +64,9 @@ registered in parent context!`)
     option.filters = { transRpxStyle }
   }
 
-  if (option.mixins) {
-    option.mixins.push(mixin)
-  } else {
-    option.mixins = [mixin]
+  if (wxsMixin) {
+    option.mixins = option.mixins || []
+    option.mixins.push(wxsMixin)
   }
 
   if (outputPath) {
@@ -85,7 +84,7 @@ export function getComponent (component, extendOptions) {
 }
 
 export function getWxsMixin (wxsModules) {
-  if (!wxsModules || !Object.keys(wxsModules).length) return {}
+  if (!wxsModules || !Object.keys(wxsModules).length) return
   return {
     created () {
       Object.keys(wxsModules).forEach((key) => {

package/lib/script-setup-compiler/index.js

@@ -533,7 +533,7 @@ function compileScriptSetup (
         (node.type === 'VariableDeclaration' && node.declare)
       ) {
         recordType(node, declaredTypes)
-        _s.move(node.start, node.end, 0)
+        _s.move(node.start, node.end + 1, 0)
       }
     }
 

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

@@ -96,12 +96,11 @@ function checkDelAndGetPath (path) {
       } else {
         delPath = current.parentPath
       }
-    } else if (t.isLogicalExpression(current.container)) { // case: a || ''
+    } else if (t.isLogicalExpression(current.container)) { // 只处理case: a || '' or '123' || a
       const key = current.key === 'left' ? 'right' : 'left'
       if (t.isLiteral(current.parent[key])) {
         delPath = current.parentPath
       } else {
-        canDel = false
         break
       }
     } else if (current.key === 'expression' && t.isExpressionStatement(current.parentPath)) { // dealRemove删除节点时需要
@@ -116,11 +115,23 @@ function checkDelAndGetPath (path) {
   // 确定是否可删除
   while (!t.isBlockStatement(current) && canDel) {
     const { key, container } = current
+    if (t.isIfStatement(container) && key === 'test') { // if (a) {}
+      canDel = false
+      break
+    }
+
+    if (t.isLogicalExpression(container)) { // case: a || ((b || c) && d)
+      ignore = true
+      break
+    }
+
+    // case: a ??= b
     if (
-      t.isLogicalExpression(container) || // a && b
-      (t.isIfStatement(container) && key === 'test') // if (a) {}
+      key === 'right' &&
+      t.isAssignmentExpression(container) &&
+      ['??=', '||=', '&&='].includes(container.operator)
     ) {
-      canDel = false
+      ignore = true
       break
     }
 
@@ -166,13 +177,16 @@ function dealRemove (path, replace) {
     if (replace) {
       path.replaceWith(t.stringLiteral(''))
     } else {
-      t.validate(path, path.key, null)
+      if (path.inList) {
+        t.validate(path.parent, path.key, [null])
+      } else {
+        t.validate(path.parent, path.key, null)
+      }
       path.remove()
     }
     delete path.needBind
     delete path.collectInfo
-  } catch (e) {
-  }
+  } catch (e) {}
 }
 
 module.exports = {

package/lib/template-compiler/compiler.js

@@ -1931,7 +1931,7 @@ function postProcessTemplate (el) {
   }
 }
 
-const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,noMode')
+const isValidMode = makeMap('wx,ali,swan,tt,qq,web,qa,jd,dd,tenon,noMode')
 
 const wrapRE = /^\((.*)\)$/
 

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

@@ -3,10 +3,12 @@ module.exports = function (loaderContext) {
   const moduleGraph = loaderContext._compilation.moduleGraph
   let entryName = ''
   for (const [name, { dependencies }] of loaderContext._compilation.entries) {
-    const entryModule = moduleGraph.getModule(dependencies[0])
-    if (entryModule && entryModule.resource === loaderContext.resource) {
-      entryName = name
-      break
+    for (const dep of dependencies) {
+      const entryModule = moduleGraph.getModule(dep)
+      if (entryModule && entryModule.resource === loaderContext.resource) {
+        entryName = name
+        break
+      }
     }
   }
   return entryName

package/lib/web/processJSON.js

@@ -61,7 +61,8 @@ module.exports = function (json, {
     customGetDynamicEntry (resource, type, outputPath, packageRoot) {
       return {
         resource,
-        outputPath: toPosix(path.join(packageRoot, outputPath)),
+        // 输出web时组件outputPath不需要拼接packageRoot
+        outputPath: type === 'page' ? toPosix(path.join(packageRoot, outputPath)) : outputPath,
         packageRoot
       }
     }
@@ -297,7 +298,7 @@ module.exports = function (json, {
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, { resource, outputPath } = {}) => {
+        processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
           const { resourcePath, queryObj } = parseRequest(resource)
           componentsMap[resourcePath] = outputPath
@@ -307,7 +308,7 @@ module.exports = function (json, {
               isComponent: true,
               outputPath
             }),
-            async: queryObj.async
+            async: queryObj.async || tarRoot
           }
           callback()
         })

package/lib/web/processMainScript.js

@@ -46,7 +46,6 @@ module.exports = function (script, {
   output += `  import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Mpx from '@mpxjs/core'
-  import App from ${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}
   import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
   Vue.use(VueRouter)\n`
 
@@ -64,6 +63,9 @@ module.exports = function (script, {
     isMain: true,
     globalTabBar
   })
+
+  output += `\n  const App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
+
   output += `
   export default processAppOption({
     App,

package/lib/web/processScript.js

@@ -40,7 +40,7 @@ module.exports = function (script, {
       return attrs
     },
     content (script) {
-      let content = `\n  import processComponentOption, { getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
+      let content = `\n  import { processComponentOption, getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
       let hasApp = true
       if (!appInfo.name) {
         hasApp = false
@@ -85,7 +85,7 @@ module.exports = function (script, {
     componentsMap: ${shallowStringify(componentsMap)},
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
-    mixin: getWxsMixin(wxsModules),
+    wxsMixin: getWxsMixin(wxsModules),
     hasApp: ${hasApp}
   })\n`
       return content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.7",
+  "version": "2.9.9",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -83,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "baebbdc18806ba54ef705da6620eb274b5ac394b"
+  "gitHead": "7ec6526f024c00f9c6b935c631bfdc61be27b69b"
 }