@mpxjs/webpack-plugin 2.6.114-alpha.8 → 2.6.115

package/lib/web/processJSON.js

@@ -6,30 +6,28 @@ const parseRequest = require('../utils/parse-request')
 const toPosix = require('../utils/to-posix')
 const addQuery = require('../utils/add-query')
 const parseComponent = require('../parser')
-const getJSONContent = require('../utils/get-json-content')
-const resolve = require('../utils/resolve')
-const createJSONHelper = require('../json-compiler/helper')
-const { RESOLVE_IGNORED_ERR } = require('../utils/const')
-const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
+const readJsonForSrc = require('../utils/read-json-for-src')
+const isUrlRequest = require('../utils/is-url-request')
 
-module.exports = function (json, {
-  loaderContext,
-  pagesMap,
-  componentsMap
-}, rawCallback) {
+module.exports = function (json, options, rawCallback) {
+  const mode = options.mode
+  const env = options.env
+  const defs = options.defs
+  const loaderContext = options.loaderContext
+  const resolveMode = options.resolveMode
+  const pagesMap = options.pagesMap
+  const componentsMap = options.componentsMap
+  const pagesEntryMap = options.pagesEntryMap
+  const projectRoot = options.projectRoot
+  const pathHash = options.pathHash
   const localPagesMap = {}
   const localComponentsMap = {}
+  const buildInfo = loaderContext._module.buildInfo
+
   let output = '/* json */\n'
   let jsonObj = {}
   let tabBarMap
   let tabBarStr
-  const mpx = loaderContext.getMpx()
-  const {
-    mode,
-    env,
-    projectRoot
-  } = mpx
-
   const context = loaderContext.context
 
   const emitWarning = (msg) => {
@@ -39,31 +37,13 @@ module.exports = function (json, {
   }
 
   const emitError = (msg) => {
-    loaderContext.emitError(
-      new Error('[json compiler][' + loaderContext.resource + ']: ' + msg)
+    this.emitError(
+      new Error('[json compiler][' + this.resource + ']: ' + msg)
     )
   }
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
 
-  const {
-    isUrlRequest,
-    urlToRequest,
-    processPage,
-    processComponent
-  } = createJSONHelper({
-    loaderContext,
-    emitWarning,
-    emitError,
-    customGetDynamicEntry (resource, type, outputPath, packageRoot) {
-      return {
-        resource,
-        outputPath: toPosix(path.join(packageRoot, outputPath)),
-        packageRoot
-      }
-    }
-  })
-
   const callback = (err) => {
     return rawCallback(err, {
       output,
@@ -87,6 +67,12 @@ module.exports = function (json, {
 
   const fs = loaderContext._compiler.inputFileSystem
 
+  const resolve = (context, request, callback) => {
+    const { queryObj } = parseRequest(request)
+    context = queryObj.context || context
+    return loaderContext.resolve(context, request, callback)
+  }
+
   const defaultTabbar = {
     borderStyle: 'black',
     position: 'bottom',
@@ -104,7 +90,7 @@ module.exports = function (json, {
       tabBarStr = JSON.stringify(tabBar)
       tabBarStr = tabBarStr.replace(/"(iconPath|selectedIconPath)":"([^"]+)"/g, function (matched, $1, $2) {
         if (isUrlRequest($2, projectRoot)) {
-          return `"${$1}":require(${stringifyRequest(urlToRequest($2, projectRoot))})`
+          return `"${$1}":require(${stringifyRequest(loaderUtils.urlToRequest($2, projectRoot))})`
         }
         return matched
       })
@@ -114,37 +100,45 @@ module.exports = function (json, {
 
   const processPackages = (packages, context, callback) => {
     if (packages) {
-      async.each(packages, (packagePath, callback) => {
-        const { queryObj } = parseRequest(packagePath)
+      async.forEach(packages, (packagePath, callback) => {
+        const parsed = parseRequest(packagePath)
+        const queryObj = parsed.queryObj
+        // readFile无法处理query
+        packagePath = parsed.resourcePath
         async.waterfall([
           (callback) => {
-            resolve(context, packagePath, loaderContext, (err, result) => {
-              if (err) return callback(err)
-              const { rawResourcePath } = parseRequest(result)
-              callback(err, rawResourcePath)
+            resolve(context, packagePath, (err, result) => {
+              callback(err, result)
             })
           },
           (result, callback) => {
+            loaderContext.addDependency(result)
             fs.readFile(result, (err, content) => {
               if (err) return callback(err)
               callback(err, result, content.toString('utf-8'))
             })
           },
           (result, content, callback) => {
-            const extName = path.extname(result)
-            if (extName === '.mpx') {
+            const filePath = result
+            const extName = path.extname(filePath)
+            if (extName === '.mpx' || extName === '.vue') {
               const parts = parseComponent(content, {
-                filePath: result,
+                filePath,
                 needMap: loaderContext.sourceMap,
                 mode,
+                defs,
                 env
               })
-              getJSONContent(parts.json || {}, loaderContext, (err, content) => {
-                callback(err, result, content)
-              })
-            } else {
-              callback(null, result, content)
+              const json = parts.json || {}
+              if (json.content) {
+                content = json.content
+              } else if (json.src) {
+                return readJsonForSrc(json.src, loaderContext, (content) => {
+                  callback(null, result, content)
+                })
+              }
             }
+            callback(null, result, content)
           },
           (result, content, callback) => {
             try {
@@ -165,17 +159,12 @@ module.exports = function (json, {
                   pages: content.pages,
                   ...queryObj
                 }
-
-                if (content.plugins) {
-                  subPackage.plugins = content.plugins
-                }
-
                 processSelfQueue.push((callback) => {
                   processSubPackage(subPackage, context, callback)
                 })
               } else {
                 processSelfQueue.push((callback) => {
-                  processPages(content.pages, context, '', callback)
+                  processPages(content.pages, '', '', context, callback)
                 })
               }
             }
@@ -190,40 +179,77 @@ module.exports = function (json, {
               callback()
             }
           }
-        ], (err) => {
-          callback(err === RESOLVE_IGNORED_ERR ? null : err)
-        })
+        ], callback)
       }, callback)
     } else {
       callback()
     }
   }
 
-  const pageKeySet = new Set()
+  const getPageName = (resourcePath, ext) => {
+    const baseName = path.basename(resourcePath, ext)
+    return path.join('pages', baseName + pathHash(resourcePath), baseName)
+  }
 
-  const processPages = (pages, context, tarRoot = '', callback) => {
+  const processPages = (pages, srcRoot = '', tarRoot = '', context, callback) => {
     if (pages) {
-      async.each(pages, (page, callback) => {
-        processPage(page, context, tarRoot, (err, { resource, outputPath } = {}, { isFirst, key } = {}) => {
-          if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
-          if (pageKeySet.has(key)) return callback()
-          pageKeySet.add(key)
+      context = path.join(context, srcRoot)
+      async.forEach(pages, (page, callback) => {
+        let aliasPath = ''
+        if (typeof page !== 'string') {
+          aliasPath = page.path
+          page = page.src
+        }
+        if (!isUrlRequest(page, projectRoot)) return callback()
+        if (resolveMode === 'native') {
+          page = loaderUtils.urlToRequest(page, projectRoot)
+        }
+        resolve(context, page, (err, resource) => {
+          if (err) return callback(err)
           const { resourcePath, queryObj } = parseRequest(resource)
-          if (localPagesMap[outputPath]) {
-            const { resourcePath: oldResourcePath } = parseRequest(localPagesMap[outputPath].resource)
-            if (oldResourcePath !== resourcePath) {
-              const oldOutputPath = outputPath
-              outputPath = mpx.getOutputPath(resourcePath, 'page', { conflictPath: outputPath })
-              emitWarning(new Error(`Current page [${resourcePath}] is registered with a conflict outputPath [${oldOutputPath}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+          const ext = path.extname(resourcePath)
+          // 获取pageName
+          let pageName
+          if (aliasPath) {
+            pageName = toPosix(path.join(tarRoot, aliasPath))
+            // 判断 key 存在重复情况直接报错
+            for (let key in pagesMap) {
+              if (pagesMap[key] === pageName && key !== resourcePath) {
+                emitError(`Current page [${resourcePath}] registers a conflict page path [${pageName}] with existed page [${key}], which is not allowed, please rename it!`)
+                return callback()
+              }
+            }
+          } else {
+            const relative = path.relative(context, resourcePath)
+            if (/^\./.test(relative)) {
+              // 如果当前page不存在于context中，对其进行重命名
+              pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+              emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+            } else {
+              pageName = toPosix(path.join(tarRoot, /^(.*?)(\.[^.]*)?$/.exec(relative)[1]))
+              // 如果当前page与已有page存在命名冲突，也进行重命名
+              for (let key in pagesMap) {
+                // 此处引入pagesEntryMap确保相同entry下路由路径重复注册才报错，不同entry下的路由路径重复则无影响
+                if (pagesMap[key] === pageName && key !== resourcePath && pagesEntryMap[key] === loaderContext.resourcePath) {
+                  const pageNameRaw = pageName
+                  pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+                  emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+                  break
+                }
+              }
             }
           }
-
-          pagesMap[resourcePath] = outputPath
-          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
-          localPagesMap[outputPath] = {
-            resource: addQuery(resource, { isPage: true }),
-            async: queryObj.async || tarRoot,
-            isFirst
+          if (pagesMap[resourcePath]) {
+            emitWarning(`Current page [${resourcePath}] which is imported from [${loaderContext.resourcePath}] has been registered in pagesMap already, it will be ignored, please check it and remove the redundant page declaration!`)
+            return callback()
+          }
+          buildInfo.pagesMap = buildInfo.pagesMap || {}
+          buildInfo.pagesMap[resourcePath] = pagesMap[resourcePath] = pageName
+          pagesEntryMap[resourcePath] = loaderContext.resourcePath
+          localPagesMap[pageName] = {
+            resource: addQuery(resource, { page: true }),
+            async: tarRoot || queryObj.async,
+            isFirst: queryObj.isFirst
           }
           callback()
         })
@@ -235,15 +261,10 @@ module.exports = function (json, {
 
   const processSubPackage = (subPackage, context, callback) => {
     if (subPackage) {
-      if (typeof subPackage.root === 'string' && subPackage.root.startsWith('.')) {
-        emitError(`Current subpackage root [${subPackage.root}] is not allow starts with '.'`)
-        return callback()
-      }
       let tarRoot = subPackage.tarRoot || subPackage.root || ''
       let srcRoot = subPackage.srcRoot || subPackage.root || ''
       if (!tarRoot) return callback()
-      context = path.join(context, srcRoot)
-      processPages(subPackage.pages, context, tarRoot, callback)
+      processPages(subPackage.pages, srcRoot, tarRoot, context, callback)
     } else {
       callback()
     }
@@ -251,7 +272,7 @@ module.exports = function (json, {
 
   const processSubPackages = (subPackages, context, callback) => {
     if (subPackages) {
-      async.each(subPackages, (subPackage, callback) => {
+      async.forEach(subPackages, (subPackage, callback) => {
         processSubPackage(subPackage, context, callback)
       }, callback)
     } else {
@@ -261,37 +282,48 @@ module.exports = function (json, {
 
   const processComponents = (components, context, callback) => {
     if (components) {
-      async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, { resource, outputPath } = {}) => {
-          if (err === RESOLVE_IGNORED_ERR) {
-            return callback()
-          }
-          const { resourcePath, queryObj } = parseRequest(resource)
-          componentsMap[resourcePath] = outputPath
-          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-          localComponentsMap[name] = {
-            resource: addQuery(resource, {
-              isComponent: true,
-              outputPath
-            }),
-            async: queryObj.async
-          }
-          callback()
-        })
+      async.forEachOf(components, (component, name, callback) => {
+        processComponent(component, name, context, callback)
       }, callback)
     } else {
       callback()
     }
   }
 
+  const processComponent = (component, name, context, callback) => {
+    if (!isUrlRequest(component, projectRoot)) return callback()
+
+    if (resolveMode === 'native') {
+      component = loaderUtils.urlToRequest(component, projectRoot)
+    }
+
+    resolve(context, component, (err, resource) => {
+      if (err) return callback(err)
+      const { resourcePath, queryObj } = parseRequest(resource)
+      const parsed = path.parse(resourcePath)
+      const componentId = parsed.name + pathHash(resourcePath)
+
+      buildInfo.packageName = 'main'
+      buildInfo.componentsMap = buildInfo.componentsMap || {}
+      buildInfo.componentsMap[resourcePath] = componentsMap[resourcePath] = componentId
+
+      localComponentsMap[name] = {
+        resource: addQuery(resource, { component: true, componentId }),
+        async: queryObj.async
+      }
+      callback()
+    })
+  }
+
   const processGenerics = (generics, context, callback) => {
     if (generics) {
-      const genericsComponents = {}
-      Object.keys(generics).forEach((name) => {
-        const generic = generics[name]
-        if (generic.default) genericsComponents[`${name}default`] = generic.default
-      })
-      processComponents(genericsComponents, context, callback)
+      async.forEachOf(generics, (generic, name, callback) => {
+        if (generic.default) {
+          processComponent(generic.default, `${name}default`, context, callback)
+        } else {
+          callback()
+        }
+      }, callback)
     } else {
       callback()
     }
@@ -299,7 +331,6 @@ module.exports = function (json, {
 
   async.parallel([
     (callback) => {
-      // 添加首页标识
       if (jsonObj.pages && jsonObj.pages[0]) {
         if (typeof jsonObj.pages[0] !== 'string') {
           jsonObj.pages[0].src = addQuery(jsonObj.pages[0].src, { isFirst: true })
@@ -307,7 +338,7 @@ module.exports = function (json, {
           jsonObj.pages[0] = addQuery(jsonObj.pages[0], { isFirst: true })
         }
       }
-      processPages(jsonObj.pages, context, '', callback)
+      processPages(jsonObj.pages, '', '', context, callback)
     },
     (callback) => {
       processComponents(jsonObj.usingComponents, context, callback)

package/lib/web/processScript.js

@@ -2,6 +2,7 @@ const genComponentTag = require('../utils/gen-component-tag')
 const loaderUtils = require('loader-utils')
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
+const builtInLoaderPath = normalize.lib('built-in-loader')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
 const tabBarContainerPath = normalize.lib('runtime/components/web/mpx-tab-bar-container.vue')
 const tabBarPath = normalize.lib('runtime/components/web/mpx-tab-bar.vue')
@@ -20,36 +21,24 @@ function shallowStringify (obj) {
   return `{${arr.join(',')}}`
 }
 
-function getAsyncChunkName (chunkName) {
-  if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}" */`
-  }
-  return ''
-}
-
-module.exports = function (script, {
-  loaderContext,
-  ctorType,
-  srcMode,
-  isProduction,
-  componentGenerics,
-  jsonConfig,
-  outputPath,
-  tabBarMap,
-  tabBarStr,
-  builtInComponentsMap,
-  genericsInfo,
-  wxsModuleMap,
-  localComponentsMap,
-  localPagesMap
-}, callback) {
-  const mpx = loaderContext.getMpx()
-  const {
-    i18n,
-    projectRoot
-  } = mpx
-
+module.exports = function (script, options, callback) {
+  const ctorType = options.ctorType
+  const builtInComponentsMap = options.builtInComponentsMap
+  const localComponentsMap = options.localComponentsMap
+  const localPagesMap = options.localPagesMap
+  const srcMode = options.srcMode
+  const loaderContext = options.loaderContext
+  const isProduction = options.isProduction
+  const componentId = options.componentId
+  const getRequireForSrc = options.getRequireForSrc
+  const i18n = options.i18n
+  const jsonConfig = options.jsonConfig
   const tabBar = jsonConfig.tabBar
+  const tabBarMap = options.tabBarMap
+  const tabBarStr = options.tabBarStr
+  const genericsInfo = options.genericsInfo
+  const componentGenerics = options.componentGenerics
+  const forceDisableBuiltInLoader = options.forceDisableBuiltInLoader
 
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
@@ -61,7 +50,7 @@ module.exports = function (script, {
   let tabBarPagesMap = {}
   if (tabBar && tabBarMap) {
     // 挂载tabBar组件
-    const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { isComponent: true }))
+    const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { component: true }))
     tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
     // 挂载tabBar页面
     Object.keys(tabBarMap).forEach((pagePath) => {
@@ -69,7 +58,7 @@ module.exports = function (script, {
       if (pageCfg) {
         const pageRequest = stringifyRequest(pageCfg.resource)
         if (pageCfg.async) {
-          tabBarPagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+          tabBarPagesMap[pagePath] = `()=>import(${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
         } else {
           tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
         }
@@ -119,7 +108,6 @@ module.exports = function (script, {
         content += `  import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
   import Vue from 'vue'
   import VueRouter from 'vue-router'
-  import Mpx from '@mpxjs/core'
   Vue.use(VueRouter)
   global.getApp = function(){}
   global.getCurrentPages = function(){
@@ -137,8 +125,8 @@ module.exports = function (script, {
   global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
   global.__mpxGenericsMap = {}
   global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
-  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
-  global.__mpxTransRpxFn = ${mpx.webConfig.transRpxFn}\n`
+  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}\n`
+
         if (i18n) {
           const i18nObj = Object.assign({}, i18n)
           content += `  import VueI18n from 'vue-i18n'
@@ -161,15 +149,16 @@ module.exports = function (script, {
       i18n.mergeLocaleMessage(locale, newMessages[locale])
     })
   }
-  Mpx.i18n = i18n
-  \n`
+  if(global.__mpx) {
+    global.__mpx.i18n = i18n
+  }\n`
         }
       }
       // 注入wxs模块
       content += '  const wxsModules = {}\n'
-      if (wxsModuleMap) {
-        Object.keys(wxsModuleMap).forEach((module) => {
-          const src = loaderUtils.urlToRequest(wxsModuleMap[module], projectRoot)
+      if (options.wxsModuleMap) {
+        Object.keys(options.wxsModuleMap).forEach((module) => {
+          const src = loaderUtils.urlToRequest(options.wxsModuleMap[module], options.projectRoot)
           const expression = `require(${stringifyRequest(src)})`
           content += `  wxsModules.${module} = ${expression}\n`
         })
@@ -184,7 +173,7 @@ module.exports = function (script, {
           pagesMap[pagePath] = `getComponent(require(${stringifyRequest(tabBarContainerPath)}), { __mpxBuiltIn: true })`
         } else {
           if (pageCfg.async) {
-            pagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+            pagesMap[pagePath] = `()=>import(${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
           } else {
             // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
             pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
@@ -200,7 +189,7 @@ module.exports = function (script, {
         const componentCfg = localComponentsMap[componentName]
         const componentRequest = stringifyRequest(componentCfg.resource)
         if (componentCfg.async) {
-          componentsMap[componentName] = `()=>import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(res => getComponent(res))`
+          componentsMap[componentName] = `()=>import(${componentRequest}).then(res => getComponent(res))`
         } else {
           componentsMap[componentName] = `getComponent(require(${componentRequest}))`
         }
@@ -208,7 +197,7 @@ module.exports = function (script, {
 
       Object.keys(builtInComponentsMap).forEach((componentName) => {
         const componentCfg = builtInComponentsMap[componentName]
-        const componentRequest = stringifyRequest(componentCfg.resource)
+        const componentRequest = forceDisableBuiltInLoader ? stringifyRequest(componentCfg.resource) : stringifyRequest('builtInComponent.vue!=!' + builtInLoaderPath + '!' + componentCfg.resource)
         componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
       })
 
@@ -217,11 +206,9 @@ module.exports = function (script, {
         content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
       }
       // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
-      content += '\n\n\n/** Source start **/\n'
       content += script.src
-        ? `require(${stringifyRequest(script.src)})\n`
-        : script.content
-      content += '\n/** Source end **/\n\n\n'
+        ? (getRequireForSrc('script', script) + '\n')
+        : (script.content + '\n') + '\n'
       // createApp/Page/Component执行完成后立刻获取当前的option并暂存
       content += `  const currentOption = global.currentOption\n`
       // 获取pageConfig
@@ -252,7 +239,7 @@ module.exports = function (script, {
     currentOption,
     ${JSON.stringify(ctorType)},
     ${JSON.stringify(firstPage)},
-    ${JSON.stringify(outputPath)},
+    ${JSON.stringify(componentId)},
     ${JSON.stringify(pageConfig)},
     // @ts-ignore
     ${shallowStringify(pagesMap)},