@mpxjs/webpack-plugin 2.9.12 → 2.9.13

package/lib/style-compiler/index.js

@@ -1,3 +1,4 @@
+const path = require('path')
 const postcss = require('postcss')
 const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
@@ -27,7 +28,7 @@ module.exports = function (css, map) {
     return matchCondition(this.resourcePath, { include, exclude })
   }
 
-  const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs })
+  const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs, inlineConfigFile: path.join(mpx.projectRoot, 'vue.config.js') })
   loadPostcssConfig(this, inlineConfig).then(config => {
     const plugins = [] // init with trim plugin
     const options = Object.assign(

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

@@ -3,6 +3,10 @@ const loadPlugins = require('postcss-load-config/src/plugins')
 
 let loaded
 
+function formatPlugins (plugins, file) {
+  return plugins ? loadPlugins({ plugins }, file) : []
+}
+
 module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
   if (inlineConfig.ignoreConfigFile) {
     loaded = Promise.resolve({
@@ -30,9 +34,9 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
   }
 
   return loaded.then((config = {}) => {
-    let plugins = inlineConfig.plugins || []
+    let plugins = formatPlugins(inlineConfig.plugins, inlineConfig.inlineConfigFile)
+    let prePlugins = formatPlugins(inlineConfig.mpxPrePlugins, inlineConfig.inlineConfigFile)
     let options = inlineConfig.options || {}
-    let prePlugins = inlineConfig.prePlugins || []
 
     // merge postcss config file
     if (config.plugins) {
@@ -41,7 +45,7 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
     if (config.options) {
       if (config.options.mpxPrePlugins) {
         // 使入参和postcss格式保持一致
-        prePlugins = prePlugins.concat(loadPlugins({ plugins: config.options.mpxPrePlugins }, config.file))
+        prePlugins = prePlugins.concat(formatPlugins(config.options.mpxPrePlugins, config.file))
         delete config.options.mpxPrePlugins
       }
       options = Object.assign({}, config.options, options)

package/lib/web/processMainScript.js

@@ -69,13 +69,13 @@ module.exports = function (script, {
 
   output += `
   export default processAppOption({
-    App,
+    App: App,
     tabBarMap: ${JSON.stringify(tabBarMap)},
     firstPage: ${JSON.stringify(firstPage)},
     pagesMap: ${shallowStringify(pagesMap)},
     componentsMap: ${shallowStringify(componentsMap)},
-    Vue,
-    VueRouter,
+    Vue: Vue,
+    VueRouter: VueRouter,
     el: ${JSON.stringify(webConfig.el || '#app')}
   })\n`
 

package/lib/web/processScript.js

@@ -56,7 +56,7 @@ module.exports = function (script, {
       }
 
       // 获取组件集合
-      const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext })
+      const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig })
 
       // 获取pageConfig
       const pageConfig = {}

package/lib/web/script-helper.js

@@ -31,14 +31,27 @@ function getAsyncChunkName (chunkName) {
   return ''
 }
 
-function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext }) {
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
   const componentsMap = {}
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
       if (componentCfg.async) {
-        componentsMap[componentName] = `()=>import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(res => getComponent(res))`
+        // todo 暂时只处理局部注册的组件作为componentPlaceholder，暂不支持全局组件和原生组件，如使用了支持范围外的组件将不进行placeholder渲染及替换
+        if (jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName] && localComponentsMap[jsonConfig.componentPlaceholder[componentName]]) {
+          const placeholder = jsonConfig.componentPlaceholder[componentName]
+          const placeholderCfg = localComponentsMap[placeholder]
+          const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
+          if (placeholderCfg.async) {
+            loaderContext.emitWarning(
+              new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
+            )
+          }
+          componentsMap[componentName] = `function(){return {component: import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)}), loading: getComponent(require(${placeholderRequest}))}}`
+        } else {
+          componentsMap[componentName] = `function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)})}`
+        }
       } else {
         componentsMap[componentName] = `getComponent(require(${componentRequest}))`
       }
@@ -48,7 +61,7 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
     Object.keys(builtInComponentsMap).forEach((componentName) => {
       const componentCfg = builtInComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
+      componentsMap[componentName] = `getComponent(require(${componentRequest}), {__mpxBuiltIn: true})`
     })
   }
   return componentsMap
@@ -69,15 +82,13 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
       if (pageCfg) {
         const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
         if (pageCfg.async) {
-          tabBarPagesMap[pagePath] = `function() {
-            return import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(function(res) {return 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)} })`
+          tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}})`
         }
       } else {
         loaderContext.emitWarning(
-          new Error('[json processor][' + loaderContext.resource + ']: ' + `TabBar page path ${pagePath} is not exist in local page map, please check!`)
+          new Error(`[json processor][${loaderContext.resource}]: TabBar page path ${pagePath} is not exist in local page map, please check!`)
         )
       }
     })
@@ -93,15 +104,13 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
     if (tabBarMap && tabBarMap[pagePath]) {
-      pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), { __mpxBuiltIn: true })`
+      pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), {__mpxBuiltIn: true})`
     } else {
       if (pageCfg.async) {
-        pagesMap[pagePath] = `function() {
-          return import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(function(res){ return 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)} })`
+        pagesMap[pagePath] = `getComponent(require(${pageRequest}), {__mpxPageRoute: ${JSON.stringify(pagePath)}})`
       }
     }
 
@@ -127,7 +136,16 @@ function getRequireScript ({ ctorType, script, loaderContext }) {
   return content
 }
 
-function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProduction, jsonConfig, webConfig, isMain, globalTabBar }) {
+function buildGlobalParams ({
+  moduleId,
+  scriptSrcMode,
+  loaderContext,
+  isProduction,
+  jsonConfig,
+  webConfig,
+  isMain,
+  globalTabBar
+}) {
   let content = ''
   if (isMain) {
     content += `

package/package.json

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