@mpxjs/webpack-plugin 2.7.0-alpha.0 → 2.7.0-alpha.2

package/lib/json-compiler/helper.js

@@ -3,33 +3,31 @@ const normalize = require('../utils/normalize')
 const nativeLoaderPath = normalize.lib('native-loader')
 const isUrlRequestRaw = require('../utils/is-url-request')
 const parseRequest = require('../utils/parse-request')
+const addQuery = require('../utils/add-query')
 const loaderUtils = require('loader-utils')
+const resolve = require('../utils/resolve')
 
-module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
+module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry }) {
   const mpx = loaderContext.getMpx()
   const resolveMode = mpx.resolveMode
   const externals = mpx.externals
   const root = mpx.projectRoot
-  const publicPath = loaderContext._compilation.outputOptions.publicPath || ''
+  const publicPath = (loaderContext._compilation && loaderContext._compilation.outputOptions.publicPath) || ''
   const pathHash = mpx.pathHash
+  const getOutputPath = mpx.getOutputPath
+  const mode = mpx.mode
 
   const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
   const urlToRequest = r => loaderUtils.urlToRequest(r)
 
-  // todo 提供不记录dependency的resolve方法，非必要的情况下不记录dependency，提升缓存利用率
-  const resolve = (context, request, callback) => {
-    const { queryObj } = parseRequest(request)
-    context = queryObj.context || context
-    return loaderContext.resolve(context, request, callback)
-  }
-
   const dynamicEntryMap = new Map()
 
   let dynamicEntryCount = 0
 
-  const getDynamicEntry = (resource, type, outputPath = '', packageRoot = '', relativePath = '') => {
+  const getDynamicEntry = (request, type, outputPath = '', packageRoot = '', relativePath = '', context = '') => {
+    if (typeof customGetDynamicEntry === 'function') return customGetDynamicEntry(request, type, outputPath, packageRoot, relativePath, context)
     const key = `mpx_dynamic_entry_${dynamicEntryCount++}`
-    const value = `__mpx_dynamic_entry__( ${JSON.stringify(resource)},${JSON.stringify(type)},${JSON.stringify(outputPath)},${JSON.stringify(packageRoot)},${JSON.stringify(relativePath)})`
+    const value = `__mpx_dynamic_entry__( ${JSON.stringify(request)},${JSON.stringify(type)},${JSON.stringify(outputPath)},${JSON.stringify(packageRoot)},${JSON.stringify(relativePath)},${JSON.stringify(context)})`
     dynamicEntryMap.set(key, value)
     return key
   }
@@ -42,20 +40,27 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
   }
 
   const processComponent = (component, context, { tarRoot = '', outputPath = '', relativePath = '' }, callback) => {
-    if (!isUrlRequest(component)) return callback()
+    if (!isUrlRequest(component)) return callback(null, component)
     if (resolveMode === 'native') {
       component = urlToRequest(component)
     }
 
-    resolve(context, component, (err, resource, info) => {
+    resolve(context, component, loaderContext, (err, resource, info) => {
       if (err) return callback(err)
-      const resourcePath = parseRequest(resource).resourcePath
+      const { resourcePath, queryObj } = parseRequest(resource)
+
+      if (queryObj.root) {
+        // 删除root query
+        resource = addQuery(resource, {}, false, ['root'])
+        // 目前只有微信支持分包异步化
+        if (mode === 'wx') tarRoot = queryObj.root
+      }
       const parsed = path.parse(resourcePath)
       const ext = parsed.ext
       const resourceName = path.join(parsed.dir, parsed.name)
 
       if (!outputPath) {
-        if (ext === '.js' && resourceName.includes('node_modules')) {
+        if (ext === '.js' && resourceName.includes('node_modules') && mode !== 'web') {
           let root = info.descriptionFileRoot
           let name = 'nativeComponent'
           if (info.descriptionFileData) {
@@ -70,11 +75,10 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
           let relative = path.relative(root, resourceName)
           outputPath = path.join('components', name + pathHash(root), relative)
         } else {
-          let componentName = parsed.name
-          outputPath = path.join('components', componentName + pathHash(resourcePath), componentName)
+          outputPath = getOutputPath(resourcePath, 'component')
         }
       }
-      if (ext === '.js') {
+      if (ext === '.js' && mode !== 'web') {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
 
@@ -83,43 +87,44 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
     })
   }
 
-  const getPageName = (resourcePath, ext) => {
-    const baseName = path.basename(resourcePath, ext)
-    return path.join('pages', baseName + pathHash(resourcePath), baseName)
-  }
-
   const processPage = (page, context, tarRoot = '', callback) => {
     let aliasPath = ''
     if (typeof page !== 'string') {
       aliasPath = page.path
       page = page.src
     }
-    if (!isUrlRequest(page)) return callback()
+    if (!isUrlRequest(page)) return callback(null, page)
     if (resolveMode === 'native') {
       page = urlToRequest(page)
     }
-    resolve(context, page, (err, resource) => {
+    // 增加 page 标识
+    page = addQuery(page, { isPage: true })
+    resolve(context, page, loaderContext, (err, resource) => {
       if (err) return callback(err)
-      const { resourcePath } = parseRequest(resource)
+      const { resourcePath, queryObj: { isFirst } } = parseRequest(resource)
       const ext = path.extname(resourcePath)
       let outputPath
       if (aliasPath) {
-        outputPath = aliasPath
+        outputPath = aliasPath.replace(/^\//, '')
       } else {
         const relative = path.relative(context, resourcePath)
         if (/^\./.test(relative)) {
           // 如果当前page不存在于context中，对其进行重命名
-          outputPath = getPageName(resourcePath, ext)
+          outputPath = getOutputPath(resourcePath, 'page')
           emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${outputPath}], use ?resolve to get the page path and navigate to it!`)
         } else {
           outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
         }
       }
-      if (ext === '.js') {
+      if (ext === '.js' && mode !== 'web') {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
       const entry = getDynamicEntry(resource, 'page', outputPath, tarRoot, publicPath + tarRoot)
-      callback(null, entry)
+      const key = [resourcePath, outputPath, tarRoot].join('|')
+      callback(null, entry, {
+        isFirst,
+        key
+      })
     })
   }
 
@@ -127,7 +132,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
     if (resolveMode === 'native') {
       js = urlToRequest(js)
     }
-    resolve(context, js, (err, resource) => {
+    resolve(context, js, loaderContext, (err, resource) => {
       if (err) return callback(err)
       const { resourcePath } = parseRequest(resource)
       const relative = path.relative(context, resourcePath)
@@ -145,7 +150,6 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
     processDynamicEntry,
     processPage,
     processJsExport,
-    resolve,
     isUrlRequest,
     urlToRequest
   }

package/lib/json-compiler/index.js

@@ -4,15 +4,17 @@ const path = require('path')
 const parseComponent = require('../parser')
 const config = require('../config')
 const parseRequest = require('../utils/parse-request')
-const mpxJSON = require('../utils/mpx-json')
+const evalJSONJS = require('../utils/eval-json-js')
 const fixUsingComponent = require('../utils/fix-using-component')
 const getRulesRunner = require('../platform/index')
 const addQuery = require('../utils/add-query')
-const readJsonForSrc = require('../utils/read-json-for-src')
+const getJSONContent = require('../utils/get-json-content')
 const createHelpers = require('../helpers')
 const createJSONHelper = require('./helper')
 const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
-const { MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const')
+const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
+const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
+const resolve = require('../utils/resolve')
 
 module.exports = function (content) {
   const nativeCallback = this.async()
@@ -27,13 +29,13 @@ module.exports = function (content) {
   // 微信插件下要求组件使用相对路径
   const useRelativePath = mpx.isPluginMode || mpx.useRelativePath
   const { resourcePath, queryObj } = parseRequest(this.resource)
+  const useJSONJS = queryObj.useJSONJS || this.resourcePath.endsWith(JSON_JS_EXT)
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const pagesMap = mpx.pagesMap
   const componentsMap = mpx.componentsMap[packageName]
   const appInfo = mpx.appInfo
   const mode = mpx.mode
   const env = mpx.env
-  const defs = mpx.defs
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
@@ -55,7 +57,6 @@ module.exports = function (content) {
   }
 
   const {
-    resolve,
     isUrlRequest,
     urlToRequest,
     processPage,
@@ -95,6 +96,7 @@ module.exports = function (content) {
             } else {
               fs.readFile(file, (err, content) => {
                 if (err) return callback(err)
+                if (!this._compilation) return callback()
                 let targetPath = path.relative(context, file)
                 this._compilation.assets[targetPath] = {
                   size: function size () {
@@ -121,12 +123,10 @@ module.exports = function (content) {
     nativeCallback(null, output)
   }
 
-  let json = {}
+  let json
   try {
-    // 使用了MPXJSON的话先编译
-    // 此处需要使用真实的resourcePath
-    if (this.resourcePath.endsWith('.json.js')) {
-      json = JSON.parse(mpxJSON.compileMPXJSONText({ source: content, defs, filePath: this.resourcePath }))
+    if (useJSONJS) {
+      json = evalJSONJS(content, this.resourcePath, this)
     } else {
       json = JSON5.parse(content || '{}')
     }
@@ -141,6 +141,9 @@ module.exports = function (content) {
       if (!json.usingComponents) {
         json.usingComponents = {}
       }
+      if (!json.component && mode === 'swan') {
+        json.component = true
+      }
     }
   } else if (componentsMap[resourcePath]) {
     // component
@@ -200,6 +203,10 @@ module.exports = function (content) {
     if (components) {
       async.eachOf(components, (component, name, callback) => {
         processComponent(component, context, { relativePath }, (err, entry) => {
+          if (err === RESOLVE_IGNORED_ERR) {
+            delete components[name]
+            return callback()
+          }
           if (err) return callback(err)
           components[name] = entry
           callback()
@@ -214,26 +221,20 @@ module.exports = function (content) {
     // app.json
     const localPages = []
     const subPackagesCfg = {}
-    // 添加首页标识
-    if (json.pages && json.pages[0]) {
-      if (typeof json.pages[0] !== 'string') {
-        json.pages[0].src = addQuery(json.pages[0].src, { isFirst: true })
-      } else {
-        json.pages[0] = addQuery(json.pages[0], { isFirst: true })
-      }
-    }
+    const pageKeySet = new Set()
 
     const processPages = (pages, context, tarRoot = '', callback) => {
       if (pages) {
         async.each(pages, (page, callback) => {
-          const { queryObj } = parseRequest(page)
-          processPage(page, context, tarRoot, (err, entry) => {
-            if (err) return callback(err)
+          processPage(page, context, tarRoot, (err, entry, { isFirst, key } = {}) => {
+            if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
+            if (pageKeySet.has(key)) return callback()
+            pageKeySet.add(key)
             if (tarRoot && subPackagesCfg) {
               subPackagesCfg[tarRoot].pages.push(entry)
             } else {
               // 确保首页
-              if (queryObj.isFirst) {
+              if (isFirst) {
                 localPages.unshift(entry)
               } else {
                 localPages.push(entry)
@@ -253,13 +254,13 @@ module.exports = function (content) {
           const { queryObj } = parseRequest(packagePath)
           async.waterfall([
             (callback) => {
-              resolve(context, packagePath, (err, result) => {
+              resolve(context, packagePath, this, (err, result) => {
+                if (err) return callback(err)
                 const { rawResourcePath } = parseRequest(result)
                 callback(err, rawResourcePath)
               })
             },
             (result, callback) => {
-              this.addDependency(result)
               fs.readFile(result, (err, content) => {
                 if (err) return callback(err)
                 callback(err, result, content.toString('utf-8'))
@@ -267,24 +268,21 @@ module.exports = function (content) {
             },
             (result, content, callback) => {
               const extName = path.extname(result)
-              if (extName === '.mpx' || extName === '.vue') {
+              if (extName === '.mpx') {
                 const parts = parseComponent(content, {
                   filePath: result,
                   needMap: this.sourceMap,
                   mode,
-                  defs,
                   env
                 })
-                const json = parts.json || {}
-                if (json.content) {
-                  content = json.content
-                } else if (json.src) {
-                  return readJsonForSrc(json.src, this, (content) => {
-                    callback(null, result, content)
-                  })
-                }
+                // 对于通过.mpx文件声明的独立分包，默认将其自身的script block视为init module
+                if (queryObj.independent === true) queryObj.independent = result
+                getJSONContent(parts.json || {}, this, (err, content) => {
+                  callback(err, result, content)
+                })
+              } else {
+                callback(null, result, content)
               }
-              callback(null, result, content)
             },
             (result, content, callback) => {
               try {
@@ -330,7 +328,9 @@ module.exports = function (content) {
                 callback()
               }
             }
-          ], callback)
+          ], (err) => {
+            callback(err === RESOLVE_IGNORED_ERR ? null : err)
+          })
         }, callback)
       } else {
         callback()
@@ -353,6 +353,31 @@ module.exports = function (content) {
       return result
     }
 
+    const recordIndependent = (root, request) => {
+      this._module && this._module.addPresentationalDependency(new RecordIndependentDependency(root, request))
+    }
+
+    const processIndependent = (otherConfig, context, tarRoot, callback) => {
+      // 支付宝不支持独立分包，无需处理
+      const independent = otherConfig.independent
+      if (!independent || mode === 'ali') {
+        delete otherConfig.independent
+        return callback()
+      }
+      // independent配置为字符串时视为init module
+      if (typeof independent === 'string') {
+        otherConfig.independent = true
+        resolve(context, independent, this, (err, result) => {
+          if (err) return callback(err)
+          recordIndependent(tarRoot, result)
+          callback()
+        })
+      } else {
+        recordIndependent(tarRoot, true)
+        callback()
+      }
+    }
+
     // 为了获取资源的所属子包，该函数需串行执行
     const processSubPackage = (subPackage, context, callback) => {
       if (subPackage) {
@@ -364,26 +389,27 @@ module.exports = function (content) {
         let srcRoot = subPackage.srcRoot || subPackage.root || ''
         if (!tarRoot || subPackagesCfg[tarRoot]) return callback()
 
+        context = path.join(context, srcRoot)
         const otherConfig = getOtherConfig(subPackage)
-        // 支付宝不支持独立分包，无需处理
-        if (otherConfig.independent && mode !== 'ali') {
-          mpx.independentSubpackagesMap[tarRoot] = true
-        }
-
         subPackagesCfg[tarRoot] = {
           root: tarRoot,
-          pages: [],
-          ...otherConfig
+          pages: []
         }
-        context = path.join(context, srcRoot)
         async.parallel([
+          (callback) => {
+            processIndependent(otherConfig, context, tarRoot, callback)
+          },
           (callback) => {
             processPages(subPackage.pages, context, tarRoot, callback)
           },
           (callback) => {
             processPlugins(subPackage.plugins, context, tarRoot, callback)
           }
-        ], callback)
+        ], (err) => {
+          if (err) return callback(err)
+          Object.assign(subPackagesCfg[tarRoot], otherConfig)
+          callback()
+        })
       } else {
         callback()
       }
@@ -452,17 +478,32 @@ module.exports = function (content) {
 
     const processCustomTabBar = (tabBar, context, callback) => {
       if (tabBar && tabBar.custom) {
-        processComponent('./custom-tab-bar/index', context, { outputPath: 'custom-tab-bar/index' }, callback)
+        processComponent('./custom-tab-bar/index', context, { outputPath: 'custom-tab-bar/index' }, (err, entry) => {
+          if (err === RESOLVE_IGNORED_ERR) {
+            delete tabBar.custom
+            return callback()
+          }
+          tabBar.custom = entry // hack for javascript parser call hook.
+          callback(err)
+        })
       } else {
         callback()
       }
     }
 
-    const processPluginGenericsImplementation = (genericsImplementation, context, tarRoot, callback) => {
+    const processPluginGenericsImplementation = (plugin, context, tarRoot, callback) => {
+      if (!plugin.genericsImplementation) return callback()
       const relativePath = useRelativePath ? publicPath + tarRoot : ''
-      async.eachOf(genericsImplementation, (genericComponents, name, callback) => {
+      async.eachOf(plugin.genericsImplementation, (genericComponents, name, callback) => {
         async.eachOf(genericComponents, (genericComponentPath, name, callback) => {
-          processComponent(genericComponentPath, context, { tarRoot, relativePath }, (err, entry) => {
+          processComponent(genericComponentPath, context, {
+            tarRoot,
+            relativePath
+          }, (err, entry) => {
+            if (err === RESOLVE_IGNORED_ERR) {
+              delete genericComponents[name]
+              return callback()
+            }
             if (err) return callback(err)
             genericComponents[name] = entry
           })
@@ -471,10 +512,12 @@ module.exports = function (content) {
     }
 
     const processPluginExport = (plugin, context, tarRoot, callback) => {
-      if (!plugin.export) {
-        return callback()
-      }
+      if (!plugin.export) return callback()
       processJsExport(plugin.export, context, tarRoot, (err, entry) => {
+        if (err === RESOLVE_IGNORED_ERR) {
+          delete plugin.export
+          return callback()
+        }
         if (err) return callback(err)
         plugin.export = entry
         callback()
@@ -486,31 +529,33 @@ module.exports = function (content) {
       async.eachOf(plugins, (plugin, name, callback) => {
         async.parallel([
           (callback) => {
-            if (plugin.genericsImplementation) {
-              processPluginGenericsImplementation(plugin.genericsImplementation, context, tarRoot, callback)
-            } else {
-              callback()
-            }
+            processPluginGenericsImplementation(plugin, context, tarRoot, callback)
           },
           (callback) => {
             processPluginExport(plugin, context, tarRoot, callback)
           }
-        ], (err) => {
-          callback(err)
-        })
+        ], callback)
       }, callback)
     }
 
     async.parallel([
       (callback) => {
-        processPlugins(json.plugins, this.context, '', callback)
-      },
-      (callback) => {
+        // 添加首页标识
+        if (json.pages && json.pages[0]) {
+          if (typeof json.pages[0] !== 'string') {
+            json.pages[0].src = addQuery(json.pages[0].src, { isFirst: true })
+          } else {
+            json.pages[0] = addQuery(json.pages[0], { isFirst: true })
+          }
+        }
         processPages(json.pages, this.context, '', callback)
       },
       (callback) => {
         processComponents(json.usingComponents, this.context, callback)
       },
+      (callback) => {
+        processPlugins(json.plugins, this.context, '', callback)
+      },
       (callback) => {
         processWorkers(json.workers, this.context, callback)
       },
@@ -530,10 +575,14 @@ module.exports = function (content) {
       delete json.subPackages
       json.pages = localPages
       for (let root in subPackagesCfg) {
-        if (!json.subPackages) {
-          json.subPackages = []
+        const subPackageCfg = subPackagesCfg[root]
+        // 分包不存在 pages，输出 subPackages 字段会报错
+        if (subPackageCfg.pages.length) {
+          if (!json.subPackages) {
+            json.subPackages = []
+          }
+          json.subPackages.push(subPackageCfg)
         }
-        json.subPackages.push(subPackagesCfg[root])
       }
       const processOutput = (output) => {
         output = processDynamicEntry(output)
@@ -551,6 +600,10 @@ module.exports = function (content) {
         async.eachOf(generics, (generic, name, callback) => {
           if (generic.default) {
             processComponent(generic.default, context, { relativePath }, (err, entry) => {
+              if (err === RESOLVE_IGNORED_ERR) {
+                delete generic.default
+                return callback()
+              }
               if (err) return callback(err)
               generic.default = entry
               callback()

package/lib/json-compiler/plugin.js

@@ -2,7 +2,9 @@ const async = require('async')
 const JSON5 = require('json5')
 const getEntryName = require('../utils/get-entry-name')
 const FlagPluginDependency = require('../dependencies/FlagPluginDependency')
+const RemoveEntryDependency = require('../dependencies/RemoveEntryDependency')
 const createJSONHelper = require('./helper')
+const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR } = require('../utils/const')
 
 module.exports = function (source) {
   // 该loader中会在每次编译中动态添加entry，不能缓存，否则watch不好使
@@ -14,6 +16,9 @@ module.exports = function (source) {
     return nativeCallback(null, source)
   }
 
+  // json模块必须每次都创建（但并不是每次都需要build），用于动态添加编译入口，传递信息以禁用父级extractor的缓存
+  this.emitFile(MPX_DISABLE_EXTRACTOR_CACHE, '', undefined, { skipEmit: true })
+
   this._module.addPresentationalDependency(new FlagPluginDependency())
 
   const emitWarning = (msg) => {
@@ -45,7 +50,7 @@ module.exports = function (source) {
   const srcMode = mpx.srcMode
   const entryName = getEntryName(this)
   // 最终输出中不需要为plugin.json产生chunk，而是使用extractor输出，删除plugin.json对应的entrypoint
-  if (entryName) this._compilation.entries.delete(entryName)
+  if (entryName) this._module.addPresentationalDependency(new RemoveEntryDependency(entryName))
 
   // 新模式下plugin.json输出依赖于extractor
   const callback = (err, processOutput) => {
@@ -66,6 +71,10 @@ module.exports = function (source) {
   const processMain = (main, callback) => {
     if (!main) return callback()
     processJsExport(main, context, '', (err, entry) => {
+      if (err === RESOLVE_IGNORED_ERR) {
+        delete pluginEntry.main
+        return callback()
+      }
       if (err) return callback(err)
       pluginEntry.main = entry
       callback()
@@ -76,8 +85,12 @@ module.exports = function (source) {
     if (!components) return callback()
     async.eachOf(components, (component, name, callback) => {
       processComponent(component, context, { relativePath }, (err, entry) => {
+        if (err === RESOLVE_IGNORED_ERR) {
+          delete components[name]
+          return callback()
+        }
         if (err) return callback(err)
-        pluginEntry.publicComponents[name] = entry
+        components[name] = entry
         callback()
       })
     }, callback)
@@ -103,21 +116,24 @@ module.exports = function (source) {
       pluginEntry.pages = []
     }
 
-    async.eachOf(pages, (page, key) => {
+    async.eachOf(pages, (page, key, callback) => {
       processPage(page, context, '', (err, entry) => {
+        if (err === RESOLVE_IGNORED_ERR) {
+          delete pages[key]
+          return callback()
+        }
         if (err) return callback(err)
-        pages[key] = entry
         if (mode === 'ali') {
           pluginEntry.pages.push(entry)
           if (!/^__private_page_\d+__$/.test(key)) {
             pluginEntry.publicPages[key] = entry
           }
         } else {
-          pluginEntry.pages[key] = entry
+          pages[key] = entry
         }
         callback()
       })
-    })
+    }, callback)
   }
 
   async.parallel([
@@ -126,7 +142,7 @@ module.exports = function (source) {
     }, (callback) => {
       return processComponents(pluginEntry.publicComponents, callback)
     }, (callback) => {
-      return processPages(pluginEntry.publicPages, callback)
+      return processPages(pluginEntry.pages, callback)
     }
   ], (err) => {
     return callback(err, processDynamicEntry)