@mpxjs/webpack-plugin 2.7.0-beta.1 → 2.7.0-beta.13

package/lib/utils/eval-json-js.js

@@ -0,0 +1,31 @@
+const path = require('path')
+
+module.exports = function evalJSONJS (source, filename, loaderContext) {
+  const fs = loaderContext._compiler.inputFileSystem
+  const defs = loaderContext.getMpx().defs
+  const defKeys = Object.keys(defs)
+  const defValues = defKeys.map((key) => {
+    return defs[key]
+  })
+  // 记录依赖
+  loaderContext.addDependency(filename)
+  const dirname = path.dirname(filename)
+  // eslint-disable-next-line no-new-func
+  const func = new Function('module', 'exports', 'require', '__filename', '__dirname', ...defKeys, source)
+  const module = {
+    exports: {}
+  }
+  // 此处采用readFileSync+evalJSONJS而不直接使用require获取依赖内容有两个原因：
+  // 1. 支持依赖中正常访问defs变量
+  // 2. 避免对应的依赖文件被作为buildDependencies
+  func(module, module.exports, function (request) {
+    if (request.startsWith('.')) {
+      request = path.join(dirname, request)
+    }
+    const filename = require.resolve(request)
+    const source = fs.readFileSync(filename).toString('utf-8')
+    return evalJSONJS(source, filename, loaderContext)
+  }, filename, dirname, ...defValues)
+
+  return module.exports
+}

package/lib/utils/get-json-content.js

@@ -0,0 +1,41 @@
+const parseRequest = require('./parse-request')
+const evalJSONJS = require('./eval-json-js')
+const resolve = require('./resolve')
+const async = require('async')
+const { JSON_JS_EXT } = require('./const')
+
+module.exports = function getJSONContent (json, loaderContext, callback) {
+  const fs = loaderContext._compiler.inputFileSystem
+  async.waterfall([
+    (callback) => {
+      if (json.src) {
+        resolve(loaderContext.context, json.src, loaderContext, (err, result) => {
+          if (err) return callback(err)
+          const { rawResourcePath: resourcePath } = parseRequest(result)
+          fs.readFile(resourcePath, (err, content) => {
+            if (err) return callback(err)
+            callback(null, {
+              content: content.toString('utf-8'),
+              useJSONJS: json.useJSONJS || resourcePath.endsWith(JSON_JS_EXT),
+              filename: resourcePath
+
+            })
+          })
+        })
+      } else {
+        callback(null, {
+          content: json.content,
+          useJSONJS: json.useJSONJS,
+          filename: loaderContext.resourcePath
+        })
+      }
+    },
+    ({ content, useJSONJS, filename }, callback) => {
+      if (!content) return callback(null, '{}')
+      if (useJSONJS) {
+        content = JSON.stringify(evalJSONJS(content, filename, loaderContext))
+      }
+      callback(null, content)
+    }
+  ], callback)
+}

package/lib/utils/resolve.js

@@ -0,0 +1,13 @@
+const parseRequest = require('./parse-request')
+const { RESOLVE_IGNORED_ERR } = require('./const')
+
+// todo 提供不记录dependency的resolve方法，非必要的情况下不记录dependency，提升缓存利用率
+module.exports = (context, request, loaderContext, callback) => {
+  const { queryObj } = parseRequest(request)
+  context = queryObj.context || context
+  return loaderContext.resolve(context, request, (err, resource, info) => {
+    if (err) return callback(err)
+    if (resource === false) return callback(RESOLVE_IGNORED_ERR)
+    callback(null, resource, info)
+  })
+}

package/lib/web/processJSON.js

@@ -6,28 +6,30 @@ const parseRequest = require('../utils/parse-request')
 const toPosix = require('../utils/to-posix')
 const addQuery = require('../utils/add-query')
 const parseComponent = require('../parser')
-const readJsonForSrc = require('../utils/read-json-for-src')
-const isUrlRequest = require('../utils/is-url-request')
+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')
 
