@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

package/lib/wxs/loader.js

@@ -0,0 +1,142 @@
+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 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 = 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 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 || 'main'
+  const pagesMap = mpx.pagesMap
+  const componentsMap = mpx.componentsMap[issuerPackageName]
+  const staticResourcesMap = mpx.staticResourcesMap[issuerPackageName]
+  const issuerName = pagesMap[issuerResourcePath] || componentsMap[issuerResourcePath] || staticResourcesMap[issuerResourcePath]
+  const issuerDir = path.dirname(issuerName)
+
+  const getName = (raw) => {
+    const match = /^(.*?)(\.[^.]*)?$/.exec(raw)
+    return match[1]
+  }
+
+  const wxsModule = queryObj.wxsModule
+  if (wxsModule) {
+    resourcePath = `${resourcePath}~${wxsModule}`
+  }
+  const packageRoot = queryObj.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)
+    let relativePath = toPosix(path.relative(issuerDir, filename))
+    relativePath = fixRelative(relativePath, mode)
+    nativeCallback(null, `module.exports = ${JSON.stringify(relativePath)};`)
+  }
+
+  // 清空issuerResource query避免文件内容输出报错并进行子编译缓存优化
+  const request = '!!' + addQuery(remainingRequest, {}, false, ['issuerResource'])
+
+  // 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 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)
+
+      let assets = []
+
+      childCompiler.hooks.afterCompile.tap('MpxWebpackPlugin', (compilation) => {
+        // 持久化缓存，使用module.buildInfo.assets来输出文件
+        assets = compilation.getAssets()
+        compilation.clearAssets()
+      })
+
+      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
+        })
+      })
+    }))
+  }
+
+  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)
+    })
+    contextDependencies.forEach((dep) => {
+      this.addContextDependency(dep)
+    })
+    missingDependencies.forEach((dep) => {
+      this.addMissingDependency(dep)
+    })
+    buildDependencies.forEach((dep) => {
+      this.addBuildDependency(dep)
+    })
+    callback()
+  }).catch(callback)
+}

package/lib/wxs/{wxs-pre-loader.js → pre-loader.js}

@@ -2,21 +2,20 @@ const babylon = require('@babel/parser')
 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 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
   }
@@ -45,6 +44,15 @@ module.exports = function (content) {
           }
         }
       },
+      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()
@@ -93,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

@@ -5,25 +5,22 @@
 */
 const loaderUtils = require('loader-utils')
 const processCss = require('./processCss')
-const getImportPrefix = require('./getImportPrefix')
 const compileExports = require('./compile-exports')
 const createResolver = require('./createResolver')
 const isUrlRequest = require('../utils/is-url-request')
