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

package/lib/web/processTemplate.js

@@ -1,9 +1,8 @@
 const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
-const path = require('path')
 const parseRequest = require('../utils/parse-request')
-const getMainCompilation = require('../utils/get-main-compilation')
+// const { matchCondition } = require('../utils/match-condition')
 
 function calculateRootEleChild (arr) {
   if (!arr) {
@@ -21,19 +20,30 @@ function calculateRootEleChild (arr) {
   }, 0)
 }
 
-module.exports = function (template, options, callback) {
-  const mode = options.mode
-  const srcMode = options.srcMode
-  const defs = options.defs
-  const moduleId = options.moduleId
-  const loaderContext = options.loaderContext
-  const ctorType = options.ctorType
-  const resourcePath = parseRequest(loaderContext.resource).resourcePath
+module.exports = function (template, {
+  loaderContext,
+  // hasScoped,
+  hasComment,
+  isNative,
+  srcMode,
+  moduleId,
+  ctorType,
+  usingComponents,
+  componentGenerics
+}, callback) {
+  const mpx = loaderContext.getMpx()
+  const {
+    mode,
+    defs,
+    wxsContentMap,
+    decodeHTMLText,
+    externalClasses,
+    checkUsingComponents
+    // autoVirtualHostRules
+  } = mpx
+  const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
-  const compilation = loaderContext._compilation
-  const mainCompilation = getMainCompilation(compilation)
-  const mpx = mainCompilation.__mpx__
-  const wxsContentMap = mpx.wxsContentMap
+
   let wxsModuleMap, genericsInfo
   let output = '/* template */\n'
 
@@ -43,7 +53,7 @@ module.exports = function (template, options, callback) {
       content: '<div class="app"><mpx-keep-alive><router-view class="page"></router-view></mpx-keep-alive></div>'
     }
     builtInComponentsMap['mpx-keep-alive'] = {
-      resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { component: true })
+      resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })
     }
   }
 
