@mpxjs/webpack-plugin 2.8.47 → 2.8.49

package/lib/index.js

@@ -170,6 +170,7 @@ class MpxWebpackPlugin {
     options.asyncSubpackageRules = options.asyncSubpackageRules || null
     options.retryRequireAsync = options.retryRequireAsync || false
     options.enableAliRequireAsync = options.enableAliRequireAsync || false
+    options.optimizeSize = options.optimizeSize || false
     this.options = options
     // Hack for buildDependencies
     const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
@@ -294,6 +295,14 @@ class MpxWebpackPlugin {
         warnings.push(`webpack options: MpxWebpackPlugin accept options.output.filename to be ${outputFilename} only, custom options.output.filename will be ignored!`)
       }
       compiler.options.output.filename = compiler.options.output.chunkFilename = outputFilename
+      if (this.options.optimizeSize) {
+        compiler.options.optimization.chunkIds = 'total-size'
+        compiler.options.optimization.moduleIds = 'natural'
+        compiler.options.optimization.mangleExports = 'size'
+        compiler.options.output.globalObject = 'g'
+        // todo chunkLoadingGlobal不具备项目唯一性，在多构建产物混编时可能存在问题，尤其在支付宝使用全局对象传递的情况下
+        compiler.options.output.chunkLoadingGlobal = 'c'
+      }
     }
 
     if (!compiler.options.node || !compiler.options.node.global) {
@@ -387,6 +396,7 @@ class MpxWebpackPlugin {
         const query = parseQuery(obj.query || '?')
         return query.isPage && !query.type
       }
+
       // new PartialCompilePlugin(this.options.partialCompile).apply(compiler)
       compiler.resolverFactory.hooks.resolver.intercept({
         factory: (type, hook) => {
@@ -685,7 +695,15 @@ class MpxWebpackPlugin {
             mpx.extractedFilesCache.set(resource, file)
             return file
           },
-          recordResourceMap: ({ resourcePath, resourceType, outputPath, packageRoot = '', recordOnly, warn, error }) => {
+          recordResourceMap: ({
+            resourcePath,
+            resourceType,
+            outputPath,
+            packageRoot = '',
+            recordOnly,
+            warn,
+            error
+          }) => {
             const packageName = packageRoot || 'main'
             const resourceMap = mpx[`${resourceType}sMap`] || mpx.otherResourcesMap
             const currentResourceMap = resourceMap.main ? resourceMap[packageName] = resourceMap[packageName] || {} : resourceMap
@@ -1297,6 +1315,8 @@ class MpxWebpackPlugin {
           chunkLoadingGlobal
         } = compilation.outputOptions
 
+        const chunkLoadingGlobalStr = JSON.stringify(chunkLoadingGlobal)
+
         function getTargetFile (file) {
           let targetFile = file
           const queryStringIdx = targetFile.indexOf('?')
@@ -1316,7 +1336,7 @@ class MpxWebpackPlugin {
 
           const originalSource = compilation.assets[chunkFile]
           const source = new ConcatSource()
-          source.add(`\nvar ${globalObject} = ${globalObject} || {};\n\n`)
+          source.add(`\nvar ${globalObject} = {};\n`)
 
           relativeChunks.forEach((relativeChunk, index) => {
             const relativeChunkFile = relativeChunk.files.values().next().value
@@ -1333,16 +1353,16 @@ class MpxWebpackPlugin {
                 if (compilation.options.entry[chunk.name]) {
                   // 在rootChunk中挂载jsonpCallback
                   source.add('// process ali subpackages runtime in root chunk\n' +
-                    'var context = (function() { return this })() || Function("return this")();\n\n')
-                  source.add(`context[${JSON.stringify(chunkLoadingGlobal)}] = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
+                    'var context = (function() { return this })() || Function("return this")();\n')
+                  source.add(`context[${chunkLoadingGlobalStr}] = ${globalObject}[${chunkLoadingGlobalStr}] = require("${relativePath}");\n`)
                 } else {
                   // 其余chunk中通过context全局传递runtime
                   source.add('// process ali subpackages runtime in other chunk\n' +
-                    'var context = (function() { return this })() || Function("return this")();\n\n')
-                  source.add(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = context[${JSON.stringify(chunkLoadingGlobal)}];\n`)
+                    'var context = (function() { return this })() || Function("return this")();\n')
+                  source.add(`${globalObject}[${chunkLoadingGlobalStr}] = context[${chunkLoadingGlobalStr}];\n`)
                 }
               } else {
-                source.add(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
+                source.add(`${globalObject}[${chunkLoadingGlobalStr}] = require("${relativePath}");\n`)
               }
             } else {
               source.add(`require("${relativePath}");\n`)
@@ -1350,10 +1370,11 @@ class MpxWebpackPlugin {
           })
 
           if (isRuntime) {
-            source.add('var context = (function() { return this })() || Function("return this")();\n')
-            source.add(`
+            if (mpx.mode === 'ali' || mpx.mode === 'qq') {
+              source.add(`
 // Fix babel runtime in some quirky environment like ali & qq dev.
 try {
+  var context = (function() { return this })() || Function("return this")();
   if(!context.console){
     context.console = console;
     context.setInterval = setInterval;
@@ -1394,8 +1415,9 @@ try {
   }
 } catch(e){
 }\n`)
+            }
             source.add(originalSource)
-            source.add(`\nmodule.exports = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}];\n`)
+            source.add(`\nmodule.exports = ${globalObject}[${chunkLoadingGlobalStr}];\n`)
           } else {
             source.add(originalSource)
           }

package/lib/json-compiler/helper.js

@@ -22,6 +22,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
 
   const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
   const urlToRequest = r => loaderUtils.urlToRequest(r)
+  const isScript = ext => /\.(ts|js)$/.test(ext)
 
   const dynamicEntryMap = new Map()
 
@@ -73,7 +74,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       const resourceName = path.join(parsed.dir, parsed.name)
 
       if (!outputPath) {
-        if (ext === '.js' && resourceName.includes('node_modules') && mode !== 'web') {
+        if (isScript(ext) && resourceName.includes('node_modules') && mode !== 'web') {
           let root = info.descriptionFileRoot
           let name = 'nativeComponent'
           if (info.descriptionFileData) {
@@ -91,7 +92,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = getOutputPath(resourcePath, 'component')
         }
       }
-      if (ext === '.js' && mode !== 'web') {
+      if (isScript(ext) && mode !== 'web') {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
 
@@ -131,7 +132,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
         }
       }
-      if (ext === '.js' && mode !== 'web') {
+      if (isScript(ext) && mode !== 'web') {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
       const entry = getDynamicEntry(resource, 'page', outputPath, tarRoot, publicPath + tarRoot)

package/lib/native-loader.js

@@ -8,7 +8,7 @@ const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
 const { JSON_JS_EXT } = require('./utils/const')
 const getRulesRunner = require('./platform')
-
+// todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
   this.cacheable()
 
@@ -44,6 +44,8 @@ module.exports = function (content) {
     scss: '.scss'
   }
 
+  const TS_EXT = '.ts'
+
   let useJSONJS = false
   let cssLang = ''
   const hasScoped = (queryObj.scoped || autoScope) && mode === 'ali'
@@ -54,7 +56,7 @@ module.exports = function (content) {
     this.resolve(parsed.dir, resourceName + extName, callback)
   }
 
-  function checkCSSLangFiles (callback) {
+  function checkCSSLangFile (callback) {
     const langs = mpx.nativeConfig.cssLangs || ['less', 'stylus', 'scss', 'sass']
     const results = []
     async.eachOf(langs, function (lang, i, callback) {
@@ -89,6 +91,15 @@ module.exports = function (content) {
     })
   }
 
+  function checkTSFile (callback) {
+    checkFileExists(TS_EXT, (err, result) => {
+      if (!err && result) {
+        typeResourceMap.script = result
+      }
+      callback()
+    })
+  }
+
   const emitWarning = (msg) => {
     this.emitWarning(
       new Error('[native-loader][' + this.resource + ']: ' + msg)
@@ -105,15 +116,16 @@ module.exports = function (content) {
   async.waterfall([
     (callback) => {
       async.parallel([
-        checkCSSLangFiles,
-        checkJSONJSFile
+        checkCSSLangFile,
+        checkJSONJSFile,
+        checkTSFile
       ], (err) => {
         callback(err)
       })
     },
     (callback) => {
       async.forEachOf(typeExtMap, (ext, key, callback) => {
-        // 检测到jsonjs或cssLang时跳过对应类型文件检测
+        // 对应资源存在预处理类型文件时跳过对应的标准文件检测
         if (typeResourceMap[key]) {
           return callback()
         }

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

@@ -70,6 +70,19 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
+  // 校验输出支付宝 componentGenerics 配置的正确性
+  function aliComponentGenericsValidate (input) {
+    const componentGenerics = input.componentGenerics
+    if (componentGenerics && typeof componentGenerics === 'object') {
+      Object.keys(componentGenerics).forEach(key => {
+        if (!componentGenerics[key].default) {
+          error(`Ali environment componentGenerics need to specify a default custom component! please check the configuration of component ${key}`)
+        }
+      })
+    }
+    return input
+  }
+
   function fillGlobalComponents (input, { globalComponents }) {
     if (globalComponents) {
       Object.assign(globalComponents, input.usingComponents)
@@ -115,7 +128,7 @@ module.exports = function getSpec ({ warn, error }) {
   const componentRules = [
     {
       test: 'componentGenerics',
-      ali: deletePath(true)
+      ali: aliComponentGenericsValidate
     },
     {
       test: 'componentPlaceholder',

package/lib/runtime/components/web/getInnerListeners.js

@@ -144,20 +144,8 @@ export function inheritEvent (type, oe, detail = {}) {
 }
 
 export function getCustomEvent (type, detail = {}, target = null) {
-  const targetInfo = {}
-  if (target) {
-    const targetEl = target.$el || {}
-    const info = {
-      id: targetEl.id || '',
-      dataset: targetEl.dataset || {},
-      offsetTop: targetEl.offsetTop || 0,
-      offsetLeft: targetEl.offsetLeft || 0
-    }
-    Object.assign(targetInfo, {
-      target: info,
-      currentTarget: info
-    })
-  }
+  const targetEl = (target && target.$el) || null
+  const targetInfo = targetEl ? { target: targetEl, currentTarget: targetEl } : {}
   return {
     type,
     detail,

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="mpx-movable-scroll-content" ref="scrollContent">
-        <div class="mpx-movable-scroll-item">
-            <slot></slot>
-        </div>
+  <div class="mpx-movable-scroll-content" ref="scrollContent">
+    <div class="mpx-movable-scroll-item">
+      <slot></slot>
     </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
-  import {getCustomEvent} from './getInnerListeners'
+  import {getCustomEvent, extendEvent} from './getInnerListeners'
   import BScroll from '@better-scroll/core'
   import Movable from '@better-scroll/movable'
   import Zoom from '@better-scroll/zoom'
@@ -121,6 +121,13 @@
           newVal = 0.5
         }
         this.bs.zoomTo(newVal, 'center', 'center')
+      },
+      disabled (newVal) {
+        if (newVal) {
+          this.bs && this.bs.disable()
+        } else {
+          this.bs && this.bs.enable()
+        }
       }
     },
     mounted () {
@@ -204,6 +211,14 @@
             this.bs.movingDirectionY = -1
           }
         })
+        actionsHandlerHooks.on('start', (e) => {
+          extendEvent(e, { detail: Object.assign({}, e.detail) })
+          this.$emit('touchstart', e)
+        })
+        actionsHandlerHooks.on('end', (e) => {
+          extendEvent(e, { detail: Object.assign({}, e.detail) })
+          this.$emit('touchend', e)
+        })
         actionsHandlerHooks.on('move', ({ deltaX, deltaY, e }) => {
           if (this.isZooming) {
             return
@@ -215,7 +230,9 @@
               this.touchEvent = 'vtouchmove'
             }
           }
-          this.$emit(this.touchEvent, getCustomEvent(this.touchEvent, {}, this))
+          extendEvent(e, { detail: Object.assign({}, e.detail), currentTarget: e.target })
+          this.$emit(this.touchEvent, e)
+          this.$emit('touchmove', e)
           this.isFirstTouch = false
         })
         if (this.inertia) { // movable-view是否带有惯性
@@ -302,7 +319,9 @@
   }
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-    .mpx-movable-scroll-content {
-        position: absolute
-    }
+  .mpx-movable-scroll-content
+    position: absolute
+    .mpx-movable-scroll-item
+      width: 100%
+      height: 100%
 </style>

package/lib/runtime/components/web/mpx-picker-view.vue

@@ -163,7 +163,7 @@
     height: 100%
     overflow: hidden
     text-align: center
-    font-size: 14px
+    font-size: 16px
     position: relative
 
     &.mpx-picker-fade-enter, &.mpx-picker-fade-leave-active

package/lib/runtime/components/web/mpx-scroll-view.vue

@@ -264,10 +264,9 @@
       },
       initLayerComputed () {
         const wrapper = this.$refs.wrapper
-        const wrapperWidth = wrapper.offsetWidth
-        const wrapperHeight = wrapper.offsetHeight
-        this.$refs.innerWrapper.style.width = `${wrapperWidth}px`
-        this.$refs.innerWrapper.style.height = `${wrapperHeight}px`
+        const computedStyle = getComputedStyle(wrapper)
+        this.$refs.innerWrapper.style.width = `${computedStyle.clientWidth -  parseInt(computedStyle.paddingLeft) - parseInt(computedStyle.paddingRight)}px`
+        this.$refs.innerWrapper.style.height = `${computedStyle.clientHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom)}px`
         const innerWrapper = this.$refs.innerWrapper
         const childrenArr = Array.from(innerWrapper.children)
 

package/lib/runtime/components/web/mpx-video.vue

@@ -146,6 +146,11 @@
         classList: ''
       }
     },
+    watch: {
+      muted (val) {
+        this.mutedCopy = val
+      }
+    },
     mounted () {
       this.initStyle()
       this.initEvent()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.47",
+  "version": "2.8.49",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -29,7 +29,6 @@
     "@better-scroll/zoom": "^2.5.1",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
-    "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
     "cssnano": "^5.0.16",
@@ -82,5 +81,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "9069d7f3931841a7e3acaf990464813a3b6ccb0c"
+  "gitHead": "b399e81951df7094fb0a494ae877bcf4e6a2985b"
 }

package/lib/template-compiler/preprocessor.js

@@ -1,29 +0,0 @@
-// loader for pre-processing templates with e.g. pug
-
-const cons = require('consolidate')
-const loaderUtils = require('loader-utils')
-
-module.exports = function (content) {
-  this.cacheable && this.cacheable()
-  const callback = this.async()
-  const opt = loaderUtils.getOptions(this) || {}
-
-  if (!cons[opt.engine]) {
-    return callback(new Error(
-      'Template engine \'' + opt.engine + '\' ' +
-      'isn\'t available in Consolidate.js'
-    ))
-  }
-
-  const templateOption = opt.templateOption
-
-  // for relative includes
-  templateOption.filename = this.resourcePath
-
-  cons[opt.engine].render(content, templateOption, function (err, html) {
-    if (err) {
-      return callback(err)
-    }
-    callback(null, html)
-  })
-}