@mpxjs/webpack-plugin 2.10.16 → 2.10.17-beta.1

package/lib/dependencies/AppEntryDependency.js

@@ -21,8 +21,8 @@ class AppEntryDependency extends NullDependency {
     if (mpx.appInfo.name) {
       const issuer = moduleGraph.getIssuer(module)
       const err = new Error(issuer
-        ? `[json compiler]:Mpx单次构建中只能存在一个App，当前组件/页面[${module.resource}]通过[${issuer.resource}]非法引入，引用的资源将被忽略，请确保组件/页面资源通过usingComponents/pages配置引入！`
-        : `[json compiler]:Mpx单次构建中只能存在一个App，请检查当前entry中的资源[${module.resource}]是否为组件/页面，通过添加?component/page查询字符串显式声明该资源是组件/页面！`)
+        ? `[Mpx json error]:Mpx单次构建中只能存在一个App，当前组件/页面[${module.resource}]通过[${issuer.resource}]非法引入，引用的资源将被忽略，请确保组件/页面资源通过usingComponents/pages配置引入！`
+        : `[Mpx json error]:Mpx单次构建中只能存在一个App，请检查当前entry中的资源[${module.resource}]是否为组件/页面，通过添加?component/page查询字符串显式声明该资源是组件/页面！`)
       return callback(err)
     }
 

package/lib/dependencies/RecordModuleIdMapDependency.js

@@ -0,0 +1,49 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordModuleIdMapDependency extends NullDependency {
+  constructor (moduleId, filePath) {
+    super()
+    this.moduleId = moduleId
+    this.filePath = filePath
+  }
+
+  get type () {
+    return 'mpx record module id map'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const { moduleId, filePath } = this
+    // 确保 resourceModuleIdMap 存在
+    if (!mpx.resourceModuleIdMap) {
+      mpx.resourceModuleIdMap = {}
+    }
+    // 记录 moduleId 和 filePath 的映射关系
+    mpx.resourceModuleIdMap[moduleId] = filePath
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.moduleId)
+    write(this.filePath)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.moduleId = read()
+    this.filePath = read()
+    super.deserialize(context)
+  }
+}
+
+RecordModuleIdMapDependency.Template = class RecordModuleIdMapDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RecordModuleIdMapDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordModuleIdMapDependency')
+
+module.exports = RecordModuleIdMapDependency

package/lib/dependencies/ResolveDependency.js

