@mpxjs/webpack-plugin 2.9.18 → 2.9.19-react.0

package/lib/config.js

@@ -1,3 +1,51 @@
+const reactConfig = {
+  event: {
+    parseEvent (attr) {
+      const match = /^(bind|catch|capture-bind|capture-catch):?(.*?)(?:\.(.*))?$/.exec(attr)
+      if (match) {
+        return {
+          prefix: match[1],
+          eventName: match[2].replace(/^./, function (match) {
+            return match.toLowerCase()
+          }),
+          modifier: match[3]
+        }
+      }
+    },
+    getEvent (eventName, prefix = 'bind') {
+      return prefix + eventName
+    },
+    defaultModelProp: 'value',
+    defaultModelEvent: 'input',
+    defaultModelValuePath: 'value'
+  },
+  wxs: {
+    tag: 'wxs',
+    module: 'module',
+    src: 'src',
+    ext: '.wxs',
+    templatePrefix: 'module.exports = \n'
+  },
+  directive: {
+    if: 'wx:if',
+    elseif: 'wx:elif',
+    else: 'wx:else',
+    model: 'wx:model',
+    modelProp: 'wx:model-prop',
+    modelEvent: 'wx:model-event',
+    modelValuePath: 'wx:model-value-path',
+    modelFilter: 'wx:model-filter',
+    for: 'wx:for',
+    forIndex: 'wx:for-index',
+    forItem: 'wx:for-item',
+    key: 'wx:key',
+    dynamicClass: 'wx:class',
+    dynamicStyle: 'wx:style',
+    ref: 'wx:ref',
+    show: 'wx:show'
+  }
+}
+
 module.exports = {
   wx: {
     typeExtMap: {
@@ -27,18 +75,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return ` {${arr.join(',')}} `
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'wxs',
@@ -101,18 +138,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return ` {${arr.join(',')}} `
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'import-sjs',
@@ -169,18 +195,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return ` {${arr.join(',')}} `
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'import-sjs',
@@ -236,18 +251,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return `({${arr.join(',')}})`
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'qs',
@@ -303,18 +307,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return ` {${arr.join(',')}} `
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'sjs',
@@ -384,18 +377,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return ` {${arr.join(',')}} `
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'qjs',
@@ -451,18 +433,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return ` {${arr.join(',')}} `
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'jds',
@@ -518,18 +489,7 @@ module.exports = {
       },
       defaultModelProp: 'value',
       defaultModelEvent: 'input',
-      defaultModelValuePath: 'value',
-      shallowStringify (obj) {
-        const arr = []
-        for (const key in obj) {
-          let value = obj[key]
-          if (Array.isArray(value)) {
-            value = `[${value.join(',')}]`
-          }
-          arr.push(`${key}:${value}`)
-        }
-        return ` {${arr.join(',')}} `
-      }
+      defaultModelValuePath: 'value'
     },
     wxs: {
       tag: 'dds',
@@ -556,5 +516,7 @@ module.exports = {
       ref: 'dd:ref',
       show: 'dd:show'
     }
-  }
+  },
+  ios: reactConfig,
+  android: reactConfig
 }

package/lib/dependencies/ResolveDependency.js