@@ -62,7 +72,7 @@ module.exports = function (template, options, callback) {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
-        const parsed = templateCompiler.parse(template.content, {
+        const { root, meta } = templateCompiler.parse(template.content, {
           warn: (msg) => {
             loaderContext.emitWarning(
               new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
@@ -73,54 +83,59 @@ module.exports = function (template, options, callback) {
               new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
             )
           },
-          usingComponents: options.usingComponents,
-          hasComment: options.hasComment,
-          isNative: options.isNative,
-          basename: path.basename(resourcePath),
+          usingComponents,
+          hasComment,
+          isNative,
           isComponent: ctorType === 'component',
           mode,
           srcMode: templateSrcMode,
           defs,
-          decodeHTMLText: options.decodeHTMLText,
-          externalClasses: options.externalClasses,
+          decodeHTMLText,
+          externalClasses,
           // todo 后续输出web也采用mpx的scoped处理
-          // hasScoped:options.hasScoped,
           hasScoped: false,
           moduleId,
-          filePath: loaderContext.resourcePath,
+          filePath: resourcePath,
           i18n: null,
-          checkUsingComponents: options.checkUsingComponents,
+          checkUsingComponents,
           // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
           globalComponents: [],
           // web模式下实现抽象组件
-          componentGenerics: options.componentGenerics
+          componentGenerics
+          // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
+          // hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
         })
-        if (parsed.meta.wxsModuleMap) {
-          wxsModuleMap = parsed.meta.wxsModuleMap
+        if (meta.wxsModuleMap) {
+          wxsModuleMap = meta.wxsModuleMap
         }
-        if (parsed.meta.wxsContentMap) {
-          for (let module in parsed.meta.wxsContentMap) {
-            wxsContentMap[`${resourcePath}~${module}`] = parsed.meta.wxsContentMap[module]
+        if (meta.wxsContentMap) {
+          for (let module in meta.wxsContentMap) {
+            wxsContentMap[`${resourcePath}~${module}`] = meta.wxsContentMap[module]
           }
         }
-        if (parsed.meta.builtInComponentsMap) {
-          Object.keys(parsed.meta.builtInComponentsMap).forEach((name) => {
+        if (meta.builtInComponentsMap) {
+          Object.keys(meta.builtInComponentsMap).forEach((name) => {
             builtInComponentsMap[name] = {
-              resource: addQuery(parsed.meta.builtInComponentsMap[name], { component: true })
+              resource: addQuery(meta.builtInComponentsMap[name], { isComponent: true })
             }
           })
         }
-        if (parsed.meta.genericsInfo) {
-          genericsInfo = parsed.meta.genericsInfo
+        if (meta.genericsInfo) {
+          genericsInfo = meta.genericsInfo
         }
-        // 输出H5有多个root element时, 使用div标签包裹
-        if (parsed.root.tag === 'temp-node') {
-          const childLen = calculateRootEleChild(parsed.root.children)
+        // 输出H5有多个root element时, 使用mpx-root-view标签包裹
+        // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
+        if (root.tag === 'temp-node') {
+          const childLen = calculateRootEleChild(root.children)
           if (childLen >= 2) {
-            parsed.root.tag = 'div'
+            root.tag = 'div'
+            templateCompiler.addAttrs(root, [{
+              name: 'class',
+              value: 'mpx-root-view'
+            }])
           }
         }
-        return templateCompiler.serialize(parsed.root)
+        return templateCompiler.serialize(root)
       }
     })
     output += '\n\n'

package/lib/wxml/loader.js

@@ -17,13 +17,10 @@ module.exports = function (content) {
   const externals = mpx.externals
 
   const { queryObj } = parseRequest(this.resource)
-  const moduleId = queryObj.moduleId
   const hasScoped = false
   const hasComment = false
   const isNative = true
 
-  const usingComponents = []
-
   const mode = mpx.mode
   const localSrcMode = queryObj.mode
   const customAttributes = options.attributes || mpx.attributes || []
@@ -90,8 +87,6 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          moduleId,
-          usingComponents,
           isStatic: true
         }
         requestString = getRequestString('template', { src, mode: localSrcMode }, extraOptions)
@@ -99,7 +94,7 @@ module.exports = function (content) {
       case config[mode].wxs.tag:
         // 显式传递issuerResource避免模块缓存以及提供给wxs-loader计算相对路径
         extraOptions = {
-          issuerFile: mpx.getExtractedFile(this.resource),
+          issuerResource: this.resource,
           isStatic: true
         }
         requestString = getRequestString('wxs', { src, mode: localSrcMode }, extraOptions)

package/lib/wxs/WxsModuleIdsPlugin.js

@@ -1,7 +1,10 @@
 const {
   compareModulesByPreOrderIndexOrIdentifier
 } = require('webpack/lib/util/comparators')
-const { assignAscendingModuleIds } = require('webpack/lib/ids/IdHelpers')
+const {
+  assignAscendingModuleIds,
+  getUsedModuleIdsAndModules
+} = require('webpack/lib/ids/IdHelpers')
 
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Module")} Module */
@@ -12,19 +15,13 @@ class WxsModuleIdsPlugin {
       name: 'WxsModuleIdsPlugin',
       // 放在最前面执行，确保生成的代码模块为数组形式，符合wxs规范
       stage: -1000
-    }, modules => {
-      const chunkGraph = compilation.chunkGraph
-      const modulesInNaturalOrder = Array.from(modules)
-        .filter(
-          m =>
-            m.needId &&
-            chunkGraph.getNumberOfModuleChunks(m) > 0 &&
-            chunkGraph.getModuleId(m) === null
-        )
-        .sort(
-          compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
-        )
-      assignAscendingModuleIds(modulesInNaturalOrder, compilation)
+    }, () => {
+      const [usedIds, modulesInNaturalOrder] =
+        getUsedModuleIdsAndModules(compilation)
+      modulesInNaturalOrder.sort(
+        compareModulesByPreOrderIndexOrIdentifier(compilation.moduleGraph)
+      )
+      assignAscendingModuleIds(usedIds, modulesInNaturalOrder, compilation)
     })
   }
 }

package/lib/wxs/i18n-loader.js

@@ -1,11 +1,9 @@
 // 该loader用于将用户定义的messages注入到i18n.wxs中
-const getMainCompilation = require('../utils/get-main-compilation')
 const loaderUtils = require('loader-utils')
 
 module.exports = function (content) {
-  const mainCompilation = getMainCompilation(this._compilation)
-  const i18n = mainCompilation.__mpx__.i18n
-  let prefix = 'var __mpx_messages__, __mpx_datetime_formats__, __mpx_number_formats__\n'
+  const i18n = this.getMpx().i18n
+  let prefix = 'var __mpx_messages__, __mpx_datetime_formats__, __mpx_number_formats__, __mpx_locale__\n'
   if (i18n) {
     if (i18n.messages) {
       prefix += `__mpx_messages__ = ${JSON.stringify(i18n.messages)}\n`
@@ -22,6 +20,9 @@ module.exports = function (content) {
     } else if (i18n.numberFormatsPath) {
       prefix += `__mpx_number_formats__ = require(${loaderUtils.stringifyRequest(this, i18n.numberFormatsPath)})\n`
     }
+    if (i18n.locale) {
+      prefix += `__mpx_locale__ = ${JSON.stringify(i18n.locale)}\n`
+    }
   }
   content = prefix + content
   return content

package/lib/wxs/loader.js

@@ -1,29 +1,33 @@
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
 const EntryPlugin = require('webpack/lib/EntryPlugin')
+const LazySet = require('webpack/lib/util/LazySet')
 const LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin')
+const FlagEntryExportAsUsedPlugin = require('webpack/lib/FlagEntryExportAsUsedPlugin')
 const path = require('path')
 const WxsPlugin = require('./WxsPlugin')
-const RecordStaticResourceDependency = require('../dependencies/RecordStaticResourceDependency')
+const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const parseRequest = require('../utils/parse-request')
 const toPosix = require('../utils/to-posix')
 const fixRelative = require('../utils/fix-relative')
+const addQuery = require('../utils/add-query')
 const config = require('../config')
 
-module.exports = function () {
+module.exports = content => content
+
+module.exports.pitch = function (remainingRequest) {
   const nativeCallback = this.async()
   const moduleGraph = this._compilation.moduleGraph
   const mpx = this.getMpx()
   const mode = mpx.mode
-  const wxsMap = mpx.wxsMap
-  const appInfo = mpx.appInfo
+  const getOutputPath = mpx.getOutputPath
   let { resourcePath, queryObj } = parseRequest(this.resource)
   const issuer = moduleGraph.getIssuer(this._module)
   const { resourcePath: issuerResourcePath, queryObj: issuerQueryObj } = parseRequest(queryObj.issuerResource || issuer.resource)
-  const issuerPackageName = issuerQueryObj.packageRoot || mpx.currentPackageRoot || 'main'
+  const issuerPackageName = issuerQueryObj.packageRoot || 'main'
   const pagesMap = mpx.pagesMap
   const componentsMap = mpx.componentsMap[issuerPackageName]
   const staticResourcesMap = mpx.staticResourcesMap[issuerPackageName]
-  const issuerName = issuerResourcePath === appInfo.resourcePath ? appInfo.name : (pagesMap[issuerResourcePath] || componentsMap[issuerResourcePath] || staticResourcesMap[issuerResourcePath])
+  const issuerName = pagesMap[issuerResourcePath] || componentsMap[issuerResourcePath] || staticResourcesMap[issuerResourcePath]
   const issuerDir = path.dirname(issuerName)
 
   const getName = (raw) => {
@@ -36,9 +40,9 @@ module.exports = function () {
     resourcePath = `${resourcePath}~${wxsModule}`
   }
   const packageRoot = queryObj.packageRoot || ''
-  const name = path.parse(resourcePath).name + mpx.pathHash(resourcePath)
-  const filename = toPosix(path.join(packageRoot, /^\.([^.]+)/.exec(config[mode].wxs.ext)[1], `${name}${config[mode].wxs.ext}`))
-  this._module.addPresentationalDependency(new RecordStaticResourceDependency(resourcePath, filename, packageRoot))
+  const ext = config[mode].wxs.ext
+  const filename = toPosix(path.join(packageRoot, getOutputPath(resourcePath, ext.slice(1), { ext })))
+  this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', filename, packageRoot))
 
   const callback = (err) => {
     if (err) return nativeCallback(err)
@@ -47,65 +51,92 @@ module.exports = function () {
     nativeCallback(null, `module.exports = ${JSON.stringify(relativePath)};`)
   }
 
-  if (wxsMap[filename]) {
-    wxsMap[filename].modules.push(this._module)
-    return callback()
-  }
+  // 清空issuerResource query避免文件内容输出报错并进行子编译缓存优化
+  const request = '!!' + addQuery(remainingRequest, {}, false, ['issuerResource'])
 
-  wxsMap[filename] = {
-    dep: null,
-    modules: [this._module]
-  }
+  // request中已经包含全量构成filename的信息，故可以直接使用request作为key来进行缓存
+  if (!mpx.wxsAssetsCache.has(request)) {
+    mpx.wxsAssetsCache.set(request, new Promise((resolve, reject) => {
+      const outputOptions = {
+        filename,
+        // 避免输出的wxs中包含es语法
+        environment: {
+          // The environment supports arrow functions ('() => { ... }').
+          arrowFunction: false,
+          // The environment supports BigInt as literal (123n).
+          bigIntLiteral: false,
+          // The environment supports const and let for variable declarations.
+          const: false,
+          // The environment supports destructuring ('{ a, b } = obj').
+          destructuring: false,
+          // The environment supports an async import() function to import EcmaScript modules.
+          dynamicImport: false,
+          // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+          forOf: false,
+          // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+          module: false
+        }
+      }
 
-  const outputOptions = {
-    filename
-  }
-  // wxs文件必须经过pre-loader
-  const request = '!!' + this.remainingRequest
-  const plugins = [
-    new WxsPlugin({ mode }),
-    new NodeTargetPlugin(),
-    new EntryPlugin(this.context, request, { name: getName(filename) }),
-    new LimitChunkCountPlugin({ maxChunks: 1 })
-  ]
+      const plugins = [
+        new WxsPlugin({ mode }),
+        new NodeTargetPlugin(),
+        new EntryPlugin(this.context, request, { name: getName(filename) }),
+        new LimitChunkCountPlugin({ maxChunks: 1 }),
+        new FlagEntryExportAsUsedPlugin(true, 'entry')
+      ]
 
-  const childCompiler = this._compilation.createChildCompiler(resourcePath, outputOptions, plugins)
+      const childCompiler = this._compilation.createChildCompiler(resourcePath, outputOptions, plugins)
 
-  // let entryModule
-  // childCompiler.hooks.thisCompilation.tap('MpxWebpackPlugin ', (compilation) => {
-  //   compilation.hooks.succeedEntry.tap('MpxWebpackPlugin', (entry, name, module) => {
-  //     entryModule = module
-  //     // const dep = new ChildCompileDependency(entryModule)
-  //     // wxsMap[filename].dep = dep
-  //   })
-  // })
+      let assets = []
 
-  childCompiler.hooks.afterCompile.tap('MpxWebpackPlugin', (compilation) => {
-    // 持久化缓存，使用module.buildInfo.assets来输出文件
-    compilation.getAssets().forEach(({ name, source, info }) => {
-      this.emitFile(name, source.source(), undefined, info)
-    })
-    compilation.clearAssets()
-  })
+      childCompiler.hooks.afterCompile.tap('MpxWebpackPlugin', (compilation) => {
+        // 持久化缓存，使用module.buildInfo.assets来输出文件
+        assets = compilation.getAssets()
+        compilation.clearAssets()
+      })
 
-  childCompiler.runAsChild((err, entries, compilation) => {
-    if (err) return callback(err)
-    if (compilation.errors.length > 0) {
-      return callback(compilation.errors[0])
-    }
+      childCompiler.runAsChild((err, entries, compilation) => {
+        if (err) return reject(err)
+        const fileDependencies = new LazySet()
+        const contextDependencies = new LazySet()
+        const missingDependencies = new LazySet()
+        const buildDependencies = new LazySet()
+        compilation.modules.forEach((module) => {
+          module.addCacheDependencies(
+            fileDependencies,
+            contextDependencies,
+            missingDependencies,
+            buildDependencies
+          )
+        })
+        resolve({
+          assets,
+          fileDependencies,
+          contextDependencies,
+          missingDependencies,
+          buildDependencies
+        })
+      })
+    }))
+  }
 
-    compilation.fileDependencies.forEach((dep) => {
+  mpx.wxsAssetsCache.get(request).then(({ assets, fileDependencies, contextDependencies, missingDependencies, buildDependencies }) => {
+    assets.forEach(({ name, source, info }) => {
+      this.emitFile(name, source.source(), undefined, info)
+    })
+    fileDependencies.forEach((dep) => {
       this.addDependency(dep)
-    }, this)
-    compilation.contextDependencies.forEach((dep) => {
+    })
+    contextDependencies.forEach((dep) => {
       this.addContextDependency(dep)
-    }, this)
-    compilation.missingDependencies.forEach((dep) => {
+    })
+    missingDependencies.forEach((dep) => {
       this.addMissingDependency(dep)
     })
-    compilation.buildDependencies.forEach((dep) => {
+    buildDependencies.forEach((dep) => {
       this.addBuildDependency(dep)
     })
     callback()
-  })
+  }).catch(callback)
 }

package/lib/wxs/pre-loader.js

@@ -1,22 +1,21 @@
-const babylon = require('babylon')
-const traverse = require('babel-traverse').default
-const t = require('babel-types')
-const generate = require('babel-generator').default
-const getMainCompilation = require('../utils/get-main-compilation')
+const babylon = require('@babel/parser')
+const traverse = require('@babel/traverse').default
+const t = require('@babel/types')
+const generate = require('@babel/generator').default
 const parseRequest = require('../utils/parse-request')
 const isEmptyObject = require('../utils/is-empty-object')
 const parseQuery = require('loader-utils').parseQuery
 
 module.exports = function (content) {
   this.cacheable()
-  const mainCompilation = getMainCompilation(this._compilation)
+  const mpx = this.getMpx()
   const module = this._module
-  const mode = mainCompilation.__mpx__.mode
+  const mode = mpx.mode
   const wxsModule = parseQuery(this.resourceQuery || '?').wxsModule
 
   // 处理内联wxs
   if (wxsModule) {
-    const wxsContentMap = mainCompilation.__mpx__.wxsContentMap
+    const wxsContentMap = mpx.wxsContentMap
     const resourcePath = parseRequest(this.resource).resourcePath
     content = wxsContentMap[`${resourcePath}~${wxsModule}`] || content
   }
@@ -40,11 +39,25 @@ module.exports = function (content) {
             let results = targetPath.unshiftContainer('body', insertNodes) || []
             targetPath.inserted = true
             results.forEach((item) => {
-              item.stop()
+              item.shouldStopTraverse = true
             })
           }
         }
       },
+      CallExpression (path) {
+        const callee = path.node.callee
+        if (t.isIdentifier(callee) && callee.name === 'getRegExp') {
+          const argPath = path.get('arguments')[0]
+          if (argPath.isStringLiteral()) {
+            argPath.replaceWith(t.stringLiteral(argPath.node.extra.raw.slice(1, -1)))
+          }
+        }
+      },
+      ForStatement (path) {
+        if (path.shouldStopTraverse) {
+          path.stop()
+        }
+      },
       // 处理vant-aliapp中export var bem = bem;这种不被acorn支持的2b语法
       ExportNamedDeclaration (path) {
         if (
@@ -88,12 +101,19 @@ module.exports = function (content) {
       },
       CallExpression (path) {
         const callee = path.node.callee
+        const args = path.node.arguments
         const transMap = {
           getDate: 'Date',
           getRegExp: 'RegExp'
         }
         if (t.isIdentifier(callee) && transMap[callee.name]) {
-          path.replaceWith(t.newExpression(t.identifier(transMap[callee.name]), path.node.arguments))
+          if (callee.name === 'getRegExp') {
+            const arg = args[0]
+            if (t.isStringLiteral(arg)) {
+              args[0] = t.stringLiteral(arg.extra.raw.slice(1, -1))
+            }
+          }
+          path.replaceWith(t.newExpression(t.identifier(transMap[callee.name]), args))
         }
       }
     })

package/lib/wxss/loader.js

@@ -65,7 +65,7 @@ module.exports = function (content, map) {
         alreadyImported[imp.url] = true
       }
       return true
-    }).map((imp) => {
+    }).map((imp, i) => {
       if (!isUrlRequest(imp.url, root, externals)) {
         return 'exports.push([module.id, ' +
           JSON.stringify('@import url(' + imp.url + ');') + ', ' +
@@ -73,9 +73,9 @@ module.exports = function (content, map) {
       } else {
         const requestString = getRequestString('styles', { src: imp.url }, {
           isStatic: true,
-          issuerFile: mpx.getExtractedFile(this.resource),
+          issuerResource: this.resource,
           fromImport: true
-        })
+        }, i)
         return 'exports.push([module.id, ' +
           JSON.stringify('@import "') +
           '+ require(' + requestString + ') +' +