@mpxjs/webpack-plugin 2.6.114-alpha.4 → 2.6.114-alpha.7

package/lib/wxs/WxsTemplatePlugin.js

@@ -1,104 +1,58 @@
-const Template = require('webpack/lib/Template')
 const config = require('../config')
-const { ConcatSource } = require('webpack-sources')
+const { ConcatSource } = require('webpack').sources
+const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
 
-module.exports = class WxsMainTemplatePlugin {
+module.exports = class WxsTemplatePlugin {
   constructor (options = { mode: 'wx' }) {
     this.options = options
   }
 
-  apply (mainTemplate, compilation) {
-    mainTemplate.hooks.require.tap('MainTemplate', (source, chunk, hash) => {
-      return Template.asString([
-        '// Check if module is in cache',
-        'if(installedModules[moduleId]) {',
-        Template.indent('return installedModules[moduleId].exports;'),
-        '}',
-        '// Create a new module (and put it into the cache)',
-        'var module = installedModules[moduleId] = {',
-        Template.indent(mainTemplate.hooks.moduleObj.call('', chunk, hash, 'moduleId')),
-        '};',
-        '',
-        Template.asString(
-          [
-            '// Execute the module function',
-            '// wxs连call都不支持我也是服气...',
-            `modules[moduleId](module, module.exports, ${mainTemplate.renderRequireFunctionForModule(
-              hash,
-              chunk,
-              'moduleId'
-            )});`
-          ]
-        ),
-        '',
-        '// Flag the module as loaded',
-        'module.l = true;',
-        '',
-        '// Return the exports of the module',
-        'return module.exports;'
-      ])
-    })
-    mainTemplate.hooks.requireExtensions.tap(
-      'WxsMainTemplatePlugin',
-      () => {
-        return Template.asString([
-          '// define harmony function exports',
-          `${mainTemplate.requireFn}.d = function(exports, name, getter) {`,
-          Template.indent([
-            'exports[name] = getter();'
-          ]),
-          '};',
-          '',
-          '// define __esModule on exports',
-          `${mainTemplate.requireFn}.r = function(exports) {`,
-          Template.indent([
-            'exports.__esModule = true;'
-          ]),
-          '};',
-          '',
-          '// getDefaultExport function for compatibility with non-harmony modules',
-          mainTemplate.requireFn + '.n = function(module) {',
-          Template.indent([
-            'var getter = module && module.__esModule ?',
-            Template.indent([
-              'function getDefault() { return module["default"]; } :',
-              'function getModuleExports() { return module; };'
-            ]),
-            `getter.a = getter();`,
-            'return getter;'
-          ]),
-          '};'
-        ])
-      }
-    )
-    mainTemplate.hooks.renderWithEntry.tap(
-      'WxsMainTemplatePlugin',
-      (source, chunk, hash) => {
-        const prefix = config[this.options.mode].wxs.templatePrefix
-        return new ConcatSource(prefix, source)
-      }
-    )
+  apply (compilation) {
+    const hooks = JavascriptModulesPlugin.getCompilationHooks(compilation)
 
-    mainTemplate.hooks.startup.tap('MainTemplate', (source, chunk, hash) => {
-      /** @type {string[]} */
-      const buf = []
-      if (chunk.entryModule) {
-        buf.push('// Load entry module and return exports')
-        buf.push(
-          `var entryExports = ${mainTemplate.renderRequireFunctionForModule(
-            hash,
-            chunk,
-            JSON.stringify(chunk.entryModule.id)
-          )}(${mainTemplate.requireFn}.s = ${JSON.stringify(chunk.entryModule.id)});`
-        )
-        buf.push('return entryExports && entryExports.__esModule? entryExports["default"] : entryExports;')
-      }
-      return Template.asString(buf)
+    hooks.renderStartup.tap('WxsTemplatePlugin', (source) => {
+      const postfix = 'return __webpack_exports__ && __webpack_exports__.__esModule? __webpack_exports__["default"] : __webpack_exports__;\n'
+      return new ConcatSource(source, postfix)
     })
 
-    mainTemplate.hooks.hash.tap('WxsMainTemplatePlugin', hash => {
-      hash.update('wxs')
-      hash.update(this.options.mode)
+    hooks.render.tap('WxsTemplatePlugin', (source) => {
+      const prefix = config[this.options.mode].wxs.templatePrefix
+      return new ConcatSource(prefix, source)
     })
+
+    // todo webpack5的新的代码生成模式下完美支持.d.r.n的成本较高，暂不处理，wxs暂时只支持wx源码形式
+    // mainTemplate.hooks.requireExtensions.tap(
+    //   'WxsMainTemplatePlugin',
+    //   () => {
+    //     return Template.asString([
+    //       '// define harmony function exports',
+    //       `${mainTemplate.requireFn}.d = function(exports, name, getter) {`,
+    //       Template.indent([
+    //         'exports[name] = getter();'
+    //       ]),
+    //       '};',
+    //       '',
+    //       '// define __esModule on exports',
+    //       `${mainTemplate.requireFn}.r = function(exports) {`,
+    //       Template.indent([
+    //         'exports.__esModule = true;'
+    //       ]),
+    //       '};',
+    //       '',
+    //       '// getDefaultExport function for compatibility with non-harmony modules',
+    //       mainTemplate.requireFn + '.n = function(module) {',
+    //       Template.indent([
+    //         'var getter = module && module.__esModule ?',
+    //         Template.indent([
+    //           'function getDefault() { return module["default"]; } :',
+    //           'function getModuleExports() { return module; };'
+    //         ]),
+    //         `getter.a = getter();`,
+    //         'return getter;'
+    //       ]),
+    //       '};'
+    //     ])
+    //   }
+    // )
   }
 }

package/lib/wxs/{wxs-i18n-loader.js → 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

@@ -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) + '] + "'
     }