@mpxjs/webpack-plugin 2.8.40-test → 2.8.40-test.2

package/lib/dependencies/DynamicEntryDependency.js

@@ -28,23 +28,10 @@ class DynamicEntryDependency extends NullDependency {
     return toPosix([request, entryType, outputPath, packageRoot, relativePath, context, ...range].join('|'))
   }
 
-  collectDynamicRequest (mpx) {
-    if (!this.packageRoot) return
-    const curValue = mpx.dynamicEntryInfo[this.packageRoot] = mpx.dynamicEntryInfo[this.packageRoot] || {
-      hasPage: false,
-      entries: []
-    }
-    if (this.entryType === 'page') {
-      curValue.hasPage = true
-    } else {
-      curValue.entries.push(this.request)
-    }
-  }
-
   addEntry (compilation, callback) {
     const mpx = compilation.__mpx__
     let { request, entryType, outputPath, relativePath, context, originEntryNode, publicPath, resolver } = this
-    this.collectDynamicRequest(mpx)
+
     async.waterfall([
       (callback) => {
         if (context && resolver) {
@@ -56,12 +43,13 @@ class DynamicEntryDependency extends NullDependency {
         }
       },
       (resource, callback) => {
+        const { resourcePath } = parseRequest(resource)
+
         if (!outputPath) {
-          const { resourcePath } = parseRequest(resource)
           outputPath = mpx.getOutputPath(resourcePath, entryType)
         }
 
-        const { packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
+        const { packageName, packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
           resource,
           outputPath,
           resourceType: entryType,
@@ -116,6 +104,12 @@ class DynamicEntryDependency extends NullDependency {
             .catch(err => callback(err))
 
           mpx.addEntryPromiseMap.set(key, addEntryPromise)
+          mpx.collectDynamicEntryInfo({
+            resource,
+            packageName,
+            filename,
+            entryType
+          })
         }
       }
     ], callback)

package/lib/index.js

@@ -14,6 +14,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')
@@ -112,7 +114,6 @@ class MpxWebpackPlugin {
   constructor (options = {}) {
     options.mode = options.mode || 'wx'
     options.env = options.env || ''
-
     options.srcMode = options.srcMode || options.mode
     if (options.mode !== options.srcMode && options.srcMode !== 'wx') {
       errors.push('MpxWebpackPlugin supports srcMode to be "wx" only temporarily!')
@@ -325,36 +326,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') {
@@ -493,17 +489,17 @@ class MpxWebpackPlugin {
     }, (compilation, callback) => {
       processSubpackagesEntriesMap(compilation, (err) => {
         if (err) return callback(err)
-        const checkRegisterPack = () => {
-          for (const packRoot in mpx.dynamicEntryInfo) {
-            const entryMap = mpx.dynamicEntryInfo[packRoot]
-            if (!entryMap.hasPage) {
+        const checkDynamicEntryInfo = () => {
+          for (const packageName in mpx.dynamicEntryInfo) {
+            const entryMap = mpx.dynamicEntryInfo[packageName]
+            if (packageName !== 'main' && !entryMap.hasPage) {
               // 引用未注册分包的所有资源
-              const strRequest = entryMap.entries.join(',')
-              compilation.errors.push(new Error(`资源${strRequest}目标是打入${packRoot}分包, 但是app.json中并未声明${packRoot}分包`))
+              const resources = entryMap.entries.map(info => info.resource).join(',')
+              compilation.errors.push(new Error(`资源${resources}通过分包异步声明为${packageName}分包, 但${packageName}分包未注册或不存在相关页面！`))
             }
           }
         }
-        checkRegisterPack()
+        checkDynamicEntryInfo()
         callback()
       })
     })
@@ -563,8 +559,8 @@ class MpxWebpackPlugin {
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
-      compilation.warnings = compilation.warnings.concat(warnings)
-      compilation.errors = compilation.errors.concat(errors)
+      compilation.warnings.push(...warnings)
+      compilation.errors.push(...errors)
       const moduleGraph = compilation.moduleGraph
 
       if (!compilation.__mpx__) {
@@ -593,7 +589,7 @@ class MpxWebpackPlugin {
           subpackagesEntriesMap: {},
           replacePathMap: {},
           exportModules: new Set(),
-          // 动态记录注册的分包与注册页面映射
+          // 记录动态添加入口的分包信息
           dynamicEntryInfo: {},
           // 记录entryModule与entryNode的对应关系，用于体积分析
           entryNodeModulesMap: new Map(),
@@ -635,8 +631,20 @@ 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] || {
+              hasPage: false,
+              entries: []
+            }
+            if (entryType === 'page') curInfo.hasPage = true
+            curInfo.entries.push({
+              entryType,
+              resource,
+              filename
+            })
+          },
           asyncSubpackageRules: this.options.asyncSubpackageRules,
           optimizeRenderRules: this.options.optimizeRenderRules,
           pathHash: (resourcePath) => {
@@ -645,7 +653,7 @@ class MpxWebpackPlugin {
             }
             return hash(resourcePath)
           },
-          addEntry (request, name, callback) {
+          addEntry: (request, name, callback) => {
             const dep = EntryPlugin.createDependency(request, { name })
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
@@ -813,10 +821,14 @@ class MpxWebpackPlugin {
       const rawProcessModuleDependencies = compilation.processModuleDependencies
       compilation.processModuleDependencies = (module, callback) => {
         const presentationalDependencies = module.presentationalDependencies || []
+        const errors = []
         async.forEach(presentationalDependencies.filter((dep) => dep.mpxAction), (dep, callback) => {
-          dep.mpxAction(module, compilation, callback)
-        }, (err) => {
-          if (err) compilation.errors.push(err)
+          dep.mpxAction(module, compilation, (err) => {
+            if (err) errors.push(err)
+            callback()
+          })
+        }, () => {
+          compilation.errors.push(...errors)
           rawProcessModuleDependencies.call(compilation, module, callback)
         })
       }
@@ -902,16 +914,17 @@ class MpxWebpackPlugin {
       }
 
       // hack process https://github.com/webpack/webpack/issues/16045
-      const _handleModuleBuildAndDependenciesRaw = compilation._handleModuleBuildAndDependencies
-
-      compilation._handleModuleBuildAndDependencies = (originModule, module, recursive, callback) => {
-        const rawCallback = callback
-        callback = (err) => {
-          if (err) return rawCallback(err)
-          return rawCallback(null, module)
-        }
-        return _handleModuleBuildAndDependenciesRaw.call(compilation, originModule, module, recursive, callback)
-      }
+      // no need anymore
+      // const _handleModuleBuildAndDependenciesRaw = compilation._handleModuleBuildAndDependencies
+      //
+      // compilation._handleModuleBuildAndDependencies = (originModule, module, recursive, callback) => {
+      //   const rawCallback = callback
+      //   callback = (err) => {
+      //     if (err) return rawCallback(err)
+      //     return rawCallback(null, module)
+      //   }
+      //   return _handleModuleBuildAndDependenciesRaw.call(compilation, originModule, module, recursive, callback)
+      // }
 
       const rawEmitAsset = compilation.emitAsset
 
@@ -1076,15 +1089,29 @@ class MpxWebpackPlugin {
               // 删除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
-                })
+              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

@@ -211,14 +211,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/loader.js

@@ -1,7 +1,6 @@
 const JSON5 = require('json5')
 const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
-const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
 const addQuery = require('./utils/add-query')
@@ -20,6 +19,7 @@ const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDepen
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
 const path = require('path')
+const processMainScript = require('./web/processMainScript')
 const getRulesRunner = require('./platform')
 
 module.exports = function (content) {
@@ -85,7 +85,6 @@ module.exports = function (content) {
     if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
   }
   const loaderContext = this
-  const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
   const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
@@ -154,23 +153,33 @@ module.exports = function (content) {
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         if (ctorType === 'app' && !queryObj.isApp) {
-          const request = addQuery(this.resource, { isApp: true })
-          const el = mpx.webConfig.el || '#app'
-          output += `
-      import App from ${stringifyRequest(request)}
-      import Vue from 'vue'
-      new Vue({
-        el: '${el}',
-        render: function(h){
-          return h(App)
-        }
-      })\n
-      `
-          // 直接结束loader进入parse
-          this.loaderIndex = -1
-          return callback(null, output)
+          return async.waterfall([
+            (callback) => {
+              processJSON(parts.json, { loaderContext, pagesMap, componentsMap }, callback)
+            },
+            (jsonRes, callback) => {
+              processMainScript(parts.script, {
+                loaderContext,
+                ctorType,
+                srcMode,
+                moduleId,
+                isProduction,
+                jsonConfig: jsonRes.jsonObj,
+                outputPath: queryObj.outputPath || '',
+                localComponentsMap: jsonRes.localComponentsMap,
+                tabBar: jsonRes.jsonObj.tabBar,
+                tabBarMap: jsonRes.tabBarMap,
+                tabBarStr: jsonRes.tabBarStr,
+                localPagesMap: jsonRes.localPagesMap,
+                resource: this.resource
+              }, callback)
+            }
+          ], (err, scriptRes) => {
+            if (err) return callback(err)
+            this.loaderIndex = -1
+            return callback(null, scriptRes.output)
+          })
         }
-
         // 通过RecordVueContentDependency和vueContentCache确保子request不再重复生成vueContent
         const cacheContent = mpx.vueContentCache.get(filePath)
         if (cacheContent) return callback(null, cacheContent)
@@ -213,10 +222,6 @@ module.exports = function (content) {
             output += templateRes.output
             output += stylesRes.output
             output += jsonRes.output
-            if (ctorType === 'app' && jsonRes.jsonObj.window && jsonRes.jsonObj.window.navigationBarTitleText) {
-              mpx.appTitle = jsonRes.jsonObj.window.navigationBarTitleText
-            }
-
             processScript(parts.script, {
               loaderContext,
               ctorType,
@@ -226,13 +231,10 @@ module.exports = function (content) {
               componentGenerics,
               jsonConfig: jsonRes.jsonObj,
               outputPath: queryObj.outputPath || '',
-              tabBarMap: jsonRes.tabBarMap,
-              tabBarStr: jsonRes.tabBarStr,
               builtInComponentsMap: templateRes.builtInComponentsMap,
               genericsInfo: templateRes.genericsInfo,
               wxsModuleMap: templateRes.wxsModuleMap,
-              localComponentsMap: jsonRes.localComponentsMap,
-              localPagesMap: jsonRes.localPagesMap
+              localComponentsMap: jsonRes.localComponentsMap
             }, callback)
           }
         ], (err, scriptRes) => {
@@ -242,7 +244,6 @@ module.exports = function (content) {
           callback(null, output)
         })
       }
-
       const moduleGraph = this._compilation.moduleGraph
 
       const issuer = moduleGraph.getIssuer(this._module)

package/lib/parser.js

@@ -2,7 +2,6 @@ const cache = require('lru-cache')(100)
 const hash = require('hash-sum')
 const compiler = require('./template-compiler/compiler')
 const SourceMapGenerator = require('source-map').SourceMapGenerator
-
 const splitRE = /\r?\n/g
 const emptyRE = /^(?:\/\/)?\s*$/
 

package/lib/platform/index.js

@@ -1,15 +1,26 @@
 const runRules = require('./run-rules')
 
-module.exports = function getRulesRunner ({ type, mode, srcMode, data, meta, testKey, mainKey, waterfall, warn, error }) {
+module.exports = function getRulesRunner ({
+  type,
+  mode,
+  srcMode,
+  data,
+  meta,
+  testKey,
+  mainKey,
+  waterfall,
+  warn,
+  error
+}) {
   const specMap = {
     template: {
-      wx: require('./template/wx')({ warn, error })
+      wx: require('./template/wx')
     },
     json: {
-      wx: require('./json/wx')({ warn, error })
+      wx: require('./json/wx')
     }
   }
-  const spec = specMap[type] && specMap[type][srcMode]
+  const spec = specMap[type]?.[srcMode]?.({ warn, error })
   if (spec && spec.supportedModes.indexOf(mode) > -1) {
     const normalizeTest = spec.normalizeTest
     const mainRules = mainKey ? spec[mainKey] : spec

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

@@ -128,10 +128,8 @@ module.exports = function getSpec ({ warn, error }) {
 
   /**
    * 将小程序代码中使用的与原生 HTML tag 或 内建组件 同名的组件进行转化，以解决与原生tag命名冲突问题。
-   * @param {string} type usingComponents
-   * @returns input
    */
-  function webHTMLTagProcesser (type) {
+  function fixComponentName (type) {
     return function (input) {
       const usingComponents = input[type]
       if (usingComponents) {
@@ -160,7 +158,7 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'usingComponents',
-      web: webHTMLTagProcesser('usingComponents')
+      web: fixComponentName('usingComponents')
     },
     {
       test: 'usingComponents',
@@ -365,7 +363,7 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        web: webHTMLTagProcesser('usingComponents')
+        web: fixComponentName('usingComponents')
       },
       {
         test: 'usingComponents',

package/lib/platform/run-rules.js

@@ -32,8 +32,7 @@ module.exports = function runRules (rules = [], input, options = {}) {
       if (result !== undefined) {
         input = result
       }
-      // rule 内外 waterfall 均为 false 时跳过
-      if (!rule.waterfall && !waterfall) break
+      if (!(rule.waterfall || waterfall)) break
     }
   }
   return input

package/lib/platform/template/normalize-component-rules.js

@@ -8,58 +8,57 @@ const runRules = require('../run-rules')
 module.exports = function normalizeComponentRules (cfgs, spec) {
   return cfgs.map((cfg) => {
     const result = {}
-    if (cfg.test) {
-      result.test = cfg.test
-    }
-    // 透传 waterfall 信息
+    if (cfg.test) result.test = cfg.test
     if (cfg.waterfall) result.waterfall = cfg.waterfall
     const supportedModes = cfg.supportedModes || spec.supportedModes
     // 合并component-config中组件的event 与index中公共的event规则
     const eventRules = (cfg.event || []).concat(spec.event.rules)
     supportedModes.forEach((mode) => {
-      result[mode] = function (el, data) {
-        data = Object.assign({}, data, { el, eventRules })
-        const testKey = 'name'
-        let rAttrsList = []
-        const options = {
-          mode,
-          testKey,
-          data
-        }
-        el.attrsList.forEach((attr) => {
-          const meta = {}
-          let rAttr = runRules(spec.directive, attr, {
-            ...options,
-            meta
-          })
-          // 指令未匹配到时说明为props，因为目前所有的指令都需要转换
-          if (!meta.processed) {
-            rAttr = runRules(spec.preProps, rAttr, options)
-            rAttr = runRules(cfg.props, rAttr, options)
+      result[mode] = cfg.skipNormalize
+        ? cfg[mode]
+        : function (el, data) {
+          data = Object.assign({}, data, { el, eventRules })
+          const testKey = 'name'
+          let rAttrsList = []
+          const options = {
+            mode,
+            testKey,
+            data
+          }
+          el.attrsList.forEach((attr) => {
+            const meta = {}
+            let rAttr = runRules(spec.directive, attr, {
+              ...options,
+              meta
+            })
+            // 指令未匹配到时说明为props，因为目前所有的指令都需要转换
+            if (!meta.processed) {
+              rAttr = runRules(spec.preProps, rAttr, options)
+              rAttr = runRules(cfg.props, rAttr, options)
+              if (Array.isArray(rAttr)) {
+                rAttr = rAttr.map((attr) => {
+                  return runRules(spec.postProps, attr, options)
+                })
+              } else if (rAttr !== false) {
+                rAttr = runRules(spec.postProps, rAttr, options)
+              }
+            }
+            // 生成目标attrsList
             if (Array.isArray(rAttr)) {
-              rAttr = rAttr.map((attr) => {
-                return runRules(spec.postProps, attr, options)
-              })
+              rAttrsList = rAttrsList.concat(rAttr)
             } else if (rAttr !== false) {
-              rAttr = runRules(spec.postProps, rAttr, options)
+              rAttrsList.push(rAttr)
             }
+          })
+          el.attrsList = rAttrsList
+          el.attrsMap = require('../../template-compiler/compiler').makeAttrsMap(rAttrsList)
+          // 前置处理attrs,便于携带信息用于tag的处理
+          const rTag = cfg[mode] && cfg[mode].call(this, el.tag, data)
+          if (rTag) {
+            el.tag = rTag
           }
-          // 生成目标attrsList
-          if (Array.isArray(rAttr)) {
-            rAttrsList = rAttrsList.concat(rAttr)
-          } else if (rAttr !== false) {
-            rAttrsList.push(rAttr)
-          }
-        })
-        el.attrsList = rAttrsList
-        el.attrsMap = require('../../template-compiler/compiler').makeAttrsMap(rAttrsList)
-        // 前置处理attrs,便于携带信息用于tag的处理
-        const rTag = cfg[mode] && cfg[mode].call(this, el.tag, data)
-        if (rTag) {
-          el.tag = rTag
+          return el
         }
-        return el
-      }
     })
     return result
   })

package/lib/platform/template/wx/component-config/component.js

@@ -1,5 +1,4 @@
-const templateCompiler = require('../../../../template-compiler/compiler')
-const parseMustache = templateCompiler.parseMustache
+const { parseMustache } = require('../../../../template-compiler/compiler')
 const normalize = require('../../../../utils/normalize')
 const TAG_NAME = 'component'
 

package/lib/platform/template/wx/component-config/fix-component-name.js

@@ -0,0 +1,21 @@
+const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
+
+module.exports = function () {
+  return {
+    waterfall: true,
+    skipNormalize: true,
+    supportedModes: ['web'],
+    test: (input) => isOriginTag(input) || isBuildInTag(input),
+    // 输出web时对组件名进行转义避免与原生tag和内建tag冲突
+    web (el, data) {
+      const newTag = `mpx-com-${el.tag}`
+      const usingComponents = data.usingComponents || []
+      // 当前组件名与原生tag或内建tag同名，对组件名进行转义
+      // json转义见：platform/json/wx/index.js fixComponentName
+      if (usingComponents.includes(newTag)) {
+        el.tag = newTag
+      }
+      return el
+    }
+  }
+}