@mpxjs/webpack-plugin 2.9.66 → 2.9.69

package/lib/dependencies/RecordGlobalComponentsDependency.js

@@ -1,11 +1,11 @@
 const NullDependency = require('webpack/lib/dependencies/NullDependency')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
-const addQuery = require('../utils/add-query')
 
 class RecordGlobalComponentsDependency extends NullDependency {
-  constructor (usingComponents, context) {
+  constructor (globalComponents, globalComponentsInfo, context) {
     super()
-    this.usingComponents = usingComponents
+    this.globalComponents = globalComponents
+    this.globalComponentsInfo = globalComponentsInfo
     this.context = context
   }
 
@@ -15,26 +15,25 @@ class RecordGlobalComponentsDependency extends NullDependency {
 
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
-    const { usingComponents, context } = this
-    Object.keys(usingComponents).forEach((key) => {
-      const request = usingComponents[key]
-      mpx.usingComponents[key] = addQuery(request, {
-        context
-      })
-    })
+    const { globalComponents, globalComponentsInfo } = this
+
+    mpx.globalComponents = globalComponents
+    mpx.globalComponentsInfo = globalComponentsInfo
     return callback()
   }
 
   serialize (context) {
     const { write } = context
-    write(this.usingComponents)
+    write(this.globalComponents)
+    write(this.globalComponentsInfo)
     write(this.context)
     super.serialize(context)
   }
 
   deserialize (context) {
     const { read } = context
-    this.usingComponents = read()
+    this.globalComponents = read()
+    this.globalComponentsInfo = read()
     this.context = read()
     super.deserialize(context)
   }

package/lib/dependencies/RecordRuntimeInfoDependency.js

@@ -23,7 +23,7 @@ class RecordRuntimeInfoDependency extends NullDependency {
       template: {},
       json: {},
       style: [],
-      moduleId: '_' + mpx.pathHash(this.resourcePath)
+      moduleId: mpx.getModuleId(this.resourcePath)
     }
 
     const infoConfig = componentInfo[this.blockType]

package/lib/index.js

@@ -63,7 +63,7 @@ const async = require('async')
 const { parseQuery } = require('loader-utils')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
 const emitFile = require('./utils/emit-file')
-const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/const')
+const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE, MPX_APP_MODULE_ID } = require('./utils/const')
 const isEmptyObject = require('./utils/is-empty-object')
 const DynamicPlugin = require('./resolver/DynamicPlugin')
 const { isReact, isWeb } = require('./utils/env')
@@ -159,7 +159,6 @@ class MpxWebpackPlugin {
       return externalsMap[external] || external
     })
     options.projectRoot = options.projectRoot || process.cwd()
-    options.projectName = options.projectName || 'AwesomeProject'
     options.forceUsePageCtor = options.forceUsePageCtor || false
     options.postcssInlineConfig = options.postcssInlineConfig || {}
     options.transRpxRules = options.transRpxRules || null
@@ -180,6 +179,7 @@ class MpxWebpackPlugin {
       include: () => true
     }
     options.customOutputPath = options.customOutputPath || null
+    options.customComponentModuleId = options.customComponentModuleId || null
     options.nativeConfig = Object.assign({
       cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
     }, options.nativeConfig)
@@ -348,7 +348,19 @@ class MpxWebpackPlugin {
       compiler.options.node.global = true
     }
 
-    const addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
+    const addModeOptions = {
+      fileConditionRules: this.options.fileConditionRules
+    }
+    const mode = this.options.mode
+    if (mode === 'web' || mode === 'ios' || mode === 'android' || mode === 'harmony') {
+      // 'web' | 'ios' | 'android' | 'harmony' 下，使用implicitMode强制进行平台转换
+      addModeOptions.implicitMode = true
+    }
+    if (mode === 'android' || mode === 'harmony') {
+      // 'android' | 'harmony' 下，使用 mode = 'ios' 进行兼容兜底
+      addModeOptions.defaultMode = 'ios'
+    }
+    const addModePlugin = new AddModePlugin('before-file', this.options.mode, addModeOptions, 'file')
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
     const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
     const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
