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

package/lib/json-compiler/plugin.js

@@ -0,0 +1,134 @@
+const async = require('async')
+const JSON5 = require('json5')
+const getEntryName = require('../utils/get-entry-name')
+const FlagPluginDependency = require('../dependencies/FlagPluginDependency')
+const createJSONHelper = require('./helper')
+
+module.exports = function (source) {
+  // 该loader中会在每次编译中动态添加entry，不能缓存，否则watch不好使
+  const nativeCallback = this.async()
+
+  const mpx = this.getMpx()
+
+  if (!mpx) {
+    return nativeCallback(null, source)
+  }
+
+  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._compilation.entries.delete(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) 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) return callback(err)
+        pluginEntry.publicComponents[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) 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
+        }
+        callback()
+      })
+    })
+  }
+
+  async.parallel([
+    (callback) => {
+      return processMain(pluginEntry.main, callback)
+    }, (callback) => {
+      return processComponents(pluginEntry.publicComponents, callback)
+    }, (callback) => {
+      return processPages(pluginEntry.publicPages, 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')
@@ -14,13 +13,13 @@ const processStyles = require('./web/processStyles')
 const processTemplate = require('./web/processTemplate')
 const readJsonForSrc = require('./utils/read-json-for-src')
 const normalize = require('./utils/normalize')
-const getMainCompilation = require('./utils/get-main-compilation')
+const getEntryName = require('./utils/get-entry-name')
+const AppEntryDependency = require('./dependencies/AppEntryDependency')
 
 module.exports = function (content) {
   this.cacheable()
 
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
+  const mpx = this.getMpx()
   if (!mpx) {
     return content
   }
@@ -42,19 +41,11 @@ module.exports = function (content) {
 
   // 支持资源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
-      }
-    }
+    const entryName = getEntryName(this)
     if (queryObj.component) {
-      componentsMap[resourcePath] = entryChunkName || 'noEntryComponent'
+      componentsMap[resourcePath] = entryName || 'noEntryComponent'
     } else {
-      pagesMap[resourcePath] = entryChunkName || 'noEntryPage'
+      pagesMap[resourcePath] = entryName || 'noEntryPage'
     }
   }
 
@@ -67,24 +58,14 @@ module.exports = function (content) {
     ctorType = 'component'
   }
 
+  if (ctorType === 'app') {
+    const appName = getEntryName(this)
+    this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+  }
+
   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
 
@@ -119,8 +100,7 @@ module.exports = function (content) {
       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
@@ -144,23 +124,6 @@ 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) {
@@ -185,6 +148,7 @@ module.exports = function (content) {
             async.parallel([
               (callback) => {
                 processTemplate(parts.template, {
+                  hasScoped,
                   hasComment,
                   isNative,
                   mode,
@@ -238,7 +202,6 @@ module.exports = function (content) {
               srcMode,
               loaderContext,
               isProduction,
-              getRequireForSrc,
               i18n,
               componentGenerics,
               projectRoot,
@@ -262,36 +225,23 @@ module.exports = function (content) {
         })
       }
 
-      // 触发webpack global var 注入
-      output += 'global.currentModuleId\n'
+      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 (ctorType === 'app' && i18n && !mpx.forceDisableInject) {
-        globalInjectCode += `global.i18n = ${JSON.stringify({ locale: i18n.locale, version: 0 })}\n`
+      if (ctorType === 'app' && i18n) {
+        output += `global.i18n = ${JSON.stringify({ locale: i18n.locale, version: 0 })}\n`
 
-        const i18nMethodsVar = 'i18nMethods'
         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 += `global.i18nMethods = ${i18nMethodsVar}\n`
+        output += `global.i18nMethods = require(${loaderUtils.stringifyRequest(loaderContext, i18nWxsRequest)})\n`
       }
       // 注入构造函数
       let ctor = 'App'
@@ -305,29 +255,68 @@ module.exports = function (content) {
       } else if (ctorType === 'component') {
         ctor = 'Component'
       }
-      globalInjectCode += `global.currentCtor = ${ctor}\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`
 
-      // <script>
+      // template
+      output += '/* template */\n'
+      const template = parts.template
+
+      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'
+      if (parts.styles.length) {
+        parts.styles.forEach((style, i) => {
+          const scoped = style.scoped || autoScope
+          const extraOptions = {
+            moduleId,
+            scoped
+          }
+          // require style
+          if (style.src) {
+            // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerResource
+            extraOptions.isStatic = true
+            extraOptions.issuerFile = mpx.getExtractedFile(this.resource)
+          }
+          output += getRequire('styles', style, extraOptions, i) + '\n'
+        })
+      } else if (ctorType === 'app' && mode === 'ali') {
+        output += getRequire('styles', {}) + '\n'
+      }
+
+      // json
+      output += '/* json */\n'
+      // 给予json默认值, 确保生成json request以自动补全json
+      const json = parts.json || {}
+      output += getRequire('json', json, json.src && { resourcePath }) + '\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)
-        }
+        if (scriptSrcMode) output += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+        const extraOptions = {}
+        if (script.src) extraOptions.resourcePath = resourcePath
+        output += getRequire('script', script, extraOptions) + '\n'
       } else {
         switch (ctorType) {
           case 'app':
@@ -344,90 +333,6 @@ module.exports = function (content) {
         }
         output += '\n'
       }
-
-      if (scriptSrcMode) {
-        globalInjectCode += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\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
-          // 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)
-          }
-        })
-        output += styleInjectionCode + '\n'
-      }
-
-      // json
-      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
-
-      if (template) {
-        if (template.src) {
-          template.src = processSrcQuery(template.src, 'template')
-          output += getRequireForSrc('template', template) + '\n\n'
-        } else {
-          output += getRequire('template', template) + '\n\n'
-        }
-      }
-
-      if (!mpx.forceDisableInject) {
-        const dep = new InjectDependency({
-          content: globalInjectCode,
-          index: -3
-        })
-        this._module.addDependency(dep)
-      }
-
       callback(null, output)
     }
   ], callback)

package/lib/native-loader.js

@@ -1,37 +1,27 @@
 const path = require('path')
 const JSON5 = require('json5')
 const parseRequest = require('./utils/parse-request')
-const loaderUtils = require('loader-utils')
 const config = require('./config')
 const createHelpers = require('./helpers')
-const InjectDependency = require('./dependency/InjectDependency')
-const addQuery = require('./utils/add-query')
 const mpxJSON = require('./utils/mpx-json')
 const async = require('async')
 const matchCondition = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
-const getMainCompilation = require('./utils/get-main-compilation')
 
 module.exports = function (content) {
   this.cacheable()
 
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
+  const mpx = this.getMpx()
   if (!mpx) {
     return content
   }
 
   const nativeCallback = this.async()
-
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  const options = Object.assign({}, mpx.loaderOptions, loaderUtils.getOptions(this))
-
   const filePath = this.resourcePath
-
   const moduleId = 'm' + mpx.pathHash(filePath)
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const projectRoot = mpx.projectRoot
   const mode = mpx.mode
   const defs = mpx.defs
   const globalSrcMode = mpx.srcMode
@@ -41,7 +31,7 @@ module.exports = function (content) {
   const componentsMap = mpx.componentsMap[packageName]
   const parsed = path.parse(resourcePath)
   const resourceName = path.join(parsed.dir, parsed.name)
-  const isApp = !pagesMap[resourcePath] && !componentsMap[resourcePath]
+  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const srcMode = localSrcMode || globalSrcMode
   const fs = this._compiler.inputFileSystem
   const typeExtMap = config[srcMode].typeExtMap
@@ -177,61 +167,52 @@ module.exports = function (content) {
         }
       } catch (e) {
       }
-      const {
-        getRequireForSrc,
-        getNamedExportsForSrc
-      } = createHelpers({
-        loaderContext,
-        options,
-        moduleId,
-        hasScoped,
-        hasComment,
-        usingComponents,
-        srcMode,
-        isNative,
-        projectRoot
-      })
 
-      const getRequire = (type) => {
-        const localQuery = Object.assign({}, queryObj)
-        let src = typeResourceMap[type]
-        localQuery.resourcePath = resourcePath
-        if (type !== 'script') {
-          this.addDependency(src)
-        }
-        if (type === 'template' && isApp) {
-          return ''
-        }
-        if (type === 'json' && !useMPXJSON) {
-          localQuery.__component = true
-        }
-        src = addQuery(src, localQuery, true)
-        const partsOpts = { src }
+      const {
+        getRequire
+      } = createHelpers(loaderContext)
+
+      const getRequireByType = (type) => {
+        const src = typeResourceMap[type]
+        const part = { src }
+        const extraOptions = Object.assign({}, queryObj, {
+          resourcePath
+        })
 
-        if (type === 'script') {
-          return getNamedExportsForSrc(type, partsOpts)
-        }
-        if (type === 'styles') {
-          if (cssLang) {
-            partsOpts.lang = cssLang
-          }
-          if (hasScoped) {
-            return getRequireForSrc(type, partsOpts, 0, true)
-          }
+        if (type !== 'script') this.addDependency(src)
+
+        switch (type) {
+          case 'template':
+            if (isApp) return ''
+            Object.assign(extraOptions, {
+              hasScoped,
+              hasComment,
+              isNative,
+              moduleId,
+              usingComponents
+            })
+            break
+          case 'styles':
+            if (cssLang) part.lang = cssLang
+            Object.assign(extraOptions, {
+              moduleId,
+              scoped: hasScoped
+            })
+            break
         }
-        return getRequireForSrc(type, partsOpts)
+        return getRequire(type, part, extraOptions)
       }
 
       // 注入模块id及资源路径
-      let globalInjectCode = `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
+      let output = `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
-        globalInjectCode += `global.currentResource = ${JSON.stringify(filePath)}\n`
+        output += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }
 
       // 注入构造函数
       let ctor = 'App'
       if (pagesMap[resourcePath]) {
-        if (mpx.forceUsePageCtor || mode === 'ali') {
+        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
           ctor = 'Page'
         } else {
           ctor = 'Component'
@@ -239,28 +220,17 @@ module.exports = function (content) {
       } else if (componentsMap[resourcePath]) {
         ctor = 'Component'
       }
-      globalInjectCode += `global.currentCtor = ${ctor}\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`
 
       if (srcMode) {
-        globalInjectCode += `global.currentSrcMode = ${JSON.stringify(srcMode)}\n`
+        output += `global.currentSrcMode = ${JSON.stringify(srcMode)}\n`
       }
 
-      if (!mpx.forceDisableInject) {
-        const dep = new InjectDependency({
-          content: globalInjectCode,
-          index: -3
-        })
-        this._module.addDependency(dep)
-      }
-
-      // 触发webpack global var 注入
-      let output = 'global.currentModuleId;\n'
-
       for (let type in typeResourceMap) {
-        output += `/* ${type} */\n${getRequire(type)}\n\n`
+        output += `/* ${type} */\n${getRequireByType(type)}\n\n`
       }
 
       callback(null, output)

package/lib/record-loader.js

@@ -0,0 +1,11 @@
+const parseRequest = require('./utils/parse-request')
+const RecordStaticResourceDependency = require('./dependencies/RecordStaticResourceDependency')
+
+module.exports = function (source) {
+  const mpx = this.getMpx()
+  const { resourcePath, queryObj } = parseRequest(this.resource)
+  const file = mpx.getExtractedFile(this.resource)
+  const packageRoot = queryObj.packageRoot || ''
+  this._module.addPresentationalDependency(new RecordStaticResourceDependency(resourcePath, file, packageRoot))
+  return source
+}