-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
+module.exports = function (json, {
+  loaderContext,
+  pagesMap,
+  componentsMap
+}, rawCallback) {
   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) => {
@@ -37,13 +39,31 @@ module.exports = function (json, options, rawCallback) {
   }
 
   const emitError = (msg) => {
-    this.emitError(
-      new Error('[json compiler][' + this.resource + ']: ' + msg)
+    loaderContext.emitError(
+      new Error('[json compiler][' + loaderContext.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,
@@ -67,12 +87,6 @@ module.exports = function (json, options, rawCallback) {
 
   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',
@@ -90,7 +104,7 @@ module.exports = function (json, options, rawCallback) {
       tabBarStr = JSON.stringify(tabBar)
       tabBarStr = tabBarStr.replace(/"(iconPath|selectedIconPath)":"([^"]+)"/g, function (matched, $1, $2) {
         if (isUrlRequest($2, projectRoot)) {
-          return `"${$1}":require(${stringifyRequest(loaderUtils.urlToRequest($2, projectRoot))})`
+          return `"${$1}":require(${stringifyRequest(urlToRequest($2, projectRoot))})`
         }
         return matched
       })
@@ -100,45 +114,37 @@ module.exports = function (json, options, rawCallback) {
 
   const processPackages = (packages, context, callback) => {
     if (packages) {
-      async.forEach(packages, (packagePath, callback) => {
-        const parsed = parseRequest(packagePath)
-        const queryObj = parsed.queryObj
-        // readFile无法处理query
-        packagePath = parsed.resourcePath
+      async.each(packages, (packagePath, callback) => {
+        const { queryObj } = parseRequest(packagePath)
         async.waterfall([
           (callback) => {
-            resolve(context, packagePath, (err, result) => {
-              callback(err, result)
+            resolve(context, packagePath, loaderContext, (err, result) => {
+              if (err) return callback(err)
+              const { rawResourcePath } = parseRequest(result)
+              callback(err, rawResourcePath)
             })
           },
           (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 filePath = result
-            const extName = path.extname(filePath)
+            const extName = path.extname(result)
             if (extName === '.mpx' || extName === '.vue') {
               const parts = parseComponent(content, {
-                filePath,
+                filePath: result,
                 needMap: loaderContext.sourceMap,
                 mode,
-                defs,
                 env
               })
-              const json = parts.json || {}
-              if (json.content) {
-                content = json.content
-              } else if (json.src) {
-                return readJsonForSrc(json.src, loaderContext, (content) => {
-                  callback(null, result, content)
-                })
-              }
+              getJSONContent(parts.json || {}, loaderContext, (err, content) => {
+                callback(err, result, content)
+              })
+            } else {
+              callback(null, result, content)
             }
-            callback(null, result, content)
           },
           (result, content, callback) => {
             try {
@@ -159,12 +165,17 @@ module.exports = function (json, options, rawCallback) {
                   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)
                 })
               }
             }
@@ -179,77 +190,41 @@ module.exports = function (json, options, rawCallback) {
               callback()
             }
           }
-        ], callback)
+        ], (err) => {
+          callback(err === RESOLVE_IGNORED_ERR ? null : err)
+        })
       }, callback)
     } else {
       callback()
     }
   }
 
-  const getPageName = (resourcePath, ext) => {
-    const baseName = path.basename(resourcePath, ext)
-    return path.join('pages', baseName + pathHash(resourcePath), baseName)
-  }
+  const pageKeySet = new Set()
 
-  const processPages = (pages, srcRoot = '', tarRoot = '', context, callback) => {
+  const processPages = (pages, context, tarRoot = '', callback) => {
     if (pages) {
-      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)
+      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)
           const { resourcePath, queryObj } = parseRequest(resource)
-          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()
-              }
+          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!`))
             }
-          } 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
-                }
-              }
-            }
-          }
-          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 }),
+
+          pagesMap[resourcePath] = outputPath
+          loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
+
+          localPagesMap[outputPath] = {
+            resource: addQuery(resource, { isPage: true }),
             async: tarRoot || queryObj.async,
-            isFirst: queryObj.isFirst
+            isFirst
           }
           callback()
         })
@@ -261,10 +236,15 @@ module.exports = function (json, options, rawCallback) {
 
   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()
-      processPages(subPackage.pages, srcRoot, tarRoot, context, callback)
+      context = path.join(context, srcRoot)
+      processPages(subPackage.pages, context, tarRoot, callback)
     } else {
       callback()
     }
@@ -272,7 +252,7 @@ module.exports = function (json, options, rawCallback) {
 
   const processSubPackages = (subPackages, context, callback) => {
     if (subPackages) {
-      async.forEach(subPackages, (subPackage, callback) => {
+      async.each(subPackages, (subPackage, callback) => {
         processSubPackage(subPackage, context, callback)
       }, callback)
     } else {
@@ -282,48 +262,38 @@ module.exports = function (json, options, rawCallback) {
 
   const processComponents = (components, context, callback) => {
     if (components) {
-      async.forEachOf(components, (component, name, callback) => {
-        processComponent(component, name, context, callback)
+      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.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+
+          localComponentsMap[name] = {
+            resource: addQuery(resource, {
+              isComponent: true,
+              outputPath
+            }),
+            async: queryObj.async
+          }
+          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) {
-      async.forEachOf(generics, (generic, name, callback) => {
-        if (generic.default) {
-          processComponent(generic.default, `${name}default`, context, callback)
-        } else {
-          callback()
-        }
-      }, callback)
+      const genericsComponents = {}
+      Object.keys(generics).forEach((name) => {
+        const generic = generics[name]
+        if (generic.default) genericsComponents[`${name}default`] = generic.default
+      })
+      processComponents(genericsComponents, context, callback)
     } else {
       callback()
     }
@@ -331,6 +301,7 @@ module.exports = function (json, options, rawCallback) {
 
   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 })
@@ -338,7 +309,7 @@ module.exports = function (json, options, rawCallback) {
           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,7 +2,6 @@ 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')
@@ -21,23 +20,29 @@ function shallowStringify (obj) {
   return `{${arr.join(',')}}`
 }
 
-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 i18n = options.i18n
-  const jsonConfig = options.jsonConfig
+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
+
   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(
@@ -49,7 +54,7 @@ module.exports = function (script, options, callback) {
   let tabBarPagesMap = {}
   if (tabBar && tabBarMap) {
     // 挂载tabBar组件
-    const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { component: true }))
+    const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { isComponent: true }))
     tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
     // 挂载tabBar页面
     Object.keys(tabBarMap).forEach((pagePath) => {
@@ -108,12 +113,6 @@ module.exports = function (script, options, callback) {
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)
-  import BScroll from '@better-scroll/core'
-  import PullDown from '@better-scroll/pull-down'
-  import ObserveDOM from '@better-scroll/observe-dom'
-  BScroll.use(ObserveDOM)
-  BScroll.use(PullDown)
-  global.BScroll = BScroll
   global.getApp = function(){}
   global.getCurrentPages = function(){
     if(!global.__mpxRouter) return []
@@ -161,9 +160,9 @@ module.exports = function (script, options, callback) {
       }
       // 注入wxs模块
       content += '  const wxsModules = {}\n'
-      if (options.wxsModuleMap) {
-        Object.keys(options.wxsModuleMap).forEach((module) => {
-          const src = loaderUtils.urlToRequest(options.wxsModuleMap[module], options.projectRoot)
+      if (wxsModuleMap) {
+        Object.keys(wxsModuleMap).forEach((module) => {
+          const src = loaderUtils.urlToRequest(wxsModuleMap[module], projectRoot)
           const expression = `require(${stringifyRequest(src)})`
           content += `  wxsModules.${module} = ${expression}\n`
         })
@@ -202,7 +201,7 @@ module.exports = function (script, options, callback) {
 
       Object.keys(builtInComponentsMap).forEach((componentName) => {
         const componentCfg = builtInComponentsMap[componentName]
-        const componentRequest = forceDisableBuiltInLoader ? stringifyRequest(componentCfg.resource) : stringifyRequest('builtInComponent.vue!=!' + builtInLoaderPath + '!' + componentCfg.resource)
+        const componentRequest = stringifyRequest(componentCfg.resource)
         componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
       })
 
@@ -211,10 +210,11 @@ module.exports = function (script, options, callback) {
         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'
+      content += '\n/**   ====== Source end ====== **/\n\n\n'
       // createApp/Page/Component执行完成后立刻获取当前的option并暂存
       content += `  const currentOption = global.currentOption\n`
       // 获取pageConfig
@@ -245,7 +245,7 @@ module.exports = function (script, options, callback) {
     currentOption,
     ${JSON.stringify(ctorType)},
     ${JSON.stringify(firstPage)},
-    ${JSON.stringify(componentId)},
+    ${JSON.stringify(outputPath)},
     ${JSON.stringify(pageConfig)},
     // @ts-ignore
     ${shallowStringify(pagesMap)},