@@ -673,7 +685,8 @@ class MpxWebpackPlugin {
           assetsModulesMap: new Map(),
           // 记录与asset相关联的ast，用于体积分析和esCheck，避免重复parse
           assetsASTsMap: new Map(),
-          usingComponents: {},
+          globalComponents: {},
+          globalComponentsInfo: {},
           // todo es6 map读写性能高于object，之后会逐步替换
           wxsAssetsCache: new Map(),
           addEntryPromiseMap: new Map(),
@@ -686,7 +699,6 @@ class MpxWebpackPlugin {
           env: this.options.env,
           externalClasses: this.options.externalClasses,
           projectRoot: this.options.projectRoot,
-          projectName: this.options.projectName,
           autoScopeRules: this.options.autoScopeRules,
           autoVirtualHostRules: this.options.autoVirtualHostRules,
           customTextRules: this.options.customTextRules,
@@ -740,6 +752,15 @@ class MpxWebpackPlugin {
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
           },
+          getModuleId: (filePath, isApp = false) => {
+            if (isApp) return MPX_APP_MODULE_ID
+            const customComponentModuleId = this.options.customComponentModuleId
+            if (typeof customComponentModuleId === 'function') {
+              const customModuleId = customComponentModuleId(filePath)
+              if (customModuleId) return customModuleId
+            }
+            return '_' + mpx.pathHash(filePath)
+          },
           getEntryNode: (module, type) => {
             const entryNodeModulesMap = mpx.entryNodeModulesMap
             let entryNode = entryNodeModulesMap.get(module)
@@ -759,7 +780,7 @@ class MpxWebpackPlugin {
             const hash = mpx.pathHash(resourcePath)
             const customOutputPath = this.options.customOutputPath
             if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
-            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext).replace(/^\//, '')
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext, resourcePath).replace(/^\//, '')
             if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
             return path.join(type, name + hash + ext)
           },
@@ -1814,8 +1835,8 @@ try {
           }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
-
-        if (isWeb(mpx.mode)) {
+        // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效
+        if (isWeb(mpx.mode) && queryObj.mpxStyleOptions) {
           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/index.js

@@ -10,7 +10,6 @@ const addQuery = require('../utils/add-query')
 const getJSONContent = require('../utils/get-json-content')
 const createHelpers = require('../helpers')
 const createJSONHelper = require('./helper')
-const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
 const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
 const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
@@ -208,8 +207,8 @@ module.exports = function (content) {
     warn: emitWarning,
     error: emitError,
     data: {
-      // polyfill global usingComponents & record globalComponents
-      globalComponents: mpx.usingComponents
+      // polyfill global usingComponents
+      globalComponents: mpx.globalComponents
     }
   }
   if (!isApp) {
@@ -222,14 +221,6 @@ module.exports = function (content) {
     rulesRunner(json)
   }
 
-  if (isApp) {
-    Object.assign(mpx.usingComponents, json.usingComponents)
-    // 在 rulesRunner 运行后保存全局注册组件
-    // todo 其余地方在使用mpx.usingComponents时存在缓存问题，要规避该问题需要在所有使用mpx.usingComponents的loader中添加app resourcePath作为fileDependency，但对于缓存有效率影响巨大
-    // todo 需要考虑一种精准控制缓存的方式，仅在全局组件发生变更时才使相关使用方的缓存失效，例如按需在相关模块上动态添加request query？
-    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, this.context))
-  }
-
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {

package/lib/loader.js

@@ -1,11 +1,9 @@
-const JSON5 = require('json5')
 const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
 const addQuery = require('./utils/add-query')
 const async = require('async')
-const getJSONContent = require('./utils/get-json-content')
 const normalize = require('./utils/normalize')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
@@ -13,12 +11,11 @@ const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDep
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
-const { MPX_APP_MODULE_ID } = require('./utils/const')
 const { isReact } = require('./utils/env')
+const preProcessJson = require('./utils/pre-process-json')
 const path = require('path')
 const processWeb = require('./web')
 const processReact = require('./react')
-const getRulesRunner = require('./platform')
 const genMpxCustomElement = require('./runtime-render/gen-mpx-custom-element')
 
 module.exports = function (content) {
@@ -89,7 +86,7 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
-  const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : '_' + mpx.pathHash(filePath)
+  const moduleId = mpx.getModuleId(resourcePath, ctorType === 'app')
 
   const parts = parseComponent(content, {
     filePath,
@@ -106,55 +103,36 @@ module.exports = function (content) {
 
   async.waterfall([
     (callback) => {
-      getJSONContent(parts.json || {}, null, loaderContext, (err, content) => {
+      preProcessJson({
+        json: parts.json || {},
+        srcMode,
+        emitWarning,
+        emitError,
+        ctorType,
+        resourcePath,
+        loaderContext
+      }, (err, jsonInfo) => {
         if (err) return callback(err)
-        if (parts.json) parts.json.content = content
-        callback()
+        callback(null, jsonInfo)
       })
     },
-    (callback) => {
+    (jsonInfo, callback) => {
+      const {
+        componentPlaceholder,
+        componentGenerics,
+        usingComponentsInfo,
+        jsonContent
+      } = jsonInfo
       const hasScoped = parts.styles.some(({ scoped }) => scoped) || autoScope
       const templateAttrs = parts.template && parts.template.attrs
       const hasComment = templateAttrs && templateAttrs.comments
       const isNative = false
 
-      let usingComponents = [].concat(Object.keys(mpx.usingComponents))
-      let componentPlaceholder = []
-      let componentGenerics = {}
-
-      if (parts.json && parts.json.content) {
-        const rulesRunnerOptions = {
-          mode,
-          srcMode,
-          type: 'json',
-          waterfall: true,
-          warn: emitWarning,
-          error: emitError
-        }
-        if (ctorType !== 'app') {
-          rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-        }
-        const rulesRunner = getRulesRunner(rulesRunnerOptions)
-        try {
-          const ret = JSON5.parse(parts.json.content)
-          if (rulesRunner) rulesRunner(ret)
-          if (ret.usingComponents) {
-            usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
-          }
-          if (ret.componentPlaceholder) {
-            componentPlaceholder = componentPlaceholder.concat(Object.values(ret.componentPlaceholder))
-          }
-          if (ret.componentGenerics) {
-            componentGenerics = Object.assign({}, ret.componentGenerics)
-          }
-        } catch (e) {
-          return callback(e)
-        }
-      }
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         return processWeb({
           parts,
+          jsonContent,
           loaderContext,
           pagesMap,
           componentsMap,
@@ -166,7 +144,7 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          usingComponents,
+          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
           componentGenerics,
           autoScope,
           callback
@@ -176,6 +154,7 @@ module.exports = function (content) {
       if (isReact(mode)) {
         return processReact({
           parts,
+          jsonContent,
           loaderContext,
           pagesMap,
           componentsMap,
@@ -187,7 +166,7 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          usingComponents,
+          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
           componentGenerics,
           autoScope,
           callback
@@ -255,7 +234,7 @@ module.exports = function (content) {
           isNative,
           ctorType,
           moduleId,
-          usingComponents,
+          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
           componentPlaceholder
           // 添加babel处理渲染函数中可能包含的...展开运算符
           // 由于...运算符应用范围极小以及babel成本极高，先关闭此特性后续看情况打开

package/lib/native-loader.js

@@ -1,16 +1,14 @@
 const path = require('path')
-const JSON5 = require('json5')
 const parseRequest = require('./utils/parse-request')
 const config = require('./config')
 const createHelpers = require('./helpers')
-const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
-const { JSON_JS_EXT, MPX_APP_MODULE_ID } = require('./utils/const')
-const getRulesRunner = require('./platform')
+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 preProcessJson = require('./utils/pre-process-json')
 
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
@@ -25,6 +23,7 @@ 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 { resourcePath, queryObj } = parseRequest(this.resource)
   const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const mode = mpx.mode
@@ -114,7 +113,29 @@ module.exports = function (content) {
       new Error('[native-loader][' + this.resource + ']: ' + msg)
     )
   }
+  let ctorType = pagesMap[resourcePath]
+    ? 'page'
+    : componentsMap[resourcePath]
+      ? 'component'
+      : 'app'
+  // 处理构造器类型
+  const ctor = ctorType === 'page'
+    ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
+    : ctorType === 'component'
+      ? 'Component'
+      : 'App'
+
+  // 支持资源query传入isPage或isComponent支持页面/组件单独编译
+  if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
+    const entryName = getEntryName(this) || mpx.getOutputPath(resourcePath, queryObj.isComponent ? 'component' : 'page')
+    ctorType = queryObj.isComponent ? 'component' : 'page'
+    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
+  }
 
+  if (ctorType === 'app') {
+    const appName = getEntryName(this)
+    if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+  }
   // 先读取json获取usingComponents信息
   async.waterfall([
     (callback) => {
@@ -141,66 +162,29 @@ module.exports = function (content) {
       }, callback)
     },
     (callback) => {
-      getJSONContent({
-        src: typeResourceMap.json,
-        useJSONJS
-      }, null, this, callback)
-    }, (content, callback) => {
-      let componentPlaceholder = []
-      let json
-      try {
-        json = JSON5.parse(content)
-      } catch (e) {
-        return callback(e)
-      }
-      let usingComponents = Object.keys(mpx.usingComponents)
-      const rulesRunnerOptions = {
-        mode,
+      preProcessJson({
+        json: {
+          src: typeResourceMap.json,
+          useJSONJS
+        },
         srcMode,
-        type: 'json',
-        waterfall: true,
-        warn: emitWarning,
-        error: emitError
-      }
-
-      let ctorType = pagesMap[resourcePath]
-        ? 'page'
-        : componentsMap[resourcePath]
-          ? 'component'
-          : 'app'
-
-      // 支持资源query传入isPage或isComponent支持页面/组件单独编译
-      if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
-        const entryName = getEntryName(this) || mpx.getOutputPath(resourcePath, queryObj.isComponent ? 'component' : 'page')
-        ctorType = queryObj.isComponent ? 'component' : 'page'
-        this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
-      }
-
-      // 处理构造器类型
-      const ctor = ctorType === 'page'
-        ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
-        : ctorType === 'component'
-          ? 'Component'
-          : 'App'
-
-      if (ctorType === 'app') {
-        const appName = getEntryName(this)
-        if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
-      }
-
-      const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : '_' + mpx.pathHash(filePath)
+        emitWarning,
+        emitError,
+        ctorType,
+        resourcePath,
+        loaderContext
+      }, (err, jsonInfo) => {
+        if (err) return callback(err)
+        callback(null, jsonInfo)
+      })
+    },
+    (jsonInfo, callback) => {
+      const {
+        componentPlaceholder,
+        componentGenerics,
+        usingComponentsInfo
+      } = jsonInfo
 
-      if (ctorType !== 'app') {
-        rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-      }
-      const rulesRunner = getRulesRunner(rulesRunnerOptions)
-      if (rulesRunner) rulesRunner(json)
-      if (json.usingComponents) {
-        usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
-      }
-      if (json.componentPlaceholder) {
-        componentPlaceholder = componentPlaceholder.concat(Object.values(json.componentPlaceholder))
-      }
       const {
         getRequire
       } = createHelpers(loaderContext)
@@ -222,8 +206,9 @@ module.exports = function (content) {
               isNative,
               ctorType,
               moduleId,
-              usingComponents,
-              componentPlaceholder
+              componentGenerics,
+              componentPlaceholder,
+              usingComponentsInfo: JSON.stringify(usingComponentsInfo)
             })
             break
           case 'styles':

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

@@ -84,10 +84,9 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
-  function fillGlobalComponents (input, { globalComponents }) {
-    if (globalComponents) {
-      Object.assign(globalComponents, input.usingComponents)
-    }
+  function fillGlobalComponents (input, { globalComponents }, meta) {
+    // 通过meta进行globalComponents的透传
+    meta.usingComponents = input.usingComponents
     return input
   }
 
@@ -165,8 +164,6 @@ module.exports = function getSpec ({ warn, error }) {
       swan: componentNameCapitalToHyphen('usingComponents')
     },
     {
-      // todo ali 2.0已支持全局组件，待移除
-      ali: addGlobalComponents,
       swan: addGlobalComponents,
       qq: addGlobalComponents,
       tt: addGlobalComponents,
@@ -373,8 +370,6 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        // todo ali 2.0已支持全局组件，待移除
-        ali: fillGlobalComponents,
         qq: fillGlobalComponents,
         swan: fillGlobalComponents,
         tt: fillGlobalComponents,
@@ -382,8 +377,6 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        // todo ali 2.0已支持全局组件，待移除
-        ali: deletePath({ noLog: true }),
         qq: deletePath({ noLog: true }),
         swan: deletePath({ noLog: true }),
         tt: deletePath({ noLog: true }),

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

@@ -201,6 +201,11 @@ module.exports = function getSpec ({ warn, error }) {
     const props = AbbreviationMap[prop]
     const values = Array.isArray(value) ? value : parseValues(value)
     const cssMap = []
+    // 复合属性不支持单个css var（css var可以接收单个值可以是复合值，复合值运行时不处理，这里前置提示一下）
+    if (values.length === 1 && cssVariableExp.test(value)) {
+      error(`Property ${prop} in ${selector} is abbreviated property and does not support a single CSS var`)
+      return cssMap
+    }
     let idx = 0
     let propsIdx = 0
     const diff = values.length - props.length
@@ -296,16 +301,12 @@ module.exports = function getSpec ({ warn, error }) {
       all: 'background'
     }
     const urlExp = /url\(["']?(.*?)["']?\)/
-    const linerExp = /linear-gradient\(.*\)\s*$/
+    const linearExp = /linear-gradient\(.*\)/
     switch (prop) {
       case bgPropMap.image: {
-        // background-image 仅支持背景图
-        const imgUrl = value.match(urlExp)?.[0]
-        const linerVal = value.match(linerExp)?.[0]
-        if (imgUrl) {
-          return { prop, value: imgUrl }
-        } else if (linerVal) {
-          return { prop, value: linerVal }
+        // background-image 支持背景图/渐变/css var
+        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value)) {
+          return { prop, value }
         } else {
           error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
           return false
@@ -344,11 +345,15 @@ module.exports = function getSpec ({ warn, error }) {
       }
       case bgPropMap.all: {
         // background: 仅支持 background-image & background-color & background-repeat
+        if (cssVariableExp.test(value)) {
+          error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
+          return false
+        }
         const bgMap = []
         const values = parseValues(value)
         values.forEach(item => {
           const url = item.match(urlExp)?.[0]
-          const linerVal = item.match(linerExp)?.[0]
+          const linerVal = item.match(linearExp)?.[0]
           if (url) {
             bgMap.push({ prop: bgPropMap.image, value: url })
           } else if (linerVal) {
@@ -404,7 +409,7 @@ module.exports = function getSpec ({ warn, error }) {
             {
               // 2 个以上的值处理
               key = key.replace('3d', '')
-              const vals = val.split(',').splice(0, key === 'rotate' ? 4 : 3)
+              const vals = val.split(',', key === 'rotate' ? 4 : 3)
               // scale(.5) === scaleX(.5) scaleY(.5)
               if (vals.length === 1 && key === 'scale') {
                 vals.push(vals[0])

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

@@ -8,6 +8,14 @@ module.exports = function ({ print }) {
   const qaEventLog = print({ platform: 'qa', tag: TAG_NAME, isError: false, type: 'event' })
   return {
     test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
     props: [
       {
         test: /^canvas-id$/,

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

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'rich-text', 'slider', 'audio', 'camera', 'video', 'canvas', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'rich-text', 'slider', 'audio', 'camera', 'video', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/react/index.js

@@ -8,6 +8,7 @@ const RecordLoaderContentDependency = require('../dependencies/RecordLoaderConte
 
 module.exports = function ({
   parts,
+  jsonContent,
   loaderContext,
   pagesMap,
   componentsMap,
@@ -19,7 +20,7 @@ module.exports = function ({
   hasScoped,
   hasComment,
   isNative,
-  usingComponents,
+  usingComponentsInfo,
   componentGenerics,
   autoScope,
   callback
@@ -50,7 +51,7 @@ module.exports = function ({
             srcMode,
             moduleId,
             ctorType,
-            usingComponents,
+            usingComponentsInfo,
             componentGenerics
           }, callback)
         },
@@ -63,7 +64,7 @@ module.exports = function ({
           }, callback)
         },
         (callback) => {
-          processJSON(parts.json, {
+          processJSON(jsonContent, {
             loaderContext,
             ctorType,
             pagesMap,