-const getMainCompilation = require('../utils/get-main-compilation')
-const addQuery = require('../utils/add-query')
+const createHelpers = require('../helpers')
 
 module.exports = function (content, map) {
   if (this.cacheable) this.cacheable()
-
   const callback = this.async()
   const query = loaderUtils.getOptions(this) || {}
-  const root = query.root
   const moduleMode = query.modules || query.module
   const camelCaseKeys = query.camelCase || query.camelcase
-  const sourceMap = this.sourceMap || false
   const resolve = createResolver(query.alias)
-  const mpx = getMainCompilation(this._compilation).__mpx__
+  const mpx = this.getMpx()
   const externals = mpx.externals
+  const root = mpx.projectRoot
+  const sourceMap = mpx.cssSourceMap || false
 
   if (sourceMap) {
     if (map) {
@@ -43,25 +40,24 @@ module.exports = function (content, map) {
     map = null
   }
 
+  const { getRequestString } = createHelpers(this)
+
   processCss(content, map, {
     mode: moduleMode ? 'local' : 'global',
     from: loaderUtils.getRemainingRequest(this).split('!').pop(),
     to: loaderUtils.getCurrentRequest(this).split('!').pop(),
-    query: query,
-    resolve: resolve,
+    query,
+    resolve,
     minimize: this.minimize,
     loaderContext: this,
-    sourceMap: sourceMap
-  }, function (err, result) {
+    sourceMap
+  }, (err, result) => {
     if (err) return callback(err)
 
     let cssAsString = JSON.stringify(result.source)
 
-    // for importing CSS
-    const importUrlPrefix = getImportPrefix(this)
-
     const alreadyImported = {}
-    const importJs = result.importItems.filter(function (imp) {
+    const importJs = result.importItems.filter((imp) => {
       if (!imp.mediaQuery) {
         if (alreadyImported[imp.url]) {
           return false
@@ -69,43 +65,35 @@ module.exports = function (content, map) {
         alreadyImported[imp.url] = true
       }
       return true
-    }).map(function (imp) {
-      if (!isUrlRequest(imp.url, root) || externals.some((external) => {
-        if (typeof external === 'string') {
-          return external === imp.url
-        } else if (external instanceof RegExp) {
-          return external.test(imp.url)
-        }
-        return false
-      })) {
+    }).map((imp, i) => {
+      if (!isUrlRequest(imp.url, root, externals)) {
         return 'exports.push([module.id, ' +
           JSON.stringify('@import url(' + imp.url + ');') + ', ' +
           JSON.stringify(imp.mediaQuery) + ']);'
       } else {
-        if (query.extract) {
-          const importUrlPrefix = getImportPrefix(this, true)
-          const importUrl = importUrlPrefix + addQuery(imp.url, { isStatic: true, issuerResource: this.resource })
-          return 'exports.push([module.id, ' +
-            JSON.stringify('@import "') +
-            '+ require(' + loaderUtils.stringifyRequest(this, importUrl) + ') +' +
-            JSON.stringify('";') + ', ' +
-            JSON.stringify(imp.mediaQuery) + ']);'
-        }
-        const importUrl = importUrlPrefix + imp.url
-        return 'exports.i(require(' + loaderUtils.stringifyRequest(this, importUrl) + '), ' + JSON.stringify(imp.mediaQuery) + ');'
+        const requestString = getRequestString('styles', { src: imp.url }, {
+          isStatic: true,
+          issuerResource: this.resource,
+          fromImport: true
+        }, i)
+        return 'exports.push([module.id, ' +
+          JSON.stringify('@import "') +
+          '+ require(' + requestString + ') +' +
+          JSON.stringify('";') + ', ' +
+          JSON.stringify(imp.mediaQuery) + ']);'
       }
-    }, this).join('\n')
+    }).join('\n')
 
-    function importItemMatcher (item) {
+    const importItemMatcher = (item) => {
       const match = result.importItemRegExp.exec(item)
       const idx = +match[1]
       const importItem = result.importItems[idx]
-      const importUrl = importUrlPrefix + importItem.url
+      const importUrl = importItem.url
       return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ').locals' +
         '[' + JSON.stringify(importItem.export) + '] + "'
     }
 
-    cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this))
+    cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher)
 
     // helper for ensuring valid CSS strings from requires
     let urlEscapeHelper = ''
@@ -113,7 +101,7 @@ module.exports = function (content, map) {
     if (query.url !== false && result.urlItems.length > 0) {
       urlEscapeHelper = 'var escape = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('./url/escape.js')) + ');\n'
 
-      cssAsString = cssAsString.replace(result.urlItemRegExpG, function (item) {
+      cssAsString = cssAsString.replace(result.urlItemRegExpG, (item) => {
         const match = result.urlItemRegExp.exec(item)
         let idx = +match[1]
         const urlItem = result.urlItems[idx]
@@ -129,10 +117,10 @@ module.exports = function (content, map) {
         }
         urlRequest = url
         return '" + escape(require(' + loaderUtils.stringifyRequest(this, urlRequest) + ')) + "'
-      }.bind(this))
+      })
     }
 
-    let exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys)
+    let exportJs = compileExports(result, importItemMatcher, camelCaseKeys)
     if (exportJs) {
       exportJs = 'exports.locals = ' + exportJs + ';'
     }
@@ -165,5 +153,5 @@ module.exports = function (content, map) {
       moduleJs + '\n\n' +
       '// exports\n' +
       exportJs)
-  }.bind(this))
+  })
 }

