@mpxjs/webpack-plugin 2.6.110 → 2.7.0-beta.10

package/lib/json-compiler/plugin.js

@@ -0,0 +1,150 @@
+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不好使
+  const nativeCallback = this.async()
+
+  const mpx = this.getMpx()
+
+  if (!mpx) {
+    return nativeCallback(null, source)
+  }
+
+  // json模块必须每次都创建（但并不是每次都需要build），用于动态添加编译入口，传递信息以禁用父级extractor的缓存
+  this.emitFile(MPX_DISABLE_EXTRACTOR_CACHE, '', undefined, { skipEmit: true })
+
+  this._module.addPresentationalDependency(new FlagPluginDependency())
+
+  const emitWarning = (msg) => {
+    this.emitWarning(
+      new Error('[plugin loader][' + this.resource + ']: ' + msg)
+    )
+  }
+
+  const emitError = (msg) => {
+    this.emitError(
+      new Error('[plugin loader][' + this.resource + ']: ' + msg)
+    )
+  }
+
+  const {
+    processPage,
+    processDynamicEntry,
+    processComponent,
+    processJsExport
+  } = createJSONHelper({
+    loaderContext: this,
+    emitWarning,
+    emitError
+  })
+
+  const context = this.context
+  const relativePath = this._compilation.outputOptions.publicPath || ''
+  const mode = mpx.mode
+  const srcMode = mpx.srcMode
+  const entryName = getEntryName(this)
+  // 最终输出中不需要为plugin.json产生chunk，而是使用extractor输出，删除plugin.json对应的entrypoint
+  if (entryName) this._module.addPresentationalDependency(new RemoveEntryDependency(entryName))
+
+  // 新模式下plugin.json输出依赖于extractor
+  const callback = (err, processOutput) => {
+    if (err) return nativeCallback(err)
+    let output = `var pluginEntry = ${JSON.stringify(pluginEntry, null, 2)};\n`
+    if (processOutput) output = processOutput(output)
+    output += `module.exports = JSON.stringify(pluginEntry, null, 2);\n`
+    nativeCallback(null, output)
+  }
+
+  let pluginEntry
+  try {
+    pluginEntry = JSON5.parse(source)
+  } catch (err) {
+    return callback(err)
+  }
+
+  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()
+    })
+  }
+
+  const processComponents = (components, callback) => {
+    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)
+        components[name] = entry
+        callback()
+      })
+    }, callback)
+  }
+
+  const processPages = (pages, callback) => {
+    if (!pages) return callback()
+    if (srcMode === 'ali') {
+      const reversedMap = {}
+      const publicPages = pluginEntry.publicPages || {}
+      Object.keys(publicPages).forEach((key) => {
+        const item = publicPages[key]
+        reversedMap[item] = key
+      })
+      pages = pages.reduce((page, target, index) => {
+        const key = reversedMap[page] || `__private_page_${index}__`
+        target[key] = page
+      }, {})
+    }
+
+    if (mode === 'ali') {
+      pluginEntry.publicPages = {}
+      pluginEntry.pages = []
+    }
+
+    async.eachOf(pages, (page, key) => {
+      processPage(page, context, '', (err, entry) => {
+        if (err === RESOLVE_IGNORED_ERR) {
+          delete pages[key]
+          return callback()
+        }
+        if (err) return callback(err)
+        if (mode === 'ali') {
+          pluginEntry.pages.push(entry)
+          if (!/^__private_page_\d+__$/.test(key)) {
+            pluginEntry.publicPages[key] = entry
+          }
+        } else {
+          pages[key] = entry
+        }
+        callback()
+      })
+    })
+  }
+
+  async.parallel([
+    (callback) => {
+      return processMain(pluginEntry.main, callback)
+    }, (callback) => {
+      return processComponents(pluginEntry.publicComponents, callback)
+    }, (callback) => {
+      return processPages(pluginEntry.pages, callback)
+    }
+  ], (err) => {
+    return callback(err, processDynamicEntry)
+  })
+}

package/lib/json-compiler/{theme-loader.js → theme.js}