@@ -36,7 +36,7 @@ class ResolveDependency extends NullDependency {
     const resolveResult = pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
     if (!resolveResult) {
       if (!partialCompileRules || matchCondition(resourcePath, partialCompileRules)) {
-        compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
+        compilation.errors.push(new Error(`[Mpx json error]:Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
       }
     }
     return resolveResult

package/lib/helpers.js

@@ -69,6 +69,8 @@ module.exports = function createHelpers (loaderContext) {
         if (part.useJSONJS) options.useJSONJS = true
       // eslint-disable-next-line no-fallthrough
       case 'styles':
+        options.lang = part.lang
+      // eslint-disable-next-line no-fallthrough
       case 'template':
         options.extract = true
     }

package/lib/index.js

@@ -36,6 +36,7 @@ const FixDescriptionInfoPlugin = require('./resolver/FixDescriptionInfoPlugin')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordPageConfigMapDependency = require('./dependencies/RecordPageConfigsMapDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const RecordModuleIdMapDependency = require('./dependencies/RecordModuleIdMapDependency')
 const RecordGlobalComponentsDependency = require('./dependencies/RecordGlobalComponentsDependency')
 const RecordIndependentDependency = require('./dependencies/RecordIndependentDependency')
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
@@ -673,6 +674,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordResourceMapDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordResourceMapDependency, new RecordResourceMapDependency.Template())
 
+      compilation.dependencyFactories.set(RecordModuleIdMapDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordModuleIdMapDependency, new RecordModuleIdMapDependency.Template())
+
       compilation.dependencyFactories.set(RecordGlobalComponentsDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordGlobalComponentsDependency, new RecordGlobalComponentsDependency.Template())
 
@@ -721,6 +725,8 @@ class MpxWebpackPlugin {
           componentsMap: {
             main: {}
           },
+          // 资源与moduleId关系记录
+          resourceModuleIdMap: {},
           // 静态资源(图片，字体，独立样式)等，依照所属包进行记录
           staticResourcesMap: {
             main: {}
@@ -1684,11 +1690,12 @@ class MpxWebpackPlugin {
 
         if (this.options.generateBuildMap) {
           const pagesMap = compilation.__mpx__.pagesMap
+          const resourceModuleIdMap = compilation.__mpx__.resourceModuleIdMap
           const componentsPackageMap = compilation.__mpx__.componentsMap
           const componentsMap = Object.keys(componentsPackageMap).map(item => componentsPackageMap[item]).reduce((pre, cur) => {
             return { ...pre, ...cur }
           }, {})
-          const outputMap = JSON.stringify({ ...pagesMap, ...componentsMap })
+          const outputMap = JSON.stringify({ outputPathMap: { ...pagesMap, ...componentsMap }, moduleIdMap: resourceModuleIdMap })
           const filename = this.options.generateBuildMap.filename || 'outputMap.json'
           compilation.assets[filename] = new RawSource(outputMap)
         }
@@ -1900,24 +1907,41 @@ try {
       normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
         const { queryObj } = parseRequest(createData.request)
         const loaders = createData.loaders
+
+        // 样式 loader 类型检测和条件编译 loader 插入的工具函数
+        const STYLE_LOADER_TYPES = ['stylus-loader', 'sass-loader', 'less-loader', 'css-loader', wxssLoaderPath]
+        const injectStyleStripLoader = (loaders) => {
+          // 检查是否已经存在 stripLoader
+          const hasStripLoader = loaders.some(loader => {
+            const loaderPath = toPosix(loader.loader)
+            return loaderPath.includes('style-compiler/strip-conditional-loader')
+          })
+          if (hasStripLoader) {
+            return
+          }
+          const loaderTypes = new Map(STYLE_LOADER_TYPES.map(type => [`node_modules/${type}`, -1]))
+          loaders.forEach((loader, index) => {
+            const currentLoader = toPosix(loader.loader)
+            for (const [key] of loaderTypes) {
+              if (currentLoader.includes(key)) {
+                loaderTypes.set(key, index)
+                break
+              }
+            }
+          })
+          const targetIndex = STYLE_LOADER_TYPES
+            .map(type => loaderTypes.get(`node_modules/${type}`))
+            .find(index => index !== -1)
+
+          if (targetIndex !== undefined) {
+            loaders.splice(targetIndex + 1, 0, { loader: styleStripConditionalPath })
+          }
+        }
         if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
           const type = queryObj.type
           const extract = queryObj.extract
-
           if (type === 'styles') {
-            let insertBeforeIndex = -1
-            // 单次遍历收集所有索引
-            loaders.forEach((loader, index) => {
-              const currentLoader = toPosix(loader.loader)
-              if (currentLoader.includes('node_modules/stylus-loader') || currentLoader.includes('node_modules/sass-loader') || currentLoader.includes('node_modules/less-loader')) {
-                insertBeforeIndex = index
-              }
-            })
-
-            if (insertBeforeIndex !== -1) {
-              loaders.splice(insertBeforeIndex, 0, { loader: styleStripConditionalPath })
-            }
-            loaders.push({ loader: styleStripConditionalPath })
+            injectStyleStripLoader(loaders)
           }
 
           switch (type) {
@@ -1971,6 +1995,7 @@ try {
         }
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效
         if (isWeb(mpx.mode) && queryObj.mpxStyleOptions) {
+          injectStyleStripLoader(loaders)
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1

package/lib/json-compiler/helper.js

@@ -8,8 +8,10 @@ const loaderUtils = require('loader-utils')
 const resolve = require('../utils/resolve')
 const { matchCondition } = require('../utils/match-condition')
 const { isWeb, isReact } = require('../utils/env')
+const getBuildInTagComponent = require('../utils/get-build-tag-component')
+const { capitalToHyphen } = require('../utils/string')
 
-module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry }) {
+module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry, emitError }) {
   const mpx = loaderContext.getMpx()
   const resolveMode = mpx.resolveMode
   const externals = mpx.externals
@@ -158,7 +160,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       const { resourcePath } = parseRequest(resource)
       const relative = path.relative(context, resourcePath)
       if (/^\./.test(relative)) {
-        return callback(new Error(`The js export path ${resourcePath} must be in the context ${context}!`))
+        return callback(new Error(`[Mpx json error]:The js export path ${resourcePath} must be in the context ${context}!`))
       }
       const outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
       const entry = getDynamicEntry(resource, 'export', outputPath, tarRoot, publicPath + tarRoot)
@@ -166,11 +168,79 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
     })
   }
 
+  const fillInComponentPlaceholder = ({ jsonObj, name: componentName, placeholder, placeholderEntry, resolveResourcePathMap }, callback) => {
+    let placeholderComponentName = placeholder.name
+    const componentPlaceholder = jsonObj.componentPlaceholder || {}
+    if (componentPlaceholder[componentName]) {
+      callback()
+      return
+    }
+    jsonObj.componentPlaceholder = componentPlaceholder
+    if (placeholderEntry) {
+      if (resolveResourcePathMap.has(placeholderComponentName) && resolveResourcePathMap.get(placeholderComponentName) !== placeholder.resourcePath) {
+        // 如果存在placeholder与已有usingComponents冲突, 重新生成一个组件名，在当前组件后增加一个数字
+        let i = 1
+        let newPlaceholder = placeholderComponentName + i
+        while (jsonObj.usingComponents[newPlaceholder]) {
+          newPlaceholder = placeholderComponentName + ++i
+        }
+        placeholderComponentName = newPlaceholder
+      }
+      jsonObj.usingComponents[placeholderComponentName] = placeholderEntry
+      resolveResourcePathMap.set(placeholderComponentName, placeholder.resourcePath)
+    }
+    componentPlaceholder[componentName] = placeholderComponentName
+    callback(null, {
+      name: placeholderComponentName,
+      entry: placeholderEntry
+    })
+  }
+
+  const getNormalizePlaceholder = (placeholder) => {
+    if (typeof placeholder === 'string') {
+      placeholder = getBuildInTagComponent(mode, placeholder) || { name: placeholder }
+    }
+    if (!placeholder.name) {
+      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
+    }
+    // ali 下与 rulesRunner 规则一致，组件名驼峰转连字符
+    if (mode === 'ali') {
+      placeholder.name = capitalToHyphen(placeholder.name)
+    }
+    return placeholder
+  }
+
+  const processPlaceholder = ({ jsonObj, context, name, tarRoot, placeholder, relativePath, resolveResourcePathMap }, callback) => {
+    if (tarRoot) {
+      if (placeholder) {
+        placeholder = getNormalizePlaceholder(placeholder)
+        if (placeholder.resource) {
+          processComponent(placeholder.resource, context, { relativePath }, (err, entry, { resourcePath }) => {
+            if (err) return callback(err)
+            placeholder.resourcePath = resourcePath
+            fillInComponentPlaceholder({ jsonObj, name, placeholder, placeholderEntry: entry, resolveResourcePathMap }, callback)
+          })
+        } else {
+          fillInComponentPlaceholder({ jsonObj, name, placeholder }, callback)
+        }
+      } else {
+        if (!jsonObj.componentPlaceholder || !jsonObj.componentPlaceholder[name]) {
+          const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
+          emitError(errMsg)
+        }
+        callback()
+      }
+    } else {
+      callback()
+    }
+  }
+
   return {
     processComponent,
     processDynamicEntry,
     processPage,
     processJsExport,
+    processPlaceholder,
     isUrlRequest,
     urlToRequest
   }

package/lib/json-compiler/index.js

@@ -15,9 +15,6 @@ const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDe
 const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
 const resolve = require('../utils/resolve')
 const resolveTabBarPath = require('../utils/resolve-tab-bar-path')
-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')
 const resolveMpxCustomElementPath = require('../utils/resolve-mpx-custom-element-path')
 
 module.exports = function (content) {
@@ -43,7 +40,6 @@ module.exports = function (content) {
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
-  const projectRoot = mpx.projectRoot
 
   const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const publicPath = this._compilation.outputOptions.publicPath || ''
@@ -52,46 +48,24 @@ module.exports = function (content) {
 
   const emitWarning = (msg) => {
     this.emitWarning(
-      new Error('[json compiler][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + this.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     this.emitError(
-      new Error('[json compiler][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + this.resource + ']: ' + msg)
     )
   }
 
-  const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
-    const componentPlaceholder = json.componentPlaceholder || {}
-    if (componentPlaceholder[name]) return
-    componentPlaceholder[name] = placeholder
-    json.componentPlaceholder = componentPlaceholder
-    if (placeholderEntry && !json.usingComponents[placeholder]) json.usingComponents[placeholder] = placeholderEntry
-  }
-  const normalizePlaceholder = (placeholder) => {
-    if (typeof placeholder === 'string') {
-      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')
-    }
-    return placeholder
-  }
-
   const {
     isUrlRequest,
     urlToRequest,
     processPage,
     processDynamicEntry,
     processComponent,
-    processJsExport
+    processJsExport,
+    processPlaceholder
   } = createJSONHelper({
     loaderContext: this,
     emitWarning,
@@ -223,6 +197,9 @@ module.exports = function (content) {
 
   const processComponents = (components, context, callback) => {
     if (components) {
+      // 存在所有命中asyncSubpackageRules的组件
+      const asyncComponents = []
+      const resolveResourcePathMap = new Map()
       async.eachOf(components, (component, name, callback) => {
         processComponent(component, context, { relativePath }, (err, entry, { tarRoot, placeholder, resourcePath, queryObj = {} } = {}) => {
           if (err === RESOLVE_IGNORED_ERR) {
@@ -242,29 +219,9 @@ module.exports = function (content) {
               isDynamic: queryObj.isDynamic
             }
           }
-          if (tarRoot) {
-            if (placeholder) {
-              placeholder = normalizePlaceholder(placeholder)
-              if (placeholder.resource) {
-                processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
-                  if (err) return callback(err)
-                  fillInComponentPlaceholder(name, placeholder.name, entry)
-                  callback()
-                })
-              } else {
-                fillInComponentPlaceholder(name, placeholder.name)
-                callback()
-              }
-            } else {
-              if (!json.componentPlaceholder || !json.componentPlaceholder[name]) {
-                const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
-                emitError(errMsg)
-              }
-              callback()
-            }
-          } else {
-            callback()
-          }
+          resolveResourcePathMap.set(name, resourcePath)
+          if (tarRoot) asyncComponents.push({ name, tarRoot, placeholder, relativePath })
+          callback()
         })
       }, (err) => {
         if (err) return callback(err)
@@ -279,7 +236,10 @@ module.exports = function (content) {
           components.element = mpxCustomElementPath
           Object.assign(components, mpx.getPackageInjectedComponentsMap(packageName))
         }
-        callback()
+        // 使用async处理所有asyncComponents完成后调用callback
+        async.each(asyncComponents, ({ name, tarRoot, placeholder, relativePath }, callback) => {
+          processPlaceholder({ jsonObj: json, context, name, tarRoot, placeholder, relativePath, resolveResourcePathMap }, callback)
+        }, callback)
       })
     } else {
       callback()

package/lib/json-compiler/plugin.js

@@ -23,13 +23,13 @@ module.exports = function (source) {
 
   const emitWarning = (msg) => {
     this.emitWarning(
-      new Error('[plugin loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json warning][' + this.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     this.emitError(
-      new Error('[plugin loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + this.resource + ']: ' + msg)
     )
   }
 

package/lib/loader.js

@@ -10,6 +10,7 @@ const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
+const RecordModuleIdMapDependency = require('./dependencies/RecordModuleIdMapDependency')
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 const { isReact } = require('./utils/env')
 const preProcessJson = require('./utils/pre-process-json')
@@ -50,13 +51,13 @@ module.exports = function (content) {
 
   const emitWarning = (msg) => {
     this.emitWarning(
-      new Error('[mpx-loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json warning][' + this.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     this.emitError(
-      new Error('[mpx-loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + this.resource + ']: ' + msg)
     )
   }
 
@@ -87,6 +88,7 @@ module.exports = function (content) {
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
   const moduleId = mpx.getModuleId(resourcePath, ctorType === 'app')
+  this._module.addPresentationalDependency(new RecordModuleIdMapDependency(moduleId, resourcePath))
 
   const parts = parseComponent(content, {
     filePath,
@@ -121,6 +123,7 @@ module.exports = function (content) {
         componentPlaceholder,
         componentGenerics,
         usingComponentsInfo,
+        originalUsingComponents,
         jsonContent
       } = jsonInfo
       const hasScoped = parts.styles.some(({ scoped }) => scoped) || autoScope
@@ -144,7 +147,8 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
+          usingComponentsInfo,
+          originalUsingComponents,
           componentGenerics,
           autoScope,
           callback
@@ -166,7 +170,8 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
+          usingComponentsInfo,
+          originalUsingComponents,
           componentGenerics,
           autoScope,
           callback
@@ -235,6 +240,7 @@ module.exports = function (content) {
           ctorType,
           moduleId,
           usingComponentsInfo: JSON.stringify(usingComponentsInfo),
+          originalUsingComponents: JSON.stringify(originalUsingComponents),
           componentPlaceholder
           // 添加babel处理渲染函数中可能包含的...展开运算符
           // 由于...运算符应用范围极小以及babel成本极高，先关闭此特性后续看情况打开

package/lib/native-loader.js

@@ -8,6 +8,7 @@ const { JSON_JS_EXT } = require('./utils/const')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const RecordModuleIdMapDependency = require('./dependencies/RecordModuleIdMapDependency')
 const preProcessJson = require('./utils/pre-process-json')
 
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
@@ -23,7 +24,9 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
-  const moduleId = mpx.getModuleId(filePath)
+  const moduleId = mpx.getModuleId(filePath, false, this)
+  this._module.addPresentationalDependency(new RecordModuleIdMapDependency(moduleId, filePath))
+
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const mode = mpx.mode
@@ -104,13 +107,13 @@ module.exports = function (content) {
 
   const emitWarning = (msg) => {
     this.emitWarning(
-      new Error('[native-loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json warning][native-loader][' + this.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     this.emitError(
-      new Error('[native-loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json error][native-loader][' + this.resource + ']: ' + msg)
     )
   }
   let ctorType = pagesMap[resourcePath]

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

@@ -1,12 +1,9 @@
 const runRules = require('../../run-rules')
 const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
-const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
 const { isOriginTag, isBuildInWebTag, isBuildInReactTag } = require('../../../utils/dom-tag-config')
-
-const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
-const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
+const getBuildInTagComponent = require('../../../utils/get-build-tag-component')
 
 module.exports = function getSpec ({ warn, error }) {
   function print (mode, path, isError) {
@@ -46,28 +43,26 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // 处理支付宝 componentPlaceholder 不支持 view、text 原生标签
-  function aliComponentPlaceholderFallback (input) {
-    // 处理 驼峰转连字符
-    input = componentNameCapitalToHyphen('componentPlaceholder')(input)
+  // 将 placeholder 中使用的内建组件转化为 mpx-xxx, 并在 usingComponents 填充
+  function fixComponentPlaceholder (input, { mode }) {
+    if (!input.componentPlaceholder) return input
+    if (mode === 'ali') {
+      // 处理 驼峰转连字符
+      input = componentNameCapitalToHyphen('componentPlaceholder')(input)
+    }
     const componentPlaceholder = input.componentPlaceholder
-    const usingComponents = input.usingComponents || (input.usingComponents = {})
+    const usingComponents = input.usingComponents || {}
     for (const cph in componentPlaceholder) {
       const cur = componentPlaceholder[cph]
-      const placeholderCompMatched = cur.match(/^(?:view|text)$/g)
-      if (!Array.isArray(placeholderCompMatched)) continue
-      let compName, compPath
-      switch (placeholderCompMatched[0]) {
-        case 'view':
-          compName = 'mpx-view'
-          compPath = mpxViewPath
-          break
-        case 'text':
-          compName = 'mpx-text'
-          compPath = mpxTextPath
-      }
-      usingComponents[compName] = compPath
-      componentPlaceholder[cph] = compName
+      const comp = getBuildInTagComponent(mode, cur)
+      if (!comp || usingComponents[cur]) continue
+      const { name, resource } = comp
+      usingComponents[name] = resource
+      componentPlaceholder[cph] = name
     }
+
+    input.usingComponents = usingComponents
+    input.componentPlaceholder = componentPlaceholder
     return input
   }
 
@@ -172,7 +167,6 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'componentPlaceholder',
-      ali: aliComponentPlaceholderFallback,
       swan: deletePath(),
       jd: deletePath()
     },
@@ -190,6 +184,13 @@ module.exports = function getSpec ({ warn, error }) {
       ios: fixComponentName,
       android: fixComponentName,
       harmony: fixComponentName
+    },
+    {
+      ali: fixComponentPlaceholder,
+      web: fixComponentPlaceholder,
+      ios: fixComponentPlaceholder,
+      android: fixComponentPlaceholder,
+      harmony: fixComponentPlaceholder
     }
   ]
 
@@ -454,12 +455,6 @@ module.exports = function getSpec ({ warn, error }) {
         swan: getWindowRule(),
         tt: getWindowRule(),
         jd: getWindowRule()
-      },
-      {
-        web: fixComponentName,
-        ios: fixComponentName,
-        android: fixComponentName,
-        harmony: fixComponentName
       }
     ]
   }

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

@@ -315,7 +315,7 @@ module.exports = function getSpec ({ warn, error }) {
     switch (prop) {
       case bgPropMap.image: {
         // background-image 支持背景图/渐变/css var
-        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value)) {
+        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value) || value === 'none') {
           return { prop, value }
         } else {
           error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
@@ -359,6 +359,13 @@ module.exports = function getSpec ({ warn, error }) {
           error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
           return false
         }
+        // background: none
+        if (value === 'none') {
+          return [
+            { prop: bgPropMap.image, value },
+            { prop: bgPropMap.color, value: 'transparent' }
+          ]
+        }
         const bgMap = []
         const values = parseValues(value)
         values.forEach(item => {