@mpxjs/webpack-plugin 2.10.15 → 2.10.16-beta.11

package/lib/config.js

@@ -553,6 +553,66 @@ module.exports = {
       show: 'dd:show'
     }
   },
+  ks: {
+    typeExtMap: {
+      json: '.json',
+      script: '.js',
+      template: '.ksml',
+      styles: '.css'
+    },
+    tabBar: {
+      itemKey: 'list',
+      iconKey: 'iconPath',
+      activeIconKey: 'selectedIconPath'
+    },
+    event: {
+      parseEvent (attr) {
+        const match = /^(bind|catch|capture-bind|capture-catch):?(.*?)(?:\.(.*))?$/.exec(attr)
+        if (match) {
+          return {
+            prefix: match[1],
+            eventName: match[2],
+            modifier: match[3]
+          }
+        }
+      },
+      getEvent (eventName, prefix = 'bind') {
+         if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
+      },
+      defaultModelProp: 'value',
+      defaultModelEvent: 'input',
+      defaultModelValuePath: 'value'
+    },
+    wxs: {
+      tag: 'ks',
+      module: 'module',
+      src: 'src',
+      ext: '.ks',
+      templatePrefix: 'module.exports = \n'
+    },
+    directive: {
+      if: 'ks:if',
+      elseif: 'ks:elif',
+      else: 'ks:else',
+      for: 'ks:for',
+      forIndex: 'ks:for-index',
+      forItem: 'ks:for-item',
+      key: 'ks:key',
+      dynamicClass: 'ks:class',
+      dynamicStyle: 'ks:style',
+      ref: 'ks:ref',
+      show: 'ks:show',
+      model: 'ks:model',
+      modelProp: 'ks:model-prop',
+      modelEvent: 'ks:model-event',
+      modelValuePath: 'ks:model-value-path',
+      modelFilter: 'ks:model-filter'
+    }
+  },
   ios: reactConfig,
   android: reactConfig,
   harmony: reactConfig

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/DynamicEntryDependency.js

@@ -6,7 +6,7 @@ const toPosix = require('../utils/to-posix')
 const async = require('async')
 const parseRequest = require('../utils/parse-request')
 const hasOwn = require('../utils/has-own')