@@ -8,9 +8,11 @@ function isFile (request) {
 }
 
 module.exports = function (raw) {
-  const options = loaderUtils.getOptions(this) || {}
-  const isUrlRequest = r => isUrlRequestRaw(r, options.root)
-  const urlToRequest = r => loaderUtils.urlToRequest(r, options.root)
+  const mpx = this.getMpx()
+  const root = mpx.projectRoot
+  const externals = mpx.externals
+  const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
+  const urlToRequest = r => loaderUtils.urlToRequest(r, root)
 
   const json = JSON5.parse(raw)
   let output = `var json = ${JSON.stringify(json, null, 2)};\n`

package/lib/loader.js

@@ -2,7 +2,6 @@ const JSON5 = require('json5')
 const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
 const loaderUtils = require('loader-utils')
-const InjectDependency = require('./dependency/InjectDependency')
 const parseRequest = require('./utils/parse-request')
 const matchCondition = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
@@ -12,15 +11,16 @@ const processJSON = require('./web/processJSON')
 const processScript = require('./web/processScript')
 const processStyles = require('./web/processStyles')
 const processTemplate = require('./web/processTemplate')
-const readJsonForSrc = require('./utils/read-json-for-src')
+const getJSONContent = require('./utils/get-json-content')
 const normalize = require('./utils/normalize')
-const getMainCompilation = require('./utils/get-main-compilation')
-const { MPX_APP_MODULE_ID } = require('./staticConfig')
+const getEntryName = require('./utils/get-entry-name')
+const AppEntryDependency = require('./dependencies/AppEntryDependency')
+const { MPX_APP_MODULE_ID } = require('./utils/const')
+
 module.exports = function (content) {
   this.cacheable()
 
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
+  const mpx = this.getMpx()
   if (!mpx) {
     return content
   }
@@ -28,11 +28,8 @@ module.exports = function (content) {
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const pagesMap = mpx.pagesMap
   const componentsMap = mpx.componentsMap[packageName]
-  const resolveMode = mpx.resolveMode
-  const projectRoot = mpx.projectRoot
   const mode = mpx.mode
   const env = mpx.env
-  const defs = mpx.defs
   const i18n = mpx.i18n
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
@@ -40,21 +37,13 @@ module.exports = function (content) {
   const vueContentCache = mpx.vueContentCache
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
-  // 支持资源query传入page或component支持页面/组件单独编译
-  if ((queryObj.component && !componentsMap[resourcePath]) || (queryObj.page && !pagesMap[resourcePath])) {
-    let entryChunkName
-    const rawRequest = this._module.rawRequest
-    const _preparedEntrypoints = this._compilation._preparedEntrypoints
-    for (let i = 0; i < _preparedEntrypoints.length; i++) {
-      if (rawRequest === _preparedEntrypoints[i].request) {
-        entryChunkName = _preparedEntrypoints[i].name
-        break
-      }
-    }
-    if (queryObj.component) {
-      componentsMap[resourcePath] = entryChunkName || 'noEntryComponent'
+  // 支持资源query传入isPage或isComponent支持页面/组件单独编译
+  if ((queryObj.isComponent && !componentsMap[resourcePath]) || (queryObj.isPage && !pagesMap[resourcePath])) {
+    const entryName = getEntryName(this)
+    if (queryObj.isComponent) {
+      componentsMap[resourcePath] = entryName || 'noEntryComponent'
     } else {
-      pagesMap[resourcePath] = entryChunkName || 'noEntryPage'
+      pagesMap[resourcePath] = entryName || 'noEntryPage'
     }
   }
 
@@ -66,37 +55,17 @@ module.exports = function (content) {
     // component
     ctorType = 'component'
   }
+
   const loaderContext = this
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  const options = loaderUtils.getOptions(this) || {}
-  const processSrcQuery = (src, type) => {
-    const localQuery = Object.assign({}, queryObj)
-    // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerResource
-    if (type === 'styles') {
-      localQuery.isStatic = true
-      localQuery.issuerResource = this.resource
-    } else {
-      localQuery.resourcePath = resourcePath
-    }
-    if (type === 'json') {
-      localQuery.__component = true
-    }
-    return addQuery(src, localQuery)
-  }
-
   const filePath = resourcePath
-
-  let moduleId = 'm' + mpx.pathHash(filePath)
-  if (ctorType === 'app') {
-    moduleId = MPX_APP_MODULE_ID
-  }
+  const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
 
   const parts = parseComponent(content, {
     filePath,
     needMap: this.sourceMap,
     mode,
-    defs,
     env
   })
 
@@ -105,24 +74,18 @@ module.exports = function (content) {
 
   async.waterfall([
     (callback) => {
-      const json = parts.json || {}
-      if (json.src) {
-        readJsonForSrc(json.src, loaderContext, (err, result) => {
-          if (err) return callback(err)
-          json.content = result
-          callback()
-        })
-      } else {
+      getJSONContent(parts.json || {}, loaderContext, (err, content) => {
+        if (err) return callback(err)
+        if (parts.json) parts.json.content = content
         callback()
-      }
+      })
     },
     (callback) => {
       // web输出模式下没有任何inject，可以通过cache直接返回，由于读取src json可能会新增模块依赖，需要在之后返回缓存内容
       if (vueContentCache.has(filePath)) {
         return callback(null, vueContentCache.get(filePath))
       }
-      // 只有ali才可能需要scoped
-      const hasScoped = (parts.styles.some(({ scoped }) => scoped) || autoScope) && mode === 'ali'
+      const hasScoped = parts.styles.some(({ scoped }) => scoped) || autoScope
       const templateAttrs = parts.template && parts.template.attrs
       const hasComment = templateAttrs && templateAttrs.comments
       const isNative = false
@@ -146,27 +109,10 @@ module.exports = function (content) {
         }
       }
 
-      const {
-        getRequire,
-        getRequireForSrc,
-        getRequestString,
-        getSrcRequestString
-      } = createHelpers({
-        loaderContext,
-        options,
-        moduleId,
-        hasScoped,
-        hasComment,
-        usingComponents,
-        srcMode,
-        isNative,
-        projectRoot
-      })
-
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
-        if (ctorType === 'app' && !queryObj.app) {
-          const request = addQuery(this.resource, { app: true })
+        if (ctorType === 'app' && !queryObj.isApp) {
+          const request = addQuery(this.resource, { isApp: true })
           output += `
       import App from ${stringifyRequest(request)}
       import Vue from 'vue'
@@ -187,19 +133,15 @@ module.exports = function (content) {
             async.parallel([
               (callback) => {
                 processTemplate(parts.template, {
+                  loaderContext,
+                  hasScoped,
                   hasComment,
                   isNative,
-                  mode,
                   srcMode,
-                  defs,
-                  loaderContext,
                   moduleId,
                   ctorType,
                   usingComponents,
-                  componentGenerics,
-                  decodeHTMLText: mpx.decodeHTMLText,
-                  externalClasses: mpx.externalClasses,
-                  checkUsingComponents: mpx.checkUsingComponents
+                  componentGenerics
                 }, callback)
               },
               (callback) => {
@@ -211,16 +153,9 @@ module.exports = function (content) {
               },
               (callback) => {
                 processJSON(parts.json, {
-                  mode,
-                  env,
-                  defs,
-                  resolveMode,
                   loaderContext,
                   pagesMap,
-                  pagesEntryMap: mpx.pagesEntryMap,
-                  pathHash: mpx.pathHash,
-                  componentsMap,
-                  projectRoot
+                  componentsMap
                 }, callback)
               }
             ], (err, res) => {
@@ -236,24 +171,20 @@ module.exports = function (content) {
             }
 
             processScript(parts.script, {
+              loaderContext,
               ctorType,
               srcMode,
-              loaderContext,
               isProduction,
-              getRequireForSrc,
-              i18n,
               componentGenerics,
-              projectRoot,
               jsonConfig: jsonRes.jsonObj,
-              componentId: queryObj.componentId || '',
+              outputPath: queryObj.outputPath || '',
               tabBarMap: jsonRes.tabBarMap,
               tabBarStr: jsonRes.tabBarStr,
               builtInComponentsMap: templateRes.builtInComponentsMap,
               genericsInfo: templateRes.genericsInfo,
               wxsModuleMap: templateRes.wxsModuleMap,
               localComponentsMap: jsonRes.localComponentsMap,
-              localPagesMap: jsonRes.localPagesMap,
-              forceDisableBuiltInLoader: mpx.forceDisableBuiltInLoader
+              localPagesMap: jsonRes.localPagesMap
             }, callback)
           }
         ], (err, scriptRes) => {
@@ -264,37 +195,37 @@ module.exports = function (content) {
         })
       }
 
-      // 触发webpack global var 注入
-      output += 'global.currentModuleId\n'
+      const moduleGraph = this._compilation.moduleGraph
+
+      const issuer = moduleGraph.getIssuer(this._module)
+
+      if (issuer) {
+        return callback(new Error(`Current ${ctorType} [${this.resourcePath}] is issued by [${issuer.resource}], which is not allowed!`))
+      }
+
+      if (ctorType === 'app') {
+        const appName = getEntryName(this)
+        this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+      }
+
+      const {
+        getRequire
+      } = createHelpers(loaderContext)
 
-      // todo loader中inject dep比较危险，watch模式下不一定靠谱，可考虑将import改为require然后通过修改loader内容注入
       // 注入模块id及资源路径
-      let globalInjectCode = `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
+      output += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
-        globalInjectCode += `global.currentResource = ${JSON.stringify(filePath)}\n`
+        output += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }
-
-      if (i18n && (ctorType === 'app' || (ctorType === 'page' && queryObj.isIndependent)) && !mpx.forceDisableInject) {
-        const i18nMethodsVar = 'i18nMethods'
+      // 为app或独立分包页面注入i18n
+      if (i18n && (ctorType === 'app' || (ctorType === 'page' && queryObj.isIndependent))) {
         const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
-        const i18nWxsLoaderPath = normalize.lib('wxs/wxs-i18n-loader.js')
+        const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
         const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
-        const expression = `require(${loaderUtils.stringifyRequest(loaderContext, i18nWxsRequest)})`
-        const deps = []
-        this._module.parser.parse(expression, {
-          current: {
-            addDependency: dep => {
-              dep.userRequest = i18nMethodsVar
-              deps.push(dep)
-            }
-          },
-          module: this._module
-        })
-        this._module.addVariable(i18nMethodsVar, expression, deps)
 
-        globalInjectCode += `if (!global.i18n) {
+        output += `if (!global.i18n) {
   global.i18n = ${JSON.stringify({ locale: i18n.locale, version: 0 })}
-  global.i18nMethods = ${i18nMethodsVar}
+  global.i18nMethods = require(${loaderUtils.stringifyRequest(loaderContext, i18nWxsRequest)})
 }\n`
       }
       // 注入构造函数
@@ -309,101 +240,50 @@ module.exports = function (content) {
       } else if (ctorType === 'component') {
         ctor = 'Component'
       }
-      globalInjectCode += `global.currentCtor = ${ctor}\n`
-      globalInjectCode += `global.currentResourceType = '${ctorType}'\n`
-      globalInjectCode += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
+      output += `global.currentCtor = ${ctor}\n`
+      output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()
       }))}\n`
+      output += `global.currentResourceType = '${ctorType}'\n`
 
-      // <script>
-      output += '/* script */\n'
-      let scriptSrcMode = srcMode
-      const script = parts.script
-      if (script) {
-        scriptSrcMode = script.mode || scriptSrcMode
-        let scriptRequestString
-        if (script.src) {
-          // 传入resourcePath以确保后续处理中能够识别src引入的资源为组件主资源
-          script.src = processSrcQuery(script.src, 'script')
-          scriptRequestString = getSrcRequestString('script', script)
-        } else {
-          scriptRequestString = getRequestString('script', script)
-        }
-        if (scriptRequestString) {
-          output += 'export * from ' + scriptRequestString + '\n\n'
-          if (ctorType === 'app') {
-            mpx.appScriptRawRequest = JSON.parse(scriptRequestString)
-            mpx.appScriptPromise = new Promise((resolve) => {
-              mpx.appScriptPromiseResolve = resolve
-            })
-          }
-        }
-      } else {
-        switch (ctorType) {
-          case 'app':
-            output += 'import {createApp} from "@mpxjs/core"\n' +
-              'createApp({})\n'
-            break
-          case 'page':
-            output += 'import {createPage} from "@mpxjs/core"\n' +
-              'createPage({})\n'
-            break
-          case 'component':
-            output += 'import {createComponent} from "@mpxjs/core"\n' +
-              'createComponent({})\n'
-        }
-        output += '\n'
-      }
+      // template
+      output += '/* template */\n'
+      const template = parts.template
 
-      if (scriptSrcMode) {
-        globalInjectCode += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+      if (template) {
+        const extraOptions = {
+          hasScoped,
+          hasComment,
+          isNative,
+          moduleId,
+          usingComponents
+          // 添加babel处理渲染函数中可能包含的...展开运算符
+          // 由于...运算符应用范围极小以及babel成本极高，先关闭此特性后续看情况打开
+          // needBabel: true
+        }
+        if (template.src) extraOptions.resourcePath = resourcePath
+        // 基于global.currentInject来注入模板渲染函数和refs等信息
+        output += getRequire('template', template, extraOptions) + '\n'
       }
 
       // styles
       output += '/* styles */\n'
-      let cssModules
       if (parts.styles.length) {
-        let styleInjectionCode = ''
         parts.styles.forEach((style, i) => {
-          let scoped = hasScoped ? (style.scoped || autoScope) : false
-          let requireString
+          const scoped = style.scoped || autoScope
+          const extraOptions = {
+            moduleId,
+            scoped
+          }
           // require style
           if (style.src) {
-            style.src = processSrcQuery(style.src, 'styles')
-            requireString = getRequireForSrc('styles', style, -1, scoped)
-          } else {
-            requireString = getRequire('styles', style, i, scoped)
-          }
-          const hasStyleLoader = requireString.indexOf('style-loader') > -1
-          const invokeStyle = code => `${code}\n`
-
-          const moduleName = style.module === true ? '$style' : style.module
-          // setCssModule
-          if (moduleName) {
-            if (!cssModules) {
-              cssModules = {}
-            }
-            if (moduleName in cssModules) {
-              loaderContext.emitError(
-                'CSS module name "' + moduleName + '" is not unique!'
-              )
-              styleInjectionCode += invokeStyle(requireString)
-            } else {
-              cssModules[moduleName] = true
-
-              if (!hasStyleLoader) {
-                requireString += '.locals'
-              }
-
-              styleInjectionCode += invokeStyle(
-                'this["' + moduleName + '"] = ' + requireString
-              )
-            }
-          } else {
-            styleInjectionCode += invokeStyle(requireString)
+            // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerFile
+            extraOptions.isStatic = true
+            const issuerResource = addQuery(this.resource, { type: 'styles' }, true)
+            extraOptions.issuerFile = mpx.getExtractedFile(issuerResource)
           }
+          output += getRequire('styles', style, extraOptions, i) + '\n'
         })
-        output += styleInjectionCode + '\n'
       } else if (ctorType === 'app' && mode === 'ali') {
         output += getRequire('styles', {}) + '\n'
       }
@@ -412,34 +292,35 @@ module.exports = function (content) {
       output += '/* json */\n'
       // 给予json默认值, 确保生成json request以自动补全json
       const json = parts.json || {}
-      if (json.src) {
-        json.src = processSrcQuery(json.src, 'json')
-        output += getRequireForSrc('json', json) + '\n\n'
-      } else {
-        output += getRequire('json', json) + '\n\n'
-      }
-
-      // template
-      output += '/* template */\n'
-      const template = parts.template
+      output += getRequire('json', json, json.src && { resourcePath }) + '\n'
 
-      if (template) {
-        if (template.src) {
-          template.src = processSrcQuery(template.src, 'template')
-          output += getRequireForSrc('template', template) + '\n\n'
-        } else {
-          output += getRequire('template', template) + '\n\n'
+      // script
+      output += '/* script */\n'
+      let scriptSrcMode = srcMode
+      const script = parts.script
+      if (script) {
+        scriptSrcMode = script.mode || scriptSrcMode
+        if (scriptSrcMode) output += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+        const extraOptions = {}
+        if (script.src) extraOptions.resourcePath = resourcePath
+        output += getRequire('script', script, extraOptions) + '\n'
+      } else {
+        // todo 依然创建request在selector中进行补全或者将i18n通过CommonJsVariableDependency改造为initFragments的方式进行注入，否则在app.mpx中没有script区块的情况下无法保证i18n注入代码在@mpxjs/core之前执行
+        switch (ctorType) {
+          case 'app':
+            output += 'import {createApp} from "@mpxjs/core"\n' +
+              'createApp({})\n'
+            break
+          case 'page':
+            output += 'import {createPage} from "@mpxjs/core"\n' +
+              'createPage({})\n'
+            break
+          case 'component':
+            output += 'import {createComponent} from "@mpxjs/core"\n' +
+              'createComponent({})\n'
         }
+        output += '\n'
       }
-
-      if (!mpx.forceDisableInject) {
-        const dep = new InjectDependency({
-          content: globalInjectCode,
-          index: -3
-        })
-        this._module.addDependency(dep)
-      }
-
       callback(null, output)
     }
   ], callback)