@@ -27,7 +27,7 @@ class ResolveDependency extends NullDependency {
     if (!compilation) return ''
     const mpx = compilation.__mpx__
     if (!mpx) return ''
-    const { pagesMap, componentsMap, staticResourcesMap, partialCompile } = mpx
+    const { pagesMap, componentsMap, staticResourcesMap, partialCompileRule } = mpx
     const { resourcePath } = parseRequest(resource)
     const currentComponentsMap = componentsMap[packageName]
     const mainComponentsMap = componentsMap.main
@@ -35,7 +35,7 @@ class ResolveDependency extends NullDependency {
     const mainStaticResourcesMap = staticResourcesMap.main
     const resolveResult = pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
     if (!resolveResult) {
-      if (!partialCompile || matchCondition(resourcePath, partialCompile)) {
+      if (!partialCompileRule || matchCondition(resourcePath, partialCompileRule)) {
         compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
       }
     }

package/lib/helpers.js

@@ -19,7 +19,7 @@ module.exports = function createHelpers (loaderContext) {
 
   const { mode, env } = loaderContext.getMpx() || {}
 
-  function getRequire (type, part, extraOptions, index) {
+  function getRequire (type, part, extraOptions = {}, index = 0) {
     let extract = false
     switch (type) {
       // eslint-disable-next-line no-fallthrough
@@ -28,6 +28,8 @@ module.exports = function createHelpers (loaderContext) {
       case 'template':
         extract = true
     }
+    // 允许外部强制关闭extract
+    if (extraOptions.extract === false) extract = false
     return (extract ? 'require.extract(' : 'require(') + getRequestString(type, part, extraOptions, index) + ')'
   }
 
@@ -70,6 +72,8 @@ module.exports = function createHelpers (loaderContext) {
       case 'template':
         options.extract = true
     }
+    // 允许外部强制关闭extract
+    if (extraOptions.extract === false) delete options.extract
 
     if (part.mode) options.mode = part.mode
 

package/lib/index.js

@@ -62,6 +62,7 @@ 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 isEmptyObject = require('./utils/is-empty-object')
+const { isReact, isWeb } = require('./utils/env')
 require('./utils/check-core-version-match')
 
 const isProductionLikeMode = options => {
@@ -119,9 +120,12 @@ class MpxWebpackPlugin {
     if (options.mode !== options.srcMode && options.srcMode !== 'wx') {
       errors.push('MpxWebpackPlugin supports srcMode to be "wx" only temporarily!')
     }
-    if (options.mode === 'web' && options.srcMode !== 'wx') {
+    if (isWeb(options.mode) && options.srcMode !== 'wx') {
       errors.push('MpxWebpackPlugin supports mode to be "web" only when srcMode is set to "wx"!')
     }
+    if (isReact(options.mode) && options.srcMode !== 'wx') {
+      errors.push('MpxWebpackPlugin supports mode to be "ios" or "android" only when srcMode is set to "wx"!')
+    }
     options.externalClasses = options.externalClasses || ['custom-class', 'i-class']
     options.resolveMode = options.resolveMode || 'webpack'
     options.writeMode = options.writeMode || 'changed'
@@ -168,11 +172,10 @@ class MpxWebpackPlugin {
       cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
-    options.partialCompile = options.mode !== 'web' && options.partialCompile
+    options.partialCompileRule = options.partialCompileRule || {}
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
     options.retryRequireAsync = options.retryRequireAsync || false
-    options.enableAliRequireAsync = options.enableAliRequireAsync || false
     options.optimizeSize = options.optimizeSize || false
     this.options = options
     // Hack for buildDependencies
@@ -292,7 +295,7 @@ class MpxWebpackPlugin {
     // 将entry export标记为used且不可mangle，避免require.async生成的js chunk在生产环境下报错
     new FlagEntryExportAsUsedPlugin(true, 'entry').apply(compiler)
 
-    if (this.options.mode !== 'web') {
+    if (!isWeb(this.options.mode) && !isReact(this.options.mode)) {
       // 强制设置publicPath为'/'
       if (compiler.options.output.publicPath && compiler.options.output.publicPath !== publicPath) {
         warnings.push(`webpack options: MpxWebpackPlugin accept options.output.publicPath to be ${publicPath} only, custom options.output.publicPath will be ignored!`)
@@ -332,7 +335,7 @@ class MpxWebpackPlugin {
     compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
 
     const optimization = compiler.options.optimization
-    if (this.options.mode !== 'web') {
+    if (!isWeb(this.options.mode) && !isReact(this.options.mode)) {
       optimization.runtimeChunk = {
         name: (entrypoint) => {
           for (const packageName in mpx.independentSubpackagesMap) {
@@ -348,7 +351,7 @@ class MpxWebpackPlugin {
     let splitChunksOptions = null
     let splitChunksPlugin = null
     // 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
-    if (optimization.splitChunks !== false) {
+    if (optimization.splitChunks !== false && !isReact(this.options.mode)) {
       splitChunksOptions = Object.assign({
         chunks: 'all',
         usedExports: optimization.usedExports === true,
@@ -406,7 +409,7 @@ class MpxWebpackPlugin {
 
     let mpx
 
-    if (this.options.partialCompile) {
+    if (this.options.partialCompileRule && this.options.partialCompileRule.include) {
       function isResolvingPage (obj) {
         // valid query should start with '?'
         const query = parseQuery(obj.query || '?')
@@ -424,7 +427,7 @@ class MpxWebpackPlugin {
               if (obj.path.startsWith(require.resolve('./runtime/components/wx/default-page.mpx'))) {
                 return callback(null, obj)
               }
-              if (isResolvingPage(obj) && !matchCondition(obj.path, this.options.partialCompile)) {
+              if (isResolvingPage(obj) && !matchCondition(obj.path, this.options.partialCompileRule)) {
                 const infix = obj.query ? '&' : '?'
                 obj.query += `${infix}resourcePath=${obj.path}`
                 obj.path = require.resolve('./runtime/components/wx/default-page.mpx')
@@ -649,8 +652,8 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'web' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
-          partialCompile: this.options.partialCompile,
+          supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'ali' || isWeb(this.options.mode),
+          partialCompileRule: this.options.partialCompileRule,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
               hasPage: false,
@@ -973,7 +976,7 @@ class MpxWebpackPlugin {
         // 自动使用分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false
-          if (mpx.mode === 'web') {
+          if (isWeb(mpx.mode)) {
             // web独立处理splitChunk
             if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
               splitChunksOptions.cacheGroups.main = {
@@ -1007,7 +1010,7 @@ class MpxWebpackPlugin {
 
       JavascriptModulesPlugin.getCompilationHooks(compilation).renderModuleContent.tap('MpxWebpackPlugin', (source, module, renderContext) => {
         // 处理dll产生的external模块
-        if (module.external && module.userRequest.startsWith('dll-reference ') && mpx.mode !== 'web') {
+        if (module.external && module.userRequest.startsWith('dll-reference ') && !isWeb(mpx.mode) && !isReact(mpx.mode)) {
           const chunk = renderContext.chunk
           const request = module.request
           let relativePath = toPosix(path.relative(path.dirname(chunk.name), request))
@@ -1126,9 +1129,9 @@ class MpxWebpackPlugin {
             if (tarRoot) {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
-              // wx、ali(需开启enableAliRequireAsync)和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
+              // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
               if (mpx.supportRequireAsync) {
-                if (mpx.mode === 'web') {
+                if (isWeb(mpx.mode)) {
                   const depBlock = new AsyncDependenciesBlock(
                     {
                       name: tarRoot
@@ -1333,8 +1336,8 @@ class MpxWebpackPlugin {
             parser.hooks.call.for('App').tap('MpxWebpackPlugin', (expr) => {
               transGlobalObject(expr.callee)
             })
-            if (mpx.mode === 'ali' || mpx.mode === 'web') {
-              // 支付宝和web不支持Behaviors
+            if (mpx.mode === 'ali' || isWeb(mpx.mode) || isReact(mpx.mode)) {
+              // 支付宝、web和react不支持Behaviors
               parser.hooks.call.for('Behavior').tap('MpxWebpackPlugin', (expr) => {
                 transGlobalObject(expr.callee)
               })
@@ -1351,7 +1354,7 @@ class MpxWebpackPlugin {
         name: 'MpxWebpackPlugin',
         stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
       }, () => {
-        if (mpx.mode === 'web') return
+        if (isWeb(mpx.mode) || isReact(mpx.mode)) return
 
         if (this.options.generateBuildMap) {
           const pagesMap = compilation.__mpx__.pagesMap
@@ -1590,7 +1593,7 @@ try {
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
 
-        if (mpx.mode === 'web') {
+        if (isWeb(mpx.mode)) {
           const mpxStyleOptions = queryObj.mpxStyleOptions
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')

package/lib/loader.js

@@ -5,21 +5,18 @@ const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
 const addQuery = require('./utils/add-query')
 const async = require('async')
-const processJSON = require('./web/processJSON')
-const processScript = require('./web/processScript')
-const processStyles = require('./web/processStyles')
-const processTemplate = require('./web/processTemplate')
 const getJSONContent = require('./utils/get-json-content')
 const normalize = require('./utils/normalize')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
-const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
+const { isReact } = require('./utils/env')
 const path = require('path')
-const processMainScript = require('./web/processMainScript')
+const processWeb = require('./web')
+const processReact = require('./react')
 const getRulesRunner = require('./platform')
 
 module.exports = function (content) {
@@ -96,7 +93,6 @@ module.exports = function (content) {
     getRequire
   } = createHelpers(loaderContext)
 
-  let output = ''
   const callback = this.async()
 
   async.waterfall([
@@ -148,98 +144,47 @@ module.exports = function (content) {
       }
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
-        if (ctorType === 'app' && !queryObj.isApp) {
-          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)
-
-        return async.waterfall([
-          (callback) => {
-            async.parallel([
-              (callback) => {
-                processTemplate(parts.template, {
-                  loaderContext,
-                  hasScoped,
-                  hasComment,
-                  isNative,
-                  srcMode,
-                  moduleId,
-                  ctorType,
-                  usingComponents,
-                  componentGenerics
-                }, callback)
-              },
-              (callback) => {
-                processStyles(parts.styles, {
-                  ctorType,
-                  autoScope,
-                  moduleId
-                }, callback)
-              },
-              (callback) => {
-                processJSON(parts.json, {
-                  loaderContext,
-                  pagesMap,
-                  componentsMap
-                }, callback)
-              }
-            ], (err, res) => {
-              callback(err, res)
-            })
-          },
-          ([templateRes, stylesRes, jsonRes], callback) => {
-            output += templateRes.output
-            output += stylesRes.output
-            output += jsonRes.output
-            processScript(parts.script, {
-              loaderContext,
-              ctorType,
-              srcMode,
-              moduleId,
-              isProduction,
-              componentGenerics,
-              jsonConfig: jsonRes.jsonObj,
-              outputPath: queryObj.outputPath || '',
-              builtInComponentsMap: templateRes.builtInComponentsMap,
-              genericsInfo: templateRes.genericsInfo,
-              wxsModuleMap: templateRes.wxsModuleMap,
-              localComponentsMap: jsonRes.localComponentsMap
-            }, callback)
-          }
-        ], (err, scriptRes) => {
-          if (err) return callback(err)
-          output += scriptRes.output
-          this._module.addPresentationalDependency(new RecordVueContentDependency(filePath, output))
-          callback(null, output)
+        return processWeb({
+          parts,
+          loaderContext,
+          pagesMap,
+          componentsMap,
+          queryObj,
+          ctorType,
+          srcMode,
+          moduleId,
+          isProduction,
+          hasScoped,
+          hasComment,
+          isNative,
+          usingComponents,
+          componentGenerics,
+          autoScope,
+          callback
         })
       }
+      // 处理mode为react时输出js格式文件
+      if (isReact(mode)) {
+        return processReact({
+          parts,
+          loaderContext,
+          pagesMap,
+          componentsMap,
+          queryObj,
+          ctorType,
+          srcMode,
+          moduleId,
+          isProduction,
+          hasScoped,
+          hasComment,
+          isNative,
+          usingComponents,
+          componentGenerics,
+          autoScope,
+          callback
+        })
+      }
+
       const moduleGraph = this._compilation.moduleGraph
 
       const issuer = moduleGraph.getIssuer(this._module)
@@ -248,6 +193,7 @@ module.exports = function (content) {
         return callback(new Error(`Current ${ctorType} [${this.resourcePath}] is issued by [${issuer.resource}], which is not allowed!`))
       }
 
+      let output = ''
       // 注入模块id及资源路径
       output += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
@@ -298,6 +244,7 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
+          ctorType,
           moduleId,
           usingComponents,
           componentPlaceholder

package/lib/native-loader.js

@@ -220,11 +220,11 @@ module.exports = function (content) {
               hasScoped,
               hasComment,
               isNative,
+              ctorType,
               moduleId,
               usingComponents,
               componentPlaceholder
             })
-            // if (template.src) extraOptions.resourcePath = resourcePath
             break
           case 'styles':
             if (cssLang) part.lang = cssLang

package/lib/platform/index.js

@@ -16,6 +16,9 @@ module.exports = function getRulesRunner ({
     template: {
       wx: require('./template/wx')
     },
+    style: {
+      wx: require('./style/wx')
+    },
     json: {
       wx: require('./json/wx')
     }