@mpxjs/webpack-plugin 2.7.1-beta.0 → 2.7.1-beta.4

package/lib/helpers.js

@@ -14,6 +14,7 @@ const defaultLang = {
 
 module.exports = function createHelpers (loaderContext) {
   const rawRequest = loaderUtils.getRemainingRequest(loaderContext)
+  const { resourcePath, queryObj } = parseRequest(loaderContext.resource)
 
   function getRequire (type, part, extraOptions, index) {
     return 'require(' + getRequestString(type, part, extraOptions, index) + ')'
@@ -35,9 +36,9 @@ module.exports = function createHelpers (loaderContext) {
 
   function getFakeRequest (type, part) {
     const lang = part.lang || defaultLang[type] || type
-    const { resourcePath, queryObj } = parseRequest(loaderContext.resource)
-    if (lang === 'json') queryObj.asScript = true
-    return addQuery(`${resourcePath}.${lang}`, queryObj)
+    const options = { ...queryObj }
+    if (lang === 'json') options.asScript = true
+    return addQuery(`${resourcePath}.${lang}`, options)
   }
 
   function getRequestString (type, part, extraOptions = {}, index = 0) {

package/lib/independent-loader.js

@@ -40,16 +40,9 @@ module.exports = function (content) {
     const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
     const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
     const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
-    const i18nMethodsVar = 'i18nMethods'
-    this._module.addDependency(new CommonJsVariableDependency(i18nWxsRequest, i18nMethodsVar))
-
-    output += `if (!global.i18n) {
-  global.i18n = ${JSON.stringify({
-    locale: i18n.locale,
-    version: 0
-  })}
-  global.i18nMethods = ${i18nMethodsVar}
-}\n`
+    this._module.addDependency(new CommonJsVariableDependency(i18nWxsRequest))
+    // 避免该模块被concatenate导致注入的i18n没有最先执行
+    this._module.buildInfo.moduleConcatenationBailout = 'i18n'
   }
   output += content
   output += '\n'

package/lib/index.js

@@ -139,9 +139,6 @@ class MpxWebpackPlugin {
     options.transRpxRules = options.transRpxRules || null
     options.auditResource = options.auditResource || false
     options.decodeHTMLText = options.decodeHTMLText || false
-    options.nativeOptions = Object.assign({
-      cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
-    }, options.nativeOptions)
     options.i18n = options.i18n || null
     options.checkUsingComponents = options.checkUsingComponents || false
     options.reportSize = options.reportSize || null
@@ -156,6 +153,10 @@ class MpxWebpackPlugin {
       include: () => true
     }
     options.customOutputPath = options.customOutputPath || null
+    options.nativeConfig = Object.assign({
+      cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
+    }, options.nativeConfig)
+    options.webConfig = options.webConfig || {}
     this.options = options
   }
 
@@ -315,6 +316,7 @@ class MpxWebpackPlugin {
         originalWriteFile(filePath, content, callback)
       }
     }
+
     const defs = this.options.defs
 
     const typeExtMap = config[this.options.mode].typeExtMap
@@ -485,13 +487,13 @@ class MpxWebpackPlugin {
           exportModules: new Set(),
           // 记录entryModule与entryNode的对应关系，用于体积分析
           entryNodeModulesMap: new Map(),
-          extractedMap: {},
+          // 记录与asset相关联的modules，用于体积分析
+          assetModulesMap: new Map(),
           usingComponents: {},
           // todo es6 map读写性能高于object，之后会逐步替换
           vueContentCache: new Map(),
           currentPackageRoot: '',
           wxsContentMap: {},
-          assetsInfo: new Map(),
           forceUsePageCtor: this.options.forceUsePageCtor,
           resolveMode: this.options.resolveMode,
           mode: this.options.mode,
@@ -504,8 +506,10 @@ class MpxWebpackPlugin {
           transRpxRules: this.options.transRpxRules,
           postcssInlineConfig: this.options.postcssInlineConfig,
           decodeHTMLText: this.options.decodeHTMLText,
-          // native文件专用相关配置
-          nativeOptions: this.options.nativeOptions,
+          // native文件专用配置
+          nativeConfig: this.options.nativeConfig,
+          // 输出web专用配置
+          webConfig: this.options.webConfig,
           tabBarMap: {},
           defs: preProcessDefs(this.options.defs),
           i18n: this.options.i18n,
@@ -788,6 +792,12 @@ class MpxWebpackPlugin {
         return source
       })
 
+      compilation.hooks.moduleAsset.tap('MpxWebpackPlugin', (module, filename) => {
+        const modules = mpx.assetModulesMap.get(filename) || new Set()
+        modules.add(module)
+        mpx.assetModulesMap.set(filename, modules)
+      })
+
       compilation.hooks.beforeModuleAssets.tap('MpxWebpackPlugin', () => {
         const extractedAssetsMap = new Map()
         for (const module of compilation.modules) {
@@ -800,8 +810,7 @@ class MpxWebpackPlugin {
                 extractedAssetsMap.set(filename, extractedAssets)
               }
               extractedAssets.push(extractedInfo)
-              // todo 后续计算体积时可以通过这个钩子关联静态assets和module
-              // compilation.hooks.moduleAsset.call(module, filename)
+              compilation.hooks.moduleAsset.call(module, filename)
             }
           }
         }
@@ -1028,7 +1037,6 @@ class MpxWebpackPlugin {
         }
 
         const processedChunk = new Set()
-        // const rootName = compilation.entries.keys().next().value
         const appName = mpx.appInfo.name
 
         function processChunk (chunk, isRuntime, relativeChunks) {
@@ -1273,7 +1281,7 @@ try {
       })
     })
 
-    compiler.hooks.emit.tapAsync('MpxWebpackPlugin', (compilation, callback) => {
+    compiler.hooks.emit.tap('MpxWebpackPlugin', (compilation) => {
       if (this.options.generateBuildMap) {
         const pagesMap = compilation.__mpx__.pagesMap
         const componentsPackageMap = compilation.__mpx__.componentsMap
@@ -1290,7 +1298,57 @@ try {
           }
         }
       }
-      callback()
+    })
+
+    const clearFileCache = () => {
+      const fs = compiler.intermediateFileSystem
+      const cacheLocation = compiler.options.cache.cacheLocation
+      return new Promise((resolve) => {
+        if (typeof fs.rm === 'function') {
+          fs.rm(cacheLocation, {
+            recursive: true,
+            force: true
+          }, resolve)
+        } else {
+          // polyfill fs.rm
+          const rm = (file, callback) => {
+            async.waterfall([
+              (callback) => {
+                fs.stat(file, callback)
+              },
+              (stats, callback) => {
+                if (stats.isDirectory()) {
+                  const dir = file
+                  fs.readdir(dir, (err, files) => {
+                    if (err) return callback(err)
+                    async.each(files, (file, callback) => {
+                      file = path.join(dir, file)
+                      rm(file, callback)
+                    }, (err) => {
+                      if (err) return callback(err)
+                      fs.rmdir(dir, callback)
+                    })
+                  })
+                } else {
+                  fs.unlink(file, callback)
+                }
+              }
+            ], callback)
+          }
+          rm(cacheLocation, resolve)
+        }
+      })
+    }
+
+    compiler.hooks.done.tapPromise('MpxWebpackPlugin', async () => {
+      const cache = compiler.getCache('MpxWebpackPlugin')
+      const cacheIsValid = await cache.getPromise('cacheIsValid', null)
+      if (!cacheIsValid) {
+        await Promise.all([
+          clearFileCache(),
+          cache.storePromise('cacheIsValid', null, true)
+        ])
+      }
     })
   }
 }

package/lib/json-compiler/index.js

@@ -272,9 +272,7 @@ module.exports = function (content) {
                   env
                 })
                 // 对于通过.mpx文件声明的独立分包，默认将其自身的script block视为init module
-                if (parts.script && queryObj.independent === true) {
-                  queryObj.independent = result
-                }
+                if (queryObj.independent === true) queryObj.independent = result
                 getJSONContent(parts.json || {}, this, (err, content) => {
                   callback(err, result, content)
                 })

package/lib/loader.js

@@ -224,16 +224,9 @@ module.exports = function (content) {
         const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
         const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
         const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
-        const i18nMethodsVar = 'i18nMethods'
-        this._module.addDependency(new CommonJsVariableDependency(i18nWxsRequest, i18nMethodsVar))
-
-        output += `if (!global.i18n) {
-  global.i18n = ${JSON.stringify({
-    locale: i18n.locale,
-    version: 0
-  })}
-  global.i18nMethods = ${i18nMethodsVar}
-}\n`
+        this._module.addDependency(new CommonJsVariableDependency(i18nWxsRequest))
+        // 避免该模块被concatenate导致注入的i18n没有最先执行
+        this._module.buildInfo.moduleConcatenationBailout = 'i18n'
       }
 
       // 为独立分包注入init module
@@ -241,6 +234,8 @@ module.exports = function (content) {
         const independentLoader = normalize.lib('independent-loader.js')
         const independentInitRequest = `!!${independentLoader}!${independent}`
         this._module.addDependency(new CommonJsVariableDependency(independentInitRequest))
+        // 避免该模块被concatenate导致注入的independent init没有最先执行
+        this._module.buildInfo.moduleConcatenationBailout = 'independent init'
       }
 
       // 注入构造函数
@@ -267,6 +262,10 @@ module.exports = function (content) {
 
       if (template) {
         const extraOptions = {
+          ...template.src ? {
+            ...queryObj,
+            resourcePath
+          } : null,
           hasScoped,
           hasComment,
           isNative,
@@ -287,16 +286,16 @@ module.exports = function (content) {
         parts.styles.forEach((style, i) => {
           const scoped = style.scoped || autoScope
           const extraOptions = {
+            // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerFile
+            ...style.src ? {
+              ...queryObj,
+              isStatic: true,
+              issuerFile: mpx.getExtractedFile(addQuery(this.resource, { type: 'styles' }, true))
+            } : null,
             moduleId,
             scoped
           }
           // require style
-          if (style.src) {
-            // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerFile
-            extraOptions.isStatic = true
-            const issuerResource = addQuery(this.resource, { type: 'styles' }, true)
-            extraOptions.issuerFile = mpx.getExtractedFile(issuerResource)
-          }
           output += getRequire('styles', style, extraOptions, i) + '\n'
         })
       } else if (ctorType === 'app' && mode === 'ali') {
@@ -307,7 +306,10 @@ module.exports = function (content) {
       output += '/* json */\n'
       // 给予json默认值, 确保生成json request以自动补全json
       const json = parts.json || {}
-      output += getRequire('json', json, json.src && { resourcePath }) + '\n'
+      output += getRequire('json', json, json.src && {
+        ...queryObj,
+        resourcePath
+      }) + '\n'
 
       // script
       output += '/* script */\n'
@@ -319,9 +321,12 @@ module.exports = function (content) {
         if (scriptSrcMode) output += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
         // 传递ctorType以补全js内容
         const extraOptions = {
+          ...script.src ? {
+            ...queryObj,
+            resourcePath
+          } : null,
           ctorType
         }
-        if (script.src) extraOptions.resourcePath = resourcePath
         output += getRequire('script', script, extraOptions) + '\n'
       }
       callback(null, output)

package/lib/native-loader.js

@@ -55,7 +55,7 @@ module.exports = function (content) {
   }
 
   function checkCSSLangFiles (callback) {
-    const langs = mpx.nativeOptions.cssLangs || ['less', 'stylus', 'scss', 'sass']
+    const langs = mpx.nativeConfig.cssLangs || ['less', 'stylus', 'scss', 'sass']
     const results = []
     async.eachOf(langs, function (lang, i, callback) {
       if (!CSS_LANG_EXT_MAP[lang]) {
@@ -137,9 +137,10 @@ module.exports = function (content) {
       const getRequireByType = (type) => {
         const src = typeResourceMap[type]
         const part = { src }
-        const extraOptions = Object.assign({}, queryObj, {
+        const extraOptions = {
+          ...queryObj,
           resourcePath
-        })
+        }
 
         switch (type) {
           case 'template':

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

@@ -36,7 +36,8 @@
       easingFunction: {
         type: String,
         default: 'default'
-      }
+      },
+      scrollOptions: Object
     },
     data () {
       return {
@@ -90,11 +91,21 @@
         this.goto(val)
       }
     },
+    activated () {
+      if (this.bs && this.autoplay) {
+        this.bs.startPlay()
+      }
+    },
+    deactivated () {
+      if (this.bs && this.autoplay) {
+        this.bs.pausePlay()
+      }
+    },
     beforeCreate () {
       this.itemIds = []
     },
     mounted () {
-      this.bs = new BScroll(this.$refs.wrapper, {
+      const originBsOptions = {
         scrollX: !this.vertical,
         scrollY: this.vertical,
         slide: {
@@ -103,14 +114,17 @@
           speed: this.duration,
           easing: this.easing,
           interval: this.interval,
-          autoplay: this.autoplay
+          autoplay: this.autoplay,
+          startPageXIndex: this.vertical ? 0 : this.current,
+          startPageYIndex: this.vertical? this.current : 0
         },
         momentum: false,
         bounce: false,
         probeType: 3,
         stopPropagation: true
-      })
-
+      }
+      const bsOptions = Object.assign({}, originBsOptions, this.scrollOptions)
+      this.bs = new BScroll(this.$refs.wrapper, bsOptions)
       this.bs.on('slideWillChange', (page) => {
         this.currentIndex = this.vertical ? page.pageY : page.pageX
         this.$emit('change', getCustomEvent('change', {

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

@@ -86,7 +86,7 @@
       }
 
       if (this.maxlength !== -1) {
-        domProps.maxlength = this.maxlength
+        domProps.maxLength = this.maxlength
       }
 
       const data = {

package/lib/runtime/i18n.wxs

@@ -6,7 +6,6 @@ function genRegExp (str, flags) {
   }
 }
 
-
 function likeArray (arr) {
   if (!__mpx_wxs__) {
     return Array.isArray(arr)
@@ -23,7 +22,6 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
-
 var RE_TOKEN_LIST_VALUE = genRegExp('^[0-9]+')
 var RE_TOKEN_NAMED_VALUE = genRegExp('^[A-Za-z0-9_]+')
 
@@ -40,7 +38,10 @@ function parseMessage (format) {
     var char = format[position++]
     if (char === '{') {
       if (text) {
-        tokens.push({ type: 'text', value: text })
+        tokens.push({
+          type: 'text',
+          value: text
+        })
       }
 
       text = ''
@@ -56,7 +57,10 @@ function parseMessage (format) {
         : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)
           ? 'named'
           : 'unknown'
-      tokens.push({ value: sub, type: type })
+      tokens.push({
+        value: sub,
+        type: type
+      })
     } else if (char === '%') {
       // when found rails i18n syntax, skip text capture
       if (format[(position)] !== '{') {
@@ -67,7 +71,10 @@ function parseMessage (format) {
     }
   }
 
-  text && tokens.push({ type: 'text', value: text })
+  text && tokens.push({
+    type: 'text',
+    value: text
+  })
 
   return tokens
 }
@@ -263,6 +270,11 @@ function exist (messages, locale, key) {
 var messages = {}
 var dateTimeFormats = {}
 var numberFormats = {}
+var locale = 'zh-CN'
+
+function getLocale () {
+  return __mpx_locale__ || locale
+}
 
 function getMessages () {
   // __mpx_messages__会在编译时通过lib/wxs/i18n-loader注入
@@ -339,7 +351,15 @@ module.exports = {
 }
 
 if (!__mpx_wxs__) {
-  module.exports.__getMessages = getMessages
-  module.exports.__getDateTimeFormats = getDateTimeFormats
-  module.exports.__getNumberFormats = getNumberFormats
+  if (!global.i18n) {
+    global.i18n = {
+      locale: getLocale(),
+      version: 0
+    }
+    global.i18nMethods = Object.assign(module.exports, {
+      __getMessages: getMessages,
+      __getDateTimeFormats: getDateTimeFormats,
+      __getNumberFormats: getNumberFormats
+    })
+  }
 }

package/lib/style-compiler/index.js

@@ -23,6 +23,7 @@ module.exports = function (css, map) {
   const transRpxRulesRaw = mpx.transRpxRules
   const transRpxRules = transRpxRulesRaw ? (Array.isArray(transRpxRulesRaw) ? transRpxRulesRaw : [transRpxRulesRaw]) : []
 
+  const transRpxFn = mpx.webConfig.transRpxFn
   const testResolveRange = (include = () => true, exclude) => {
     return matchCondition(this.resourcePath, { include, exclude })
   }
@@ -67,7 +68,7 @@ module.exports = function (css, map) {
     }
 
     if (mpx.mode === 'web') {
-      plugins.push(vw)
+      plugins.push(vw({ transRpxFn }))
     }
     // source map
     if (this.sourceMap && !options.map) {

package/lib/style-compiler/plugins/vw.js

@@ -5,12 +5,13 @@ const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
 module.exports = postcss.plugin('vw', (options = {}) => root => {
   const rpx2vwRatio = +(100 / 750).toFixed(8)
 
+  const transRpxFn = options.transRpxFn && typeof options.transRpxFn === 'function' ? options.transRpxFn : function (match, $1) {
+    if ($1 === '0') return $1
+    return `${$1 * rpx2vwRatio}vw`
+  }
   function transVw (declaration) {
     if (rpxRegExp.test(declaration.value)) {
-      declaration.value = declaration.value.replace(rpxRegExpG, function (match, $1) {
-        if ($1 === '0') return $1
-        return `${$1 * rpx2vwRatio}vw`
-      })
+      declaration.value = declaration.value.replace(rpxRegExpG, transRpxFn)
     }
   }
 

package/lib/web/processScript.js

@@ -210,11 +210,11 @@ module.exports = function (script, {
         content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
       }
       // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
-      content += '\n\n\n/** ====== Source start ====== **/\n'
+      content += '\n\n\n/** Source start **/\n'
       content += script.src
         ? `require(${stringifyRequest(script.src)})\n`
         : script.content
-      content += '\n/**   ====== Source end ====== **/\n\n\n'
+      content += '\n/** Source end **/\n\n\n'
       // createApp/Page/Component执行完成后立刻获取当前的option并暂存
       content += `  const currentOption = global.currentOption\n`
       // 获取pageConfig

package/lib/wxs/i18n-loader.js

@@ -3,7 +3,7 @@ const loaderUtils = require('loader-utils')
 
 module.exports = function (content) {
   const i18n = this.getMpx().i18n
-  let prefix = 'var __mpx_messages__, __mpx_datetime_formats__, __mpx_number_formats__\n'
+  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`
@@ -20,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/pre-loader.js

@@ -39,11 +39,16 @@ module.exports = function (content) {
             let results = targetPath.unshiftContainer('body', insertNodes) || []
             targetPath.inserted = true
             results.forEach((item) => {
-              item.stop()
+              item.shouldStopTraverse = true
             })
           }
         }
       },
+      ForStatement (path) {
+        if (path.shouldStopTraverse) {
+          path.stop()
+        }
+      },
       // 处理vant-aliapp中export var bem = bem;这种不被acorn支持的2b语法
       ExportNamedDeclaration (path) {
         if (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.1-beta.0",
+  "version": "2.7.1-beta.4",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -77,5 +77,8 @@
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
   },
-  "gitHead": "025a2d1590aec3f8749c1a43090394249393a625"
+  "engines": {
+    "node": ">=14.14.0"
+  },
+  "gitHead": "bb23a30c136854abc94e9b31a36b0857a00e45d4"
 }