@mpxjs/webpack-plugin 2.9.32 → 2.9.33-beta.1

package/lib/dependencies/RecordGlobalComponentsDependency.js

@@ -1,6 +1,7 @@
 const NullDependency = require('webpack/lib/dependencies/NullDependency')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
 const addQuery = require('../utils/add-query')
+const isUrlRequest = require('../utils/is-url-request')
 
 class RecordGlobalComponentsDependency extends NullDependency {
   constructor (usingComponents, context) {
@@ -16,9 +17,19 @@ class RecordGlobalComponentsDependency extends NullDependency {
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
     const { usingComponents, context } = this
+    const resolver = compilation.resolverFactory.get('normal', module.resolveOptions)
     Object.keys(usingComponents).forEach((key) => {
       const request = usingComponents[key]
-      mpx.usingComponents[key] = addQuery(request, {
+      if (!isUrlRequest(request, mpx.projectRoot)) {
+        mpx.globalComponentsModuleId[key] = mpx.getModuleId(request, false)
+      } else {
+        resolver.resolve({}, this.context, request, {}, (err, resource) => {
+          if (err) return
+          mpx.globalComponentsModuleId[key] = mpx.getModuleId(resource, false)
+        })
+      }
+
+      mpx.globalComponents[key] = addQuery(request, {
         context
       })
     })

package/lib/index.js

@@ -61,7 +61,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')
 require('./utils/check-core-version-match')
 
@@ -165,6 +165,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)
@@ -620,7 +621,8 @@ class MpxWebpackPlugin {
           assetsModulesMap: new Map(),
           // 记录与asset相关联的ast，用于体积分析和esCheck，避免重复parse
           assetsASTsMap: new Map(),
-          usingComponents: {},
+          globalComponents: {},
+          globalComponentsModuleId: {},
           // todo es6 map读写性能高于object，之后会逐步替换
           wxsAssetsCache: new Map(),
           addEntryPromiseMap: new Map(),
@@ -681,6 +683,14 @@ class MpxWebpackPlugin {
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
           },
+            getModuleId: (filePath, isApp = false) => {
+                const customComponentModuleId = this.options.customComponentModuleId
+                if (typeof customComponentModuleId === 'function') {
+                    const customModuleId = customComponentModuleId(filePath, isApp)
+                    if (customModuleId) return customModuleId
+                }
+                return isApp ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
+            },
           getEntryNode: (module, type) => {
             const entryNodeModulesMap = mpx.entryNodeModulesMap
             let entryNode = entryNodeModulesMap.get(module)

package/lib/json-compiler/index.js

@@ -195,11 +195,16 @@ module.exports = function (content) {
     error: emitError,
     data: {
       // polyfill global usingComponents & record globalComponents
-      globalComponents: mpx.usingComponents
+      globalComponents: mpx.globalComponents
     }
   }
   if (!isApp) {
     rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+      // polyfill global usingComponents
+      // todo 传入rulesRunner中进行按平台转换
+      rulesRunnerOptions.data = {
+          globalComponents: mpx.globalComponents
+      }
   }
 
   const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -209,11 +214,11 @@ module.exports = function (content) {
   }
 
   if (isApp) {
-    Object.assign(mpx.usingComponents, json.usingComponents)
+    Object.assign(mpx.globalComponents, json.usingComponents)
     // 在 rulesRunner 运行后保存全局注册组件
     // todo 其余地方在使用mpx.usingComponents时存在缓存问题，要规避该问题需要在所有使用mpx.usingComponents的loader中添加app resourcePath作为fileDependency，但对于缓存有效率影响巨大
     // todo 需要考虑一种精准控制缓存的方式，仅在全局组件发生变更时才使相关使用方的缓存失效，例如按需在相关模块上动态添加request query？
-    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, this.context))
+    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.globalComponents, this.context))
   }
 
   const processComponents = (components, context, callback) => {

package/lib/loader.js

@@ -17,7 +17,8 @@ const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDep
 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 resolve = require('./utils/resolve')
+const isUrlRequestRaw = require('./utils/is-url-request')
 const path = require('path')
 const processMainScript = require('./web/processMainScript')
 const getRulesRunner = require('./platform')
@@ -50,6 +51,9 @@ module.exports = function (content) {
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
+  const root = mpx.projectRoot
+
+  const isUrlRequest = r => isUrlRequestRaw(r, root)
 
   const emitWarning = (msg) => {
     this.emitWarning(
@@ -75,15 +79,16 @@ module.exports = function (content) {
     ctorType = queryObj.isComponent ? 'component' : 'page'
     this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
   }
+  const isApp = ctorType === 'app'
 
-  if (ctorType === 'app') {
+  if (isApp) {
     const appName = getEntryName(this)
     if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
   }
   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, isApp)
 
   const parts = parseComponent(content, {
     filePath,
@@ -104,20 +109,26 @@ module.exports = function (content) {
       getJSONContent(parts.json || {}, null, loaderContext, (err, content) => {
         if (err) return callback(err)
         if (parts.json) parts.json.content = content
-        callback()
+        callback(null, content || '{}')
       })
     },
-    (callback) => {
-      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))
+    (jsonContent, callback) => {
+      if (!jsonContent) return callback(null, {})
       let componentPlaceholder = []
       let componentGenerics = {}
-
-      if (parts.json && parts.json.content) {
+      let currentUsingComponentsModuleId = {}
+      let usingComponents = [].concat(Object.keys(mpx.globalComponents))
+      const finalCallback = (err) => {
+        currentUsingComponentsModuleId = Object.assign(currentUsingComponentsModuleId, mpx.globalComponentsModuleId)
+        callback(err, {
+          componentPlaceholder,
+          componentGenerics,
+          currentUsingComponentsModuleId,
+          usingComponents
+        })
+      }
+      try {
+        const ret = JSON5.parse(jsonContent)
         const rulesRunnerOptions = {
           mode,
           srcMode,
@@ -131,21 +142,60 @@ module.exports = function (content) {
         }
         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)
+          return finalCallback(e)
+        }
+
+        if (ret.componentPlaceholder) {
+          componentPlaceholder = componentPlaceholder.concat(Object.values(ret.componentPlaceholder))
         }
+        if (ret.componentGenerics) {
+          componentGenerics = Object.assign({}, ret.componentGenerics)
+        }
+        if (ret.usingComponents) {
+          // fixUsingComponent(ret.usingComponents, mode)
+          usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
+          async.eachOf(ret.usingComponents, (component, name, callback) => {
+            if (!isUrlRequest(component)) {
+              const moduleId = mpx.getModuleId(component, isApp)
+              if (!isApp) {
+                currentUsingComponentsModuleId[name] = moduleId
+              }
+              return callback()
+            }
+            resolve(this.context, component, loaderContext, (err, resource) => {
+              if (err) return callback(err)
+              const { rawResourcePath } = parseRequest(resource)
+              const moduleId = mpx.getModuleId(rawResourcePath, isApp)
+              if (!isApp) {
+                currentUsingComponentsModuleId[name] = moduleId
+              }
+              callback()
+            })
+          }, (err) => {
+            finalCallback(err)
+          })
+        } else {
+          finalCallback(null)
+        }
+      } catch (err) {
+        finalCallback(err)
       }
+    },
+    (componentInfo, callback) => {
+      const {
+        componentPlaceholder,
+        componentGenerics,
+        currentUsingComponentsModuleId,
+        usingComponents
+      } = componentInfo
+
+      const hasScoped = parts.styles.some(({ scoped }) => scoped) || autoScope
+      const templateAttrs = parts.template && parts.template.attrs
+      const hasComment = templateAttrs && templateAttrs.comments
+      const isNative = false
+
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         if (ctorType === 'app' && !queryObj.isApp) {
@@ -255,7 +305,7 @@ module.exports = function (content) {
       }
 
       // 为app注入i18n
-      if (i18n && ctorType === 'app') {
+      if (i18n && isApp) {
         const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
         const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
         const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
@@ -300,6 +350,7 @@ module.exports = function (content) {
           isNative,
           moduleId,
           usingComponents,
+          usingComponentsModuleId: currentUsingComponentsModuleId,
           componentPlaceholder
           // 添加babel处理渲染函数中可能包含的...展开运算符
           // 由于...运算符应用范围极小以及babel成本极高，先关闭此特性后续看情况打开
@@ -328,7 +379,7 @@ module.exports = function (content) {
         })
       }
 
-      if (parts.styles.filter(style => !style.src).length === 0 && ctorType === 'app' && mode === 'ali') {
+      if (parts.styles.filter(style => !style.src).length === 0 && isApp && mode === 'ali') {
         output += getRequire('styles', {}, {}, parts.styles.length) + '\n'
       }
 

package/lib/native-loader.js

@@ -6,11 +6,13 @@ 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 { JSON_JS_EXT } = require('./utils/const')
 const getRulesRunner = require('./platform')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const isUrlRequestRaw = require('./utils/is-url-request')
+const resolve = require('./utils/resolve')
 
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
@@ -25,6 +27,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
@@ -39,6 +42,9 @@ module.exports = function (content) {
   const typeExtMap = config[srcMode].typeExtMap
   const typeResourceMap = {}
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
+  const root = mpx.projectRoot
+
+  const isUrlRequest = r => isUrlRequestRaw(r, root)
 
   const CSS_LANG_EXT_MAP = {
     less: '.less',
@@ -114,7 +120,30 @@ 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))
+  }
+  const isApp = ctorType === 'app'
 
+  if (ctorType === 'app') {
+    const appName = getEntryName(this)
+    if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+  }
   // 先读取json获取usingComponents信息
   async.waterfall([
     (callback) => {
@@ -145,62 +174,75 @@ module.exports = function (content) {
         src: typeResourceMap.json,
         useJSONJS
       }, null, this, callback)
-    }, (content, callback) => {
+    },
+    (jsonContent, callback) => {
+      if (!jsonContent) return callback(null, {})
       let componentPlaceholder = []
-      let json
-      try {
-        json = JSON5.parse(content)
-      } catch (e) {
-        return callback(e)
-      }
-      let usingComponents = Object.keys(mpx.usingComponents)
-      const rulesRunnerOptions = {
-        mode,
-        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))
+      let currentUsingComponentsModuleId = {}
+      let usingComponents = [].concat(Object.keys(mpx.globalComponents))
+      const finalCallback = (err) => {
+        currentUsingComponentsModuleId = Object.assign(currentUsingComponentsModuleId, mpx.globalComponentsModuleId)
+        callback(err, {
+          componentPlaceholder,
+          currentUsingComponentsModuleId,
+          usingComponents
+        })
       }
+      try {
+        const json = JSON5.parse(jsonContent)
+        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)
+        if (rulesRunner) rulesRunner(json)
 
-      // 处理构造器类型
-      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))
+        if (json.componentPlaceholder) {
+          componentPlaceholder = componentPlaceholder.concat(Object.values(json.componentPlaceholder))
+        }
+        if (json.usingComponents) {
+          usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
+          async.eachOf(json.usingComponents, (component, name, callback) => {
+            if (!isUrlRequest(component)) {
+              const moduleId = mpx.getModuleId(component, isApp)
+              if (!isApp) {
+                currentUsingComponentsModuleId[name] = moduleId
+              }
+              return callback()
+            }
+            resolve(this.context, component, loaderContext, (err, resource) => {
+              if (err) return callback(err)
+              const { rawResourcePath } = parseRequest(resource)
+              const moduleId = mpx.getModuleId(rawResourcePath, isApp)
+              if (!isApp) {
+                currentUsingComponentsModuleId[name] = moduleId
+              }
+              callback()
+            })
+          }, (err) => {
+            finalCallback(err)
+          })
+        } else {
+          finalCallback(null)
+        }
+      } catch (e) {
+        return finalCallback(e)
       }
+    },
+    (componentInfo, callback) => {
+      const {
+        componentPlaceholder,
+        currentUsingComponentsModuleId,
+        usingComponents
+      } = componentInfo
 
-      const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : '_' + mpx.pathHash(filePath)
-
-      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,7 +264,8 @@ module.exports = function (content) {
               isNative,
               moduleId,
               usingComponents,
-              componentPlaceholder
+              componentPlaceholder,
+              usingComponentsModuleId: currentUsingComponentsModuleId
             })
             // if (template.src) extraOptions.resourcePath = resourcePath
             break

package/lib/style-compiler/index.js

@@ -15,7 +15,7 @@ module.exports = function (css, map) {
   const cb = this.async()
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
-  const id = queryObj.moduleId || queryObj.mid || '_' + mpx.pathHash(resourcePath)
+  const id = queryObj.moduleId || queryObj.mid || mpx.getModuleId(resourcePath)
   const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode