@mpxjs/webpack-plugin 2.10.7 → 2.10.8

package/lib/dependencies/RecordPageConfigsMapDependency.js

@@ -29,7 +29,7 @@ class RecordPageConfigMapDependency extends NullDependency {
 
   deserialize (context) {
     const { read } = context
-    this.pagePath = read()
+    this.resourcePath = read()
     this.jsonObj = read()
     super.deserialize(context)
   }

package/lib/dependencies/RequireExternalDependency.js

@@ -0,0 +1,61 @@
+const path = require('path')
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RequireExternalDependency extends NullDependency {
+  constructor (range, url) {
+    super()
+    this.range = range
+    this.url = url
+  }
+
+  get type () {
+    return 'mpx require external'
+  }
+
+  updateHash (hash, context) {
+    hash.update('' + (+new Date()) + Math.random())
+    super.updateHash(hash, context)
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.url)
+    write(this.range)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.url = read()
+    this.range = read()
+    super.deserialize(context)
+  }
+}
+
+RequireExternalDependency.Template = class RequireExternalDependencyTemplate {
+  apply (dependency, source, { module, chunkGraph, runtimeTemplate }) {
+    const { range } = dependency
+    const compliation = runtimeTemplate.compilation
+    const publicPath = compliation.outputOptions.publicPath
+    const chunks = chunkGraph.getModuleChunks(module)
+    const chunk = chunks[0]
+    const chunkPath = path.dirname(publicPath + chunk.name)
+    const imgPath = publicPath + dependency.url
+    let relativePath = path.relative(chunkPath, imgPath)
+    if (!relativePath.startsWith('.')) {
+      relativePath = './' + relativePath
+    }
+
+    if (!compliation.__mpx__.externalRequestsMap.has(chunk.name)) {
+      compliation.__mpx__.externalRequestsMap.set(chunk.name, new Set())
+    }
+    compliation.__mpx__.externalRequestsMap.get(chunk.name).add(relativePath)
+
+    source.replace(range[0], range[1] - 1, `require(${JSON.stringify(relativePath)})`)
+  }
+}
+
+makeSerializable(RequireExternalDependency, '@mpxjs/webpack-plugin/lib/dependencies/RequireExternalDependency')
+
+module.exports = RequireExternalDependency

package/lib/file-loader.js

@@ -35,8 +35,9 @@ module.exports = function loader (content, prevOptions) {
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
 
-  // todo 未来添加分包处理后相对地址不一定是./开头的，需要考虑通过dependency的方式在sourceModule时通过最终的chunkName得到准确的相对路径
-  if (isRN) publicPath = `__non_webpack_require__(${JSON.stringify(`./${url}`)})`
+  if (isRN) {
+    publicPath = `__mpx_require_external__(${JSON.stringify(url)})`
+  }
 
   if (options.publicPath) {
     if (typeof options.publicPath === 'function') {

package/lib/index.js

@@ -44,9 +44,11 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordLoaderContentDependency = require('./dependencies/RecordLoaderContentDependency')
 const RecordRuntimeInfoDependency = require('./dependencies/RecordRuntimeInfoDependency')
+const RequireExternalDependency = require('./dependencies/RequireExternalDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
+const { transSubpackage } = require('./utils/trans-async-sub-rules')
 const { matchCondition } = require('./utils/match-condition')
 const processDefs = require('./utils/process-defs')
 const config = require('./config')
@@ -72,6 +74,9 @@ const isEmptyObject = require('./utils/is-empty-object')
 const DynamicPlugin = require('./resolver/DynamicPlugin')
 const { isReact, isWeb } = require('./utils/env')
 const VirtualModulesPlugin = require('webpack-virtual-modules')
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
+const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
+const ExternalModule = require('webpack/lib/ExternalModule')
 require('./utils/check-core-version-match')
 
 const isProductionLikeMode = options => {
@@ -138,6 +143,9 @@ class MpxWebpackPlugin {
     if (options.dynamicComponentRules && !options.dynamicRuntime) {
       errors.push('Please make sure you have set dynamicRuntime true in mpx webpack plugin config because you have use the dynamic runtime feature.')
     }
+    if (options.transSubpackageRules && !isReact(options.mode)) {
+      warnings.push('MpxWebpackPlugin transSubpackageRules option only supports "ios", "android", or "harmony" mode')
+    }
     options.externalClasses = options.externalClasses || ['custom-class', 'i-class']
     options.resolveMode = options.resolveMode || 'webpack'
     options.writeMode = options.writeMode || 'changed'
@@ -408,7 +416,7 @@ class MpxWebpackPlugin {
     let splitChunksOptions = null
     let splitChunksPlugin = null
     // 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
-    if (optimization.splitChunks !== false && !isReact(this.options.mode)) {
+    if (optimization.splitChunks !== false) {
       splitChunksOptions = Object.assign({
         chunks: 'all',
         usedExports: optimization.usedExports === true,
@@ -606,6 +614,22 @@ class MpxWebpackPlugin {
           return mpx
         }
       })
+
+      if (isReact(this.options.mode)) {
+        compilation.hooks.runtimeRequirementInTree
+          .for(RuntimeGlobals.loadScript)
+          .tap({
+            stage: -1000,
+            name: 'LoadAsyncChunk'
+          }, (chunk, set) => {
+            compilation.addRuntimeModule(
+              chunk,
+              new LoadAsyncChunkModule(this.options.rnConfig && this.options.rnConfig.asyncChunk && this.options.rnConfig.asyncChunk.timeout)
+            )
+            return true
+          })
+      }
+
       compilation.dependencyFactories.set(ResolveDependency, new NullFactory())
       compilation.dependencyTemplates.set(ResolveDependency, new ResolveDependency.Template())
 
@@ -654,6 +678,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordRuntimeInfoDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordRuntimeInfoDependency, new RecordRuntimeInfoDependency.Template())
 
+      compilation.dependencyFactories.set(RequireExternalDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RequireExternalDependency, new RequireExternalDependency.Template())
+
       compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
     })
 
@@ -701,6 +728,8 @@ class MpxWebpackPlugin {
           assetsModulesMap: new Map(),
           // 记录与asset相关联的ast，用于体积分析和esCheck，避免重复parse
           assetsASTsMap: new Map(),
+          // 记录RequireExternalDependency相关资源路径
+          externalRequestsMap: new Map(),
           globalComponents: {},
           globalComponentsInfo: {},
           // todo es6 map读写性能高于object，之后会逐步替换
@@ -740,7 +769,7 @@ class MpxWebpackPlugin {
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
-          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)),
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || isReact(this.options.mode)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
@@ -756,6 +785,7 @@ class MpxWebpackPlugin {
             })
           },
           asyncSubpackageRules: this.options.asyncSubpackageRules,
+          transSubpackageRules: this.options.transSubpackageRules,
           optimizeRenderRules: this.options.optimizeRenderRules,
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
@@ -1151,6 +1181,11 @@ class MpxWebpackPlugin {
             return rawCallback(null, module)
           }
         }
+
+        if (isReact(mpx.mode) && module instanceof ExternalModule) {
+          module.hasChunkCondition = () => false // 跳过 EnsureChunkConditionsPlugin 的过滤，避免被输出到包含 entry module 的 chunk 当中
+          module.chunkCondition = () => true // 可以正常被 SplitChunkPlugin 处理
+        }
         return rawAddModule.call(compilation, module, callback)
       }
 
@@ -1199,12 +1234,12 @@ class MpxWebpackPlugin {
         // 自动使用分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
           let needInit = false
-          if (isWeb(mpx.mode)) {
+          if (isWeb(mpx.mode) || isReact(mpx.mode)) {
             // web独立处理splitChunk
-            if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
+            if (isWeb(mpx.mode) && !hasOwn(splitChunksOptions.cacheGroups, 'main')) {
               splitChunksOptions.cacheGroups.main = {
                 chunks: 'initial',
-                name: 'bundle',
+                name: 'lib/index', // web 输出 chunk 路径和 rn 输出分包格式拉齐
                 test: /[\\/]node_modules[\\/]/
               }
               needInit = true
@@ -1212,8 +1247,9 @@ class MpxWebpackPlugin {
             if (!hasOwn(splitChunksOptions.cacheGroups, 'async')) {
               splitChunksOptions.cacheGroups.async = {
                 chunks: 'async',
-                name: 'async',
-                minChunks: 2
+                name: 'async-common/index',
+                minChunks: 2,
+                minSize: 1
               }
               needInit = true
             }
@@ -1360,6 +1396,15 @@ class MpxWebpackPlugin {
           }
         })
 
+        parser.hooks.call.for('__mpx_require_external__').tap('MpxWebpackPlugin', (expr) => {
+          const args = expr.arguments.map((i) => i.value)
+          args.unshift(expr.range)
+
+          const dep = new RequireExternalDependency(...args)
+          parser.state.current.addPresentationalDependency(dep)
+          return true
+        })
+
         parser.hooks.call.for('__mpx_dynamic_entry__').tap('MpxWebpackPlugin', (expr) => {
           const args = expr.arguments.map((i) => i.value)
           args.unshift(expr.range)
@@ -1389,10 +1434,11 @@ class MpxWebpackPlugin {
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
               if (mpx.supportRequireAsync) {
-                if (isWeb(mpx.mode)) {
+                if (isWeb(mpx.mode) || isReact(mpx.mode)) {
+                  if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
                   const depBlock = new AsyncDependenciesBlock(
                     {
-                      name: tarRoot
+                      name: tarRoot + '/index'
                     },
                     expr.loc,
                     request

package/lib/json-compiler/index.js

@@ -623,6 +623,7 @@ module.exports = function (content) {
             }
             if (err) return callback(err)
             genericComponents[name] = entry
+            callback()
           })
         }, callback)
       }, callback)

package/lib/parser.js

@@ -14,7 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   output = compiler.parseComponent(content, {
     mode,
     filePath,
-    // pad: 'line', // stylus编译遇到大量空行时会出现栈溢出，故注释掉
+    pad: 'line',
     env
   })
   if (needMap) {

package/lib/platform/json/wx/index.js

@@ -3,7 +3,7 @@ const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
 const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
-const { isOriginTag, isBuildInTag } = require('../../../utils/dom-tag-config')
+const { isOriginTag, isBuildInWebTag, isBuildInReactTag } = require('../../../utils/dom-tag-config')
 
 const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
 const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
@@ -128,19 +128,41 @@ module.exports = function getSpec ({ warn, error }) {
   /**
    * 将小程序代码中使用的与原生 HTML tag 或 内建组件 同名的组件进行转化，以解决与原生tag命名冲突问题。
    */
-  function fixComponentName (type) {
-    return function (input) {
-      const usingComponents = input[type]
-      if (usingComponents) {
-        Object.keys(usingComponents).forEach(tag => {
-          if (isOriginTag(tag) || isBuildInTag(tag)) {
-            usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
-            delete usingComponents[tag]
+  function fixComponentName (input, { mode }) {
+    const isNeedFixTag = (tag) => {
+      switch (mode) {
+        case 'web': return isOriginTag(tag) || isBuildInWebTag(tag)
+        case 'ios':
+        case 'android':
+        case 'harmony': return isOriginTag(tag) || isBuildInReactTag(tag)
+      }
+    }
+
+    const usingComponents = input.usingComponents
+    const componentPlaceholder = input.componentPlaceholder
+    if (usingComponents) {
+      const transfromKeys = []
+      Object.keys(usingComponents).forEach(tag => {
+        if (isNeedFixTag(tag)) {
+          usingComponents[`mpx-com-${tag}`] = usingComponents[tag]
+          delete usingComponents[tag]
+          transfromKeys.push(tag)
+        }
+      })
+
+      if (transfromKeys.length && componentPlaceholder) {
+        Object.keys(componentPlaceholder).forEach(key => {
+          if (transfromKeys.includes(componentPlaceholder[key])) {
+            componentPlaceholder[key] = `mpx-com-${componentPlaceholder[key]}`
+          }
+          if (transfromKeys.includes(key)) {
+            componentPlaceholder[`mpx-com-${key}`] = componentPlaceholder[key]
+            delete componentPlaceholder[key]
           }
         })
       }
-      return input
     }
+    return input
   }
 
   const componentRules = [
@@ -154,13 +176,6 @@ module.exports = function getSpec ({ warn, error }) {
       swan: deletePath(),
       jd: deletePath()
     },
-    {
-      test: 'usingComponents',
-      web: fixComponentName('usingComponents'),
-      ios: fixComponentName('usingComponents'),
-      android: fixComponentName('usingComponents'),
-      harmony: fixComponentName('usingComponents')
-    },
     {
       test: 'usingComponents',
       ali: componentNameCapitalToHyphen('usingComponents'),
@@ -170,7 +185,11 @@ module.exports = function getSpec ({ warn, error }) {
       swan: addGlobalComponents,
       qq: addGlobalComponents,
       tt: addGlobalComponents,
-      jd: addGlobalComponents
+      jd: addGlobalComponents,
+      web: fixComponentName,
+      ios: fixComponentName,
+      android: fixComponentName,
+      harmony: fixComponentName
     }
   ]
 
@@ -371,13 +390,6 @@ module.exports = function getSpec ({ warn, error }) {
         tt: deletePath(),
         jd: deletePath(true)
       },
-      {
-        test: 'usingComponents',
-        web: fixComponentName('usingComponents'),
-        ios: fixComponentName('usingComponents'),
-        android: fixComponentName('usingComponents'),
-        harmony: fixComponentName('usingComponents')
-      },
       {
         test: 'usingComponents',
         ali: componentNameCapitalToHyphen('usingComponents'),
@@ -442,6 +454,12 @@ module.exports = function getSpec ({ warn, error }) {
         swan: getWindowRule(),
         tt: getWindowRule(),
         jd: getWindowRule()
+      },
+      {
+        web: fixComponentName,
+        ios: fixComponentName,
+        android: fixComponentName,
+        harmony: fixComponentName
       }
     ]
   }

package/lib/platform/style/wx/index.js

@@ -285,6 +285,13 @@ module.exports = function getSpec ({ warn, error }) {
 
   // line-height
   const formatLineHeight = ({ prop, value, selector }) => {
+    // line-height 0 直接返回
+    if (+value === 0) {
+      return {
+        prop,
+        value
+      }
+    }
     return verifyValues({ prop, value, selector }) && ({
       prop,
       value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value

package/lib/platform/template/wx/component-config/fix-component-name.js

@@ -1,4 +1,4 @@
-const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
+const { isOriginTag, isBuildInWebTag } = require('../../../../utils/dom-tag-config')
 
 module.exports = function () {
   const handleComponentTag = (el, data) => {
@@ -16,7 +16,7 @@ module.exports = function () {
     waterfall: true,
     skipNormalize: true,
     supportedModes: ['web', 'ios', 'android', 'harmony'],
-    test: (input) => isOriginTag(input) || isBuildInTag(input),
+    test: (input) => isOriginTag(input) || isBuildInWebTag(input),
     web: handleComponentTag,
     ios: handleComponentTag,
     android: handleComponentTag,

package/lib/platform/template/wx/component-config/index.js

@@ -42,6 +42,8 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
+const stickyHeader = require('./sticky-header')
+const stickySection = require('./sticky-section')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -125,6 +127,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print })
+    rootPortal({ print }),
+    stickyHeader({ print }),
+    stickySection({ print })
   ]
 }

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-header'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    }
+  }
+}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-section'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    }
+  }
+}

package/lib/react/LoadAsyncChunkModule.js

@@ -0,0 +1,74 @@
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
+const Template = require('webpack/lib/Template')
+const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
+
+class LoadAsyncChunkRuntimeModule extends HelperRuntimeModule {
+  constructor (timeout) {
+    super('load async chunk')
+    this.timeout = timeout || 5000
+  }
+
+  generate () {
+    const { compilation } = this
+    const { runtimeTemplate } = compilation
+    const loadScriptFn = RuntimeGlobals.loadScript
+    return Template.asString([
+      'var inProgress = {}',
+      `${loadScriptFn} = ${runtimeTemplate.basicFunction(
+        'url, done, key, chunkId',
+        [
+          `var packageName = ${RuntimeGlobals.getChunkScriptFilename}(chunkId) || ''`,
+          'packageName = packageName.split(\'/\').slice(0, -1).join(\'/\')',
+          'var config = {',
+          Template.indent([
+            'url: url,',
+            'package: packageName'
+          ]),
+          '}',
+          'if(inProgress[url]) {',
+          Template.indent([
+            'inProgress[url].push(done)',
+            'return'
+          ]),
+          '}',
+          'inProgress[url] = [done]',
+          'var callback = function (type, result) {',
+          Template.indent([
+            'var event = {',
+            Template.indent([
+              'type: type || \'fail\',',
+              'target: {',
+              Template.indent(['src: url']),
+              '}'
+            ]),
+            '}'
+          ]),
+          Template.indent([
+            'var doneFns = inProgress[url]',
+            'clearTimeout(timeout)',
+            'delete inProgress[url]',
+            `doneFns && doneFns.forEach(${runtimeTemplate.returningFunction(
+              'fn(event)',
+              'fn'
+            )})`
+          ]),
+          '}',
+          `var timeout = setTimeout(callback.bind(null, 'timeout'), ${this.timeout})`,
+          'var loadChunkAsyncFn = global.__mpx.config.rnConfig && global.__mpx.config.rnConfig.loadChunkAsync',
+          'try {',
+          Template.indent([
+            'loadChunkAsyncFn(config).then(callback).catch(callback)'
+          ]),
+          '} catch (e) {',
+          Template.indent([
+            'console.error(\'[Mpx runtime error]: please provide correct mpx.config.rnConfig.loadChunkAsync implemention!\', e)',
+            'Promise.resolve().then(callback)'
+          ]),
+          '}'
+        ]
+      )}`
+    ])
+  }
+}
+
+module.exports = LoadAsyncChunkRuntimeModule

package/lib/react/index.js

@@ -35,6 +35,7 @@ module.exports = function ({
     })
   }
   const mpx = loaderContext.getMpx()
+  const rnConfig = mpx.rnConfig
   // 通过RecordLoaderContentDependency和loaderContentCache确保子request不再重复生成loaderContent
   const cacheContent = mpx.loaderContentCache.get(loaderContext.resourcePath)
   if (cacheContent) return callback(null, cacheContent)
@@ -91,7 +92,8 @@ module.exports = function ({
         genericsInfo: templateRes.genericsInfo,
         wxsModuleMap: templateRes.wxsModuleMap,
         localComponentsMap: jsonRes.localComponentsMap,
-        localPagesMap: jsonRes.localPagesMap
+        localPagesMap: jsonRes.localPagesMap,
+        rnConfig
       }, callback)
     }
   ], (err, scriptRes) => {