-const { RetryRuntimeGlobal } = require('../retry-runtime-module')
+const { RetryRuntimeGlobal } = require('./RetryRuntimeModule')
 
 class DynamicEntryDependency extends NullDependency {
   constructor (range, request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', extraOptions = {}) {

package/lib/dependencies/ImportDependency.js

@@ -0,0 +1,102 @@
+const Dependency = require('webpack/lib/Dependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const { RetryRuntimeGlobal } = require('./RetryRuntimeModule')
+
+class ImportDependency extends ModuleDependency {
+  /**
+   * @param {string} request the request
+   * @param {[number, number]} range expression range
+   * @param {string[][]=} referencedExports list of referenced exports
+   */
+  constructor (request, range, referencedExports, extraOptions) {
+    super(request)
+    this.range = range
+    this.referencedExports = referencedExports
+    this.extraOptions = extraOptions
+  }
+
+  get type () {
+    return 'import()'
+  }
+
+  get category () {
+    return 'esm'
+  }
+
+  /**
+   * Returns list of exports referenced by this dependency
+   * @param {ModuleGraph} moduleGraph module graph
+   * @param {RuntimeSpec} runtime the runtime for which the module is analysed
+   * @returns {(string[] | ReferencedExport)[]} referenced exports
+   */
+  getReferencedExports (moduleGraph, runtime) {
+    return this.referencedExports
+      ? this.referencedExports.map((e) => ({
+          name: e,
+          canMangle: false
+        }))
+      : Dependency.EXPORTS_OBJECT_REFERENCED
+  }
+
+  serialize (context) {
+    context.write(this.range)
+    context.write(this.referencedExports)
+    context.write(this.extraOptions)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    this.range = context.read()
+    this.referencedExports = context.read()
+    this.extraOptions = context.read()
+    super.deserialize(context)
+  }
+}
+
+makeSerializable(ImportDependency, '@mpxjs/webpack-plugin/lib/dependencies/ImportDependency')
+
+ImportDependency.Template = class ImportDependencyTemplate extends (
+  ModuleDependency.Template
+) {
+  /**
+   * @param {Dependency} dependency the dependency for which the template should be applied
+   * @param {ReplaceSource} source the current replace source which can be modified
+   * @param {DependencyTemplateContext} templateContext the context object
+   * @returns {void}
+   */
+  apply (
+    dependency,
+    source,
+    { runtimeTemplate, module, moduleGraph, chunkGraph, runtimeRequirements }
+  ) {
+    const dep = /** @type {ImportDependency} */ (dependency)
+    const block = /** @type {AsyncDependenciesBlock} */ (
+      moduleGraph.getParentBlock(dep)
+    )
+    let content = runtimeTemplate.moduleNamespacePromise({
+      chunkGraph,
+      block: block,
+      module: /** @type {Module} */ (moduleGraph.getModule(dep)),
+      request: dep.request,
+      strict: /** @type {BuildMeta} */ (module.buildMeta).strictHarmonyModule,
+      message: 'import()',
+      runtimeRequirements
+    })
+    // replace fakeType by 9 to fix require.async to commonjs2 module like 'module.exports = function(){...}'
+    content = content.replace(/(__webpack_require__\.t\.bind\(.+,\s*)(\d+)(\s*\))/, (_, p1, p2, p3) => {
+      return p1 + '9' + p3
+    })
+
+    // require.async 的场景且配置了重试次数才注入 RetryRuntimeModule
+    const extraOptions = dep.extraOptions || {}
+    if (extraOptions.isRequireAsync && extraOptions.retryRequireAsync && extraOptions.retryRequireAsync.times > 0) {
+      runtimeRequirements.add(RetryRuntimeGlobal)
+      content = `${RetryRuntimeGlobal}(function() { return ${content} }, ${extraOptions.retryRequireAsync.times}, ${extraOptions.retryRequireAsync.interval})`
+    }
+
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+}
+
+module.exports = ImportDependency

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/{retry-runtime-module.js → dependencies/RetryRuntimeModule.js}

@@ -1,7 +1,7 @@
 const Template = require('webpack/lib/Template')
 const RuntimeModule = require('webpack/lib/RuntimeModule')
 
-const RetryRuntimeGlobal = '__webpack_require__.__retry'
+const RetryRuntimeGlobal = '__webpack_require__.mpxR'
 
 class RetryRuntimeModule extends RuntimeModule {
   constructor () {

package/lib/file-loader.js

@@ -8,7 +8,9 @@ module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
   const context = options.context || this.rootContext
   const mpx = this.getMpx()
-  const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
+
+  const { mode } = mpx
+  const isRN = ['ios', 'android', 'harmony'].includes(mode)
 
   let url = loaderUtils.interpolateName(this, options.name, {
     context,
@@ -17,6 +19,7 @@ module.exports = function loader (content, prevOptions) {
   })
 
   let outputPath = url
+  const { resourcePath, queryObj } = parseRequest(this.resource)
 
   if (options.publicPath) {
     if (options.outputPathCDN) {
@@ -27,13 +30,19 @@ module.exports = function loader (content, prevOptions) {
       }
     }
   } else {
-    const { resourcePath, queryObj } = parseRequest(this.resource)
     const packageRoot = queryObj.packageRoot || ''
     url = outputPath = toPosix(path.join(packageRoot, outputPath))
     this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', outputPath, packageRoot))
   }
 
-  let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
+  let publicPath
+
+  // 快手小程序 tabbar icon 资源路径不能以 / 开头
+  if (queryObj.from === 'tabbar' && mode === 'ks') {
+    publicPath = JSON.stringify(url)
+  } else {
+    publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
+  }
 
   if (isRN) {
     publicPath = `__mpx_require_external__(${JSON.stringify(url)})`
@@ -47,6 +56,7 @@ module.exports = function loader (content, prevOptions) {
         ? options.publicPath
         : `${options.publicPath}/`}${url}`
     }
+
     publicPath = JSON.stringify(publicPath)
   }
 

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

@@ -14,8 +14,7 @@ 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 ImportDependencyTemplate = require('./dependencies/ImportDependencyTemplate')
+const ImportDependency = require('./dependencies/ImportDependency')
 const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock')
 const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const normalize = require('./utils/normalize')
@@ -37,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')
@@ -77,8 +77,10 @@ const VirtualModulesPlugin = require('webpack-virtual-modules')
 const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
 const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
 const ExternalModule = require('webpack/lib/ExternalModule')
-const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./retry-runtime-module')
-require('./utils/check-core-version-match')
+const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./dependencies/RetryRuntimeModule')
+const checkVersionCompatibility = require('./utils/check-core-version-match')
+
+checkVersionCompatibility()
 
 const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
@@ -672,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())
 
@@ -696,7 +701,8 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RequireExternalDependency, new NullFactory())
       compilation.dependencyTemplates.set(RequireExternalDependency, new RequireExternalDependency.Template())
 
-      compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
+      compilation.dependencyFactories.set(ImportDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(ImportDependency, new ImportDependency.Template())
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
@@ -719,6 +725,8 @@ class MpxWebpackPlugin {
           componentsMap: {
             main: {}
           },
+          // 资源与moduleId关系记录
+          resourceModuleIdMap: {},
           // 静态资源(图片，字体，独立样式)等，依照所属包进行记录
           staticResourcesMap: {
             main: {}
@@ -1451,10 +1459,6 @@ class MpxWebpackPlugin {
               if (mpx.supportRequireAsync) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
-                  request = addQuery(request, {
-                    isRequireAsync: true,
-                    retryRequireAsync: JSON.stringify(this.options.retryRequireAsync)
-                  })
                   const depBlock = new AsyncDependenciesBlock(
                     {
                       name: tarRoot + '/index'
@@ -1462,7 +1466,10 @@ class MpxWebpackPlugin {
                     expr.loc,
                     request
                   )
-                  const dep = new ImportDependency(request, expr.range)
+                  const dep = new ImportDependency(request, expr.range, undefined, {
+                    isRequireAsync: true,
+                    retryRequireAsync: this.options.retryRequireAsync
+                  })
                   dep.loc = expr.loc
                   depBlock.addDependency(dep)
                   parser.state.current.addBlock(depBlock)
@@ -1683,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)
         }
@@ -1899,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) {
@@ -1970,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
   }