package/lib/wxss/localsLoader.js

@@ -5,7 +5,6 @@
 */
 var loaderUtils = require('loader-utils')
 var processCss = require('./processCss')
-var getImportPrefix = require('./getImportPrefix')
 var compileExports = require('./compile-exports')
 var createResolver = require('./createResolver')
 
@@ -26,14 +25,11 @@ module.exports = function (content) {
   }, function (err, result) {
     if (err) return callback(err)
 
-    // for importing CSS
-    var importUrlPrefix = getImportPrefix(this, query)
-
     function importItemMatcher (item) {
       var match = result.importItemRegExp.exec(item)
       var idx = +match[1]
       var importItem = result.importItems[idx]
-      var importUrl = importUrlPrefix + importItem.url
+      var importUrl = importItem.url
       return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ')' +
         '[' + JSON.stringify(importItem.export) + '] + "'
     }

package/lib/wxss/processCss.js

@@ -17,129 +17,133 @@ const modulesScope = require('postcss-modules-scope')
 const modulesValues = require('postcss-modules-values')
 const valueParser = require('postcss-value-parser')
 const isUrlRequest = require('../utils/is-url-request')
+// css-loader-parser
 
-const parserPlugin = postcss.plugin('css-loader-parser', function (options) {
-  return function (css) {
-    const imports = {}
-    let exports = {}
-    const importItems = []
-    const urlItems = []
+const parserPlugin = function (options) {
+  return {
+    postcssPlugin: 'css-loader-parser',
+    Once (css) {
+      const imports = {}
+      let exports = {}
+      const importItems = []
+      const urlItems = []
+
+      function replaceImportsInString (str) {
+        if (options.import) {
+          const tokens = valueParser(str)
+          tokens.walk(function (node) {
+            if (node.type !== 'word') {
+              return
+            }
+            const token = node.value
+            const importIndex = imports['$' + token]
+            if (typeof importIndex === 'number') {
+              node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+            }
+          })
+          return tokens.toString()
+        }
+        return str
+      }
 
-    function replaceImportsInString (str) {
       if (options.import) {
-        const tokens = valueParser(str)
-        tokens.walk(function (node) {
-          if (node.type !== 'word') {
+        css.walkAtRules(/^import$/i, function (rule) {
+          const values = Tokenizer.parseValues(rule.params)
+          let url = values.nodes[0].nodes[0]
+          if (url && url.type === 'url') {
+            url = url.url
+          } else if (url && url.type === 'string') {
+            url = url.value
+          } else throw rule.error('Unexpected format ' + rule.params)
+          if (!url.replace(/\s/g, '').length) {
             return
           }
-          const token = node.value
-          const importIndex = imports['$' + token]
-          if (typeof importIndex === 'number') {
-            node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+          values.nodes[0].nodes.shift()
+          const mediaQuery = Tokenizer.stringifyValues(values)
+
+          if (isUrlRequest(url, options.root)) {
+            url = loaderUtils.urlToRequest(url, options.root)
           }
+
+          importItems.push({
+            url: url,
+            mediaQuery: mediaQuery
+          })
+          rule.remove()
         })
-        return tokens.toString()
       }
-      return str
-    }
-
-    if (options.import) {
-      css.walkAtRules(/^import$/i, function (rule) {
-        const values = Tokenizer.parseValues(rule.params)
-        let url = values.nodes[0].nodes[0]
-        if (url && url.type === 'url') {
-          url = url.url
-        } else if (url && url.type === 'string') {
-          url = url.value
-        } else throw rule.error('Unexpected format ' + rule.params)
-        if (!url.replace(/\s/g, '').length) {
-          return
-        }
-        values.nodes[0].nodes.shift()
-        const mediaQuery = Tokenizer.stringifyValues(values)
 
-        if (isUrlRequest(url, options.root)) {
-          url = loaderUtils.urlToRequest(url, options.root)
-        }
-
-        importItems.push({
-          url: url,
-          mediaQuery: mediaQuery
+      const icss = icssUtils.extractICSS(css)
+      exports = icss.icssExports
+      Object.keys(icss.icssImports).forEach(function (key) {
+        const url = loaderUtils.parseString(key)
+        Object.keys(icss.icssImports[key]).forEach(function (prop) {
+          imports['$' + prop] = importItems.length
+          importItems.push({
+            url: url,
+            export: icss.icssImports[key][prop]
+          })
         })
-        rule.remove()
       })
-    }
 
-    const icss = icssUtils.extractICSS(css)
-    exports = icss.icssExports
-    Object.keys(icss.icssImports).forEach(function (key) {
-      const url = loaderUtils.parseString(key)
-      Object.keys(icss.icssImports[key]).forEach(function (prop) {
-        imports['$' + prop] = importItems.length
-        importItems.push({
-          url: url,
-          export: icss.icssImports[key][prop]
-        })
+      Object.keys(exports).forEach(function (exportName) {
+        exports[exportName] = replaceImportsInString(exports[exportName])
       })
-    })
-
-    Object.keys(exports).forEach(function (exportName) {
-      exports[exportName] = replaceImportsInString(exports[exportName])
-    })
 
-    function isAlias (url) {
-      // Handle alias starting by / and root disabled
-      return url !== options.resolve(url)
-    }
+      function isAlias (url) {
+        // Handle alias starting by / and root disabled
+        return url !== options.resolve(url)
+      }
 
-    function processNode (item) {
-      switch (item.type) {
-        case 'value':
-          item.nodes.forEach(processNode)
-          break
-        case 'nested-item':
-          item.nodes.forEach(processNode)
-          break
-        case 'item':
-          const importIndex = imports['$' + item.name]
-          if (typeof importIndex === 'number') {
-            item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
-          }
-          break
-        case 'url':
-          if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || isUrlRequest(item.url, options.root))) {
-            // Strip quotes, they will be re-added if the module needs them
-            item.stringType = ''
-            delete item.innerSpacingBefore
-            delete item.innerSpacingAfter
-            const url = item.url
-            item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
-            urlItems.push({
-              url: url
-            })
-          }
-          break
+      function processNode (item) {
+        switch (item.type) {
+          case 'value':
+            item.nodes.forEach(processNode)
+            break
+          case 'nested-item':
+            item.nodes.forEach(processNode)
+            break
+          case 'item':
+            const importIndex = imports['$' + item.name]
+            if (typeof importIndex === 'number') {
+              item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+            }
+            break
+          case 'url':
+            if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || isUrlRequest(item.url, options.root))) {
+              // Strip quotes, they will be re-added if the module needs them
+              item.stringType = ''
+              delete item.innerSpacingBefore
+              delete item.innerSpacingAfter
+              const url = item.url
+              item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
+              urlItems.push({
+                url: url
+              })
+            }
+            break
+        }
       }
-    }
 
-    css.walkDecls(function (decl) {
-      const values = Tokenizer.parseValues(decl.value)
-      values.nodes.forEach(function (value) {
-        value.nodes.forEach(processNode)
+      css.walkDecls(function (decl) {
+        const values = Tokenizer.parseValues(decl.value)
+        values.nodes.forEach(function (value) {
+          value.nodes.forEach(processNode)
+        })
+        decl.value = Tokenizer.stringifyValues(values)
+      })
+      css.walkAtRules(function (atrule) {
+        if (typeof atrule.params === 'string') {
+          atrule.params = replaceImportsInString(atrule.params)
+        }
       })
-      decl.value = Tokenizer.stringifyValues(values)
-    })
-    css.walkAtRules(function (atrule) {
-      if (typeof atrule.params === 'string') {
-        atrule.params = replaceImportsInString(atrule.params)
-      }
-    })
 
-    options.importItems = importItems
-    options.urlItems = urlItems
-    options.exports = exports
+      options.importItems = importItems
+      options.urlItems = urlItems
+      options.exports = exports
+    }
   }
-})
+}
 
 module.exports = function processCss (inputSource, inputMap, options, callback) {
   const query = options.query