@mpxjs/webpack-plugin 2.7.0-beta.9 → 2.7.1-beta.2

package/lib/dependencies/AppEntryDependency.js

@@ -16,6 +16,8 @@ class AppEntryDependency extends NullDependency {
     const mpx = compilation.__mpx__
     const moduleGraph = compilation.moduleGraph
 
+    mpx.getEntryNode(module, 'app')
+
     if (mpx.appInfo.name) {
       const issuer = moduleGraph.getIssuer(module)
       const err = new Error(issuer

package/lib/dependencies/CommonJsVariableDependency.js

@@ -1,8 +1,9 @@
 const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
+const InitFragment = require('webpack/lib//InitFragment')
 
 class CommonJsVariableDependency extends ModuleDependency {
-  constructor (request, name) {
+  constructor (request, name = '') {
     super(request)
     this.name = name
   }
@@ -44,10 +45,10 @@ CommonJsVariableDependency.Template = class CommonJsVariableDependencyTemplate e
       runtimeTemplate,
       moduleGraph,
       chunkGraph,
-      runtimeRequirements
+      runtimeRequirements,
+      initFragments
     }
   ) {
-    if (!dep.name) return
     const importedModule = moduleGraph.getModule(dep)
     let requireExpr = runtimeTemplate.moduleExports({
       module: importedModule,
@@ -57,7 +58,18 @@ CommonJsVariableDependency.Template = class CommonJsVariableDependencyTemplate e
       runtimeRequirements
     })
 
-    source.insert(0, `/* mpx cjs variable */ var ${dep.name} = ${requireExpr};\n`)
+    let expr = '/* mpx cjs variable */ '
+    if (dep.name) expr += 'var ' + dep.name + ' = '
+    expr += requireExpr + ';\n'
+
+    initFragments.push(
+      new InitFragment(
+        expr,
+        InitFragment.STAGE_CONSTANTS,
+        1,
+        dep.request
+      )
+    )
   }
 }
 

package/lib/dependencies/DynamicEntryDependency.js

@@ -27,7 +27,7 @@ class DynamicEntryDependency extends NullDependency {
   addEntry (compilation, callback) {
     const mpx = compilation.__mpx__
     const publicPath = compilation.outputOptions.publicPath || ''
-    let { resource, entryType, outputPath, relativePath } = this
+    let { resource, entryType, outputPath, relativePath, originEntryNode } = this
 
     const { packageRoot, outputPath: filename, alreadyOutputed } = mpx.getPackageInfo({
       resource,
@@ -59,7 +59,7 @@ class DynamicEntryDependency extends NullDependency {
       if (entryType === 'export') {
         mpx.exportModules.add(entryModule)
       }
-      // todo entry的父子关系可以在这里建立
+      originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
       return callback(null, {
         resultPath,
         entryModule
@@ -70,6 +70,7 @@ class DynamicEntryDependency extends NullDependency {
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
     const { packageRoot } = this
+    this.originEntryNode = mpx.getEntryNode(module)
     // 分包构建在需要在主包构建完成后在finishMake中处理，返回的资源路径先用key来占位，在合成extractedAssets时再进行最终替换
     if (packageRoot && mpx.currentPackageRoot !== packageRoot) {
       mpx.subpackagesEntriesMap[packageRoot] = mpx.subpackagesEntriesMap[packageRoot] || []

package/lib/dependencies/FlagPluginDependency.js

@@ -9,6 +9,7 @@ class FlagPluginDependency extends NullDependency {
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
     mpx.isPluginMode = true
+    mpx.getEntryNode(module, 'plugin')
     return callback()
   }
 }

package/lib/dependencies/RecordIndependentDependency.js

@@ -0,0 +1,44 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordIndependentDependency extends NullDependency {
+  constructor (root, request) {
+    super()
+    this.root = root
+    this.request = request
+  }
+
+  get type () {
+    return 'mpx record independent'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const { root, request } = this
+    mpx.independentSubpackagesMap[root] = request
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.root)
+    write(this.request)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.root = read()
+    this.request = read()
+    super.deserialize(context)
+  }
+}
+
+RecordIndependentDependency.Template = class RecordIndependentDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RecordIndependentDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordIndependentDependency')
+
+module.exports = RecordIndependentDependency

package/lib/extractor.js

@@ -4,8 +4,8 @@ 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 normalize = require('./utils/normalize')
 const { MPX_DISABLE_EXTRACTOR_CACHE, DEFAULT_RESULT_SOURCE } = require('./utils/const')
-const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 
 module.exports = content => content
 
@@ -37,10 +37,10 @@ module.exports.pitch = async function (remainingRequest) {
   })
 
   let request = remainingRequest
-  // static的情况下需要记录相关静态资源的输出路径
+  // static的情况下需要用record-loader记录相关静态资源的输出路径，不能直接在这里记录，需要确保在子依赖开始构建前完成记录，因为子依赖构建时可能就需要访问当前资源的输出路径
   if (isStatic) {
-    const packageRoot = queryObj.packageRoot || ''
-    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', file, packageRoot))
+    const recordLoader = normalize.lib('record-loader')
+    request = `${recordLoader}!${remainingRequest}`
   }
 
   let content = await this.importModule(`!!${request}`)
@@ -51,6 +51,10 @@ module.exports.pitch = async function (remainingRequest) {
     }).join('\n')
   }
 
+  let resultSource = DEFAULT_RESULT_SOURCE
+
+  if (typeof content !== 'string') return resultSource
+
   const extractedInfo = {
     content,
     index
@@ -61,8 +65,6 @@ module.exports.pitch = async function (remainingRequest) {
     extractedInfo
   })
 
-  let resultSource = DEFAULT_RESULT_SOURCE
-
   const { buildInfo } = this._module
 
   // 如果importModule子模块中包含动态特性，比如动态添加入口和静态资源输出路径，则当前extractor模块不可缓存

package/lib/helpers.js

@@ -4,14 +4,6 @@ const selectorPath = normalize.lib('selector')
 const addQuery = require('./utils/add-query')
 const parseRequest = require('./utils/parse-request')
 
-function getRawRequest ({ resource, loaderIndex, loaders }, excludedPreLoaders = /eslint-loader/) {
-  return loaderUtils.getRemainingRequest({
-    resource: resource,
-    loaderIndex: loaderIndex,
-    loaders: loaders.filter(loader => !excludedPreLoaders.test(loader.path))
-  })
-}
-
 const defaultLang = {
   template: 'wxml',
   styles: 'wxss',
@@ -21,7 +13,7 @@ const defaultLang = {
 }
 
 module.exports = function createHelpers (loaderContext) {
-  const rawRequest = getRawRequest(loaderContext)
+  const rawRequest = loaderUtils.getRemainingRequest(loaderContext)
 
   function getRequire (type, part, extraOptions, index) {
     return 'require(' + getRequestString(type, part, extraOptions, index) + ')'

package/lib/independent-loader.js

@@ -0,0 +1,50 @@
+const parseComponent = require('./parser')
+const createHelpers = require('./helpers')
+const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
+const path = require('path')
+const normalize = require('./utils/normalize')
+
+module.exports = function (content) {
+  this.cacheable()
+  const mpx = this.getMpx()
+  if (!mpx) {
+    return content
+  }
+
+  const mode = mpx.mode
+  const env = mpx.env
+  const i18n = mpx.i18n
+  const filePath = this.resourcePath
+  const extname = path.extname(filePath)
+  if (extname === '.mpx') {
+    const parts = parseComponent(content, {
+      filePath,
+      needMap: this.sourceMap,
+      mode,
+      env
+    })
+    const {
+      getRequire
+    } = createHelpers(this)
+
+    if (parts.script) {
+      content = getRequire('script', parts.script)
+    } else {
+      content = ''
+    }
+  }
+
+  let output = 'global.isIndependent = true\n'
+  // 注入i18n
+  if (i18n) {
+    const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
+    const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
+    const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
+    this._module.addDependency(new CommonJsVariableDependency(i18nWxsRequest))
+  }
+  output += content
+  output += '\n'
+  output += 'delete global.isIndependent\n'
+
+  return output
+}

package/lib/index.js

@@ -26,6 +26,7 @@ const PackageEntryPlugin = require('./resolver/PackageEntryPlugin')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 const RecordGlobalComponentsDependency = require('./dependencies/RecordGlobalComponentsDependency')
+const RecordIndependentDependency = require('./dependencies/RecordIndependentDependency')
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
@@ -77,35 +78,6 @@ const isChunkInPackage = (chunkName, packageName) => {
   return (new RegExp(`^${packageName}\\/`)).test(chunkName)
 }
 
-const getPackageCacheGroup = packageName => {
-  if (packageName === 'main') {
-    return {
-      // 对于独立分包模块不应用该cacheGroup
-      test: (module) => {
-        const { queryObj } = parseRequest(module.resource)
-        return !queryObj.isIndependent
-      },
-      name: 'bundle',
-      minChunks: 2,
-      chunks: 'all'
-    }
-  } else {
-    return {
-      test: (module, { chunkGraph }) => {
-        const chunks = chunkGraph.getModuleChunksIterable(module)
-        return chunks.size && every(chunks, (chunk) => {
-          return isChunkInPackage(chunk.name, packageName)
-        })
-      },
-      name: `${packageName}/bundle`,
-      minChunks: 2,
-      minSize: 1000,
-      priority: 100,
-      chunks: 'all'
-    }
-  }
-}
-
 const externalsMap = {
   weui: /^weui-miniprogram/
 }
@@ -113,20 +85,19 @@ const externalsMap = {
 const warnings = []
 const errors = []
 
-// class EntryNode {
-//   constructor (options) {
-//     this.request = options.request
-//     this.type = options.type
-//     this.module = null
-//     this.parents = new Set()
-//     this.children = new Set()
-//   }
-//
-//   addChild (node) {
-//     this.children.add(node)
-//     node.parents.add(this)
-//   }
-// }
+class EntryNode {
+  constructor (module, type) {
+    this.module = module
+    this.type = type
+    this.parents = new Set()
+    this.children = new Set()
+  }
+
+  addChild (node) {
+    this.children.add(node)
+    node.parents.add(this)
+  }
+}
 
 class MpxWebpackPlugin {
   constructor (options = {}) {
@@ -168,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
@@ -185,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
   }
 
@@ -344,6 +316,7 @@ class MpxWebpackPlugin {
         originalWriteFile(filePath, content, callback)
       }
     }
+
     const defs = this.options.defs
 
     const typeExtMap = config[this.options.mode].typeExtMap
@@ -365,6 +338,42 @@ class MpxWebpackPlugin {
 
     let mpx
 
+    const getPackageCacheGroup = packageName => {
+      if (packageName === 'main') {
+        return {
+          // 对于独立分包模块不应用该cacheGroup
+          test: (module) => {
+            let isIndependent = false
+            if (module.resource) {
+              const { queryObj } = parseRequest(module.resource)
+              isIndependent = !!queryObj.independent
+            } else {
+              const identifier = module.identifier()
+              isIndependent = /\|independent=/.test(identifier)
+            }
+            return !isIndependent
+          },
+          name: 'bundle',
+          minChunks: 2,
+          chunks: 'all'
+        }
+      } else {
+        return {
+          test: (module, { chunkGraph }) => {
+            const chunks = chunkGraph.getModuleChunksIterable(module)
+            return chunks.size && every(chunks, (chunk) => {
+              return isChunkInPackage(chunk.name, packageName)
+            })
+          },
+          name: `${packageName}/bundle`,
+          minChunks: 2,
+          minSize: 1000,
+          priority: 100,
+          chunks: 'all'
+        }
+      }
+    }
+
     const processSubpackagesEntriesMap = (compilation, callback) => {
       const mpx = compilation.__mpx__
       if (mpx && !isEmptyObject(mpx.subpackagesEntriesMap)) {
@@ -439,6 +448,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordGlobalComponentsDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordGlobalComponentsDependency, new RecordGlobalComponentsDependency.Template())
 
+      compilation.dependencyFactories.set(RecordIndependentDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordIndependentDependency, new RecordIndependentDependency.Template())
+
       compilation.dependencyFactories.set(CommonJsVariableDependency, normalModuleFactory)
       compilation.dependencyTemplates.set(CommonJsVariableDependency, new CommonJsVariableDependency.Template())
     })
@@ -473,17 +485,15 @@ class MpxWebpackPlugin {
           subpackagesEntriesMap: {},
           replacePathMap: {},
           exportModules: new Set(),
-          // 记录entry依赖关系，用于体积分析
-          entryNodesMap: {},
           // 记录entryModule与entryNode的对应关系，用于体积分析
-          entryModulesMap: new Map(),
-          extractedMap: {},
+          entryNodeModulesMap: new Map(),
+          // 记录与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,
@@ -496,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,
@@ -520,6 +532,15 @@ class MpxWebpackPlugin {
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
           },
+          getEntryNode: (module, type) => {
+            const entryNodeModulesMap = mpx.entryNodeModulesMap
+            let entryNode = entryNodeModulesMap.get(module)
+            if (!entryNode) {
+              entryNode = new EntryNode(module, type)
+              entryNodeModulesMap.set(module, entryNode)
+            }
+            return entryNode
+          },
           getOutputPath: (resourcePath, type, { ext = '', conflictPath = '' } = {}) => {
             const name = path.parse(resourcePath).name
             const hash = mpx.pathHash(resourcePath)
@@ -569,7 +590,7 @@ class MpxWebpackPlugin {
             const { resourcePath } = parseRequest(resource)
             const currentPackageRoot = mpx.currentPackageRoot
             const currentPackageName = currentPackageRoot || 'main'
-            const isIndependent = mpx.independentSubpackagesMap[currentPackageRoot]
+            const isIndependent = !!mpx.independentSubpackagesMap[currentPackageRoot]
             const resourceMap = mpx[`${resourceType}sMap`] || mpx.otherResourcesMap
 
             if (!resourceMap.main) {
@@ -672,12 +693,14 @@ class MpxWebpackPlugin {
       const rawAddModule = compilation.addModule
       compilation.addModule = (module, callback) => {
         const issuerResource = module.issuerResource
-        // 避免context module报错
-        if (module.request && module.resource) {
+        const currentPackageRoot = mpx.currentPackageRoot
+        const independent = mpx.independentSubpackagesMap[currentPackageRoot]
+
+        if (module.resource) {
+          // NormalModule
           const isStatic = isStaticModule(module)
-          const isIndependent = mpx.independentSubpackagesMap[mpx.currentPackageRoot]
 
-          let needPackageQuery = isStatic || isIndependent
+          let needPackageQuery = isStatic || independent
 
           if (!needPackageQuery) {
             const { resourcePath } = parseRequest(module.resource)
@@ -696,15 +719,24 @@ class MpxWebpackPlugin {
                 compilation.errors.push(e)
               }
             })
-            const queryObj = {}
-            if (packageRoot) queryObj.packageRoot = packageRoot
-            // todo 后续可以考虑用module.layer来隔离独立分包的模块
-            if (isIndependent) queryObj.isIndependent = true
-            module.request = addQuery(module.request, queryObj)
-            module.resource = addQuery(module.resource, queryObj)
+            if (packageRoot) {
+              const queryObj = {
+                packageRoot
+              }
+              if (independent) queryObj.independent = independent
+              module.request = addQuery(module.request, queryObj)
+              module.resource = addQuery(module.resource, queryObj)
+            }
+          }
+        } else if (independent) {
+          // ContextModule和RawModule只在独立分包的情况下添加分包标记，其余默认不添加
+          const postfix = `|independent=${independent}|${currentPackageRoot}`
+          if (module._identifier) {
+            module._identifier += postfix
+          } else if (module.identifierStr) {
+            module.identifierStr += postfix
           }
         }
-
         return rawAddModule.call(compilation, module, callback)
       }
 
@@ -760,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) {
@@ -772,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)
             }
           }
         }
@@ -1000,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) {
@@ -1245,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
@@ -1262,7 +1298,63 @@ try {
           }
         }
       }
-      callback()
+    })
+
+    const clearFileCache = () => {
+      const fs = compiler.intermediateFileSystem
+      const cacheLocation = compiler.options.cache.cacheLocation
+      return new Promise((resolve, reject) => {
+        if (fs.rm) {
+          fs.rm(cacheLocation, {
+            recursive: true,
+            force: true
+          }, (err) => {
+            if (err) return reject(err)
+            resolve()
+          })
+        } else {
+          // polyfill fs.rm
+          const rmdir = (dir, callback) => {
+            fs.readdir(dir, (err, files) => {
+              if (err) return callback(err)
+              async.each(files, (file, callback) => {
+                file = path.join(dir, file)
+                async.waterfall([
+                  (callback) => {
+                    fs.stat(file, callback)
+                  },
+                  (stats, callback) => {
+                    if (stats.isDirectory()) {
+                      rmdir(file, callback)
+                    } else {
+                      fs.unlink(file, callback)
+                    }
+                  }
+                ], callback)
+              }, (err) => {
+                if (err) return callback(err)
+                fs.rmdir(dir, callback)
+              })
+            })
+          }
+
+          rmdir(cacheLocation, (err) => {
+            if (err) return reject(err)
+            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

@@ -12,6 +12,7 @@ const getJSONContent = require('../utils/get-json-content')
 const createHelpers = require('../helpers')
 const createJSONHelper = require('./helper')
 const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
+const RecordIndependentDependency = require('../dependencies/RecordIndependentDependency')
 const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
 const resolve = require('../utils/resolve')
 
@@ -263,13 +264,15 @@ module.exports = function (content) {
             },
             (result, content, callback) => {
               const extName = path.extname(result)
-              if (extName === '.mpx' || extName === '.vue') {
+              if (extName === '.mpx') {
                 const parts = parseComponent(content, {
                   filePath: result,
                   needMap: this.sourceMap,
                   mode,
                   env
                 })
+                // 对于通过.mpx文件声明的独立分包，默认将其自身的script block视为init module
+                if (queryObj.independent === true) queryObj.independent = result
                 getJSONContent(parts.json || {}, this, (err, content) => {
                   callback(err, result, content)
                 })
@@ -346,6 +349,31 @@ module.exports = function (content) {
       return result
     }
 
+    const recordIndependent = (root, request) => {
+      this._module.addPresentationalDependency(new RecordIndependentDependency(root, request))
+    }
+
+    const processIndependent = (otherConfig, context, tarRoot, callback) => {
+      // 支付宝不支持独立分包，无需处理
+      const independent = otherConfig.independent
+      if (!independent || mode === 'ali') {
+        delete otherConfig.independent
+        return callback()
+      }
+      // independent配置为字符串时视为init module
+      if (typeof independent === 'string') {
+        otherConfig.independent = true
+        resolve(context, independent, this, (err, result) => {
+          if (err) return callback(err)
+          recordIndependent(tarRoot, result)
+          callback()
+        })
+      } else {
+        recordIndependent(tarRoot, true)
+        callback()
+      }
+    }
+
     // 为了获取资源的所属子包，该函数需串行执行
     const processSubPackage = (subPackage, context, callback) => {
       if (subPackage) {
@@ -357,26 +385,27 @@ module.exports = function (content) {
         let srcRoot = subPackage.srcRoot || subPackage.root || ''
         if (!tarRoot || subPackagesCfg[tarRoot]) return callback()
 
+        context = path.join(context, srcRoot)
         const otherConfig = getOtherConfig(subPackage)
-        // 支付宝不支持独立分包，无需处理
-        if (otherConfig.independent && mode !== 'ali') {
-          mpx.independentSubpackagesMap[tarRoot] = true
-        }
-
         subPackagesCfg[tarRoot] = {
           root: tarRoot,
-          pages: [],
-          ...otherConfig
+          pages: []
         }
-        context = path.join(context, srcRoot)
         async.parallel([
+          (callback) => {
+            processIndependent(otherConfig, context, tarRoot, callback)
+          },
           (callback) => {
             processPages(subPackage.pages, context, tarRoot, callback)
           },
           (callback) => {
             processPlugins(subPackage.plugins, context, tarRoot, callback)
           }
-        ], callback)
+        ], (err) => {
+          if (err) return callback(err)
+          Object.assign(subPackagesCfg[tarRoot], otherConfig)
+          callback()
+        })
       } else {
         callback()
       }

package/lib/loader.js

@@ -15,6 +15,8 @@ const getJSONContent = require('./utils/get-json-content')
 const normalize = require('./utils/normalize')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
 
 module.exports = function (content) {
@@ -25,7 +27,9 @@ module.exports = function (content) {
     return content
   }
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
+  const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
+  const packageName = packageRoot || 'main'
+  const independent = queryObj.independent
   const pagesMap = mpx.pagesMap
   const componentsMap = mpx.componentsMap[packageName]
   const mode = mpx.mode
@@ -37,16 +41,6 @@ module.exports = function (content) {
   const vueContentCache = mpx.vueContentCache
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
-  // 支持资源query传入isPage或isComponent支持页面/组件单独编译
-  if ((queryObj.isComponent && !componentsMap[resourcePath]) || (queryObj.isPage && !pagesMap[resourcePath])) {
-    const entryName = getEntryName(this)
-    if (queryObj.isComponent) {
-      componentsMap[resourcePath] = entryName || 'noEntryComponent'
-    } else {
-      pagesMap[resourcePath] = entryName || 'noEntryPage'
-    }
-  }
-
   let ctorType = 'app'
   if (pagesMap[resourcePath]) {
     // page
@@ -56,10 +50,17 @@ module.exports = function (content) {
     ctorType = 'component'
   }
 
+  // 支持资源query传入isPage或isComponent支持页面/组件单独编译
+  if (queryObj.isComponent || queryObj.isPage) {
+    const entryName = getEntryName(this) || (queryObj.isComponent ? 'noEntryComponent' : 'noEntryPage')
+    ctorType = queryObj.isComponent ? 'component' : 'page'
+    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
+  }
+
   const loaderContext = this
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-  const filePath = resourcePath
+  const filePath = this.resourcePath
   const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
 
   const parts = parseComponent(content, {
@@ -69,6 +70,10 @@ module.exports = function (content) {
     env
   })
 
+  const {
+    getRequire
+  } = createHelpers(loaderContext)
+
   let output = ''
   const callback = this.async()
 
@@ -208,26 +213,27 @@ module.exports = function (content) {
         this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
       }
 
-      const {
-        getRequire
-      } = createHelpers(loaderContext)
-
       // 注入模块id及资源路径
       output += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
         output += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }
-      // 为app或独立分包页面注入i18n
-      if (i18n && (ctorType === 'app' || (ctorType === 'page' && queryObj.isIndependent))) {
+
+      // 为app注入i18n
+      if (i18n && ctorType === 'app') {
         const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
         const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
         const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
+        this._module.addDependency(new CommonJsVariableDependency(i18nWxsRequest))
+      }
 
-        output += `if (!global.i18n) {
-  global.i18n = ${JSON.stringify({ locale: i18n.locale, version: 0 })}
-  global.i18nMethods = require(${loaderUtils.stringifyRequest(loaderContext, i18nWxsRequest)})
-}\n`
+      // 为独立分包注入init module
+      if (independent && typeof independent === 'string') {
+        const independentLoader = normalize.lib('independent-loader.js')
+        const independentInitRequest = `!!${independentLoader}!${independent}`
+        this._module.addDependency(new CommonJsVariableDependency(independentInitRequest))
       }
+
       // 注入构造函数
       let ctor = 'App'
       if (ctorType === 'page') {
@@ -297,29 +303,17 @@ module.exports = function (content) {
       // script
       output += '/* script */\n'
       let scriptSrcMode = srcMode
-      const script = parts.script
+      // 给予script默认值, 确保生成js request以自动补全js
+      const script = parts.script || {}
       if (script) {
         scriptSrcMode = script.mode || scriptSrcMode
         if (scriptSrcMode) output += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
-        const extraOptions = {}
+        // 传递ctorType以补全js内容
+        const extraOptions = {
+          ctorType
+        }
         if (script.src) extraOptions.resourcePath = resourcePath
         output += getRequire('script', script, extraOptions) + '\n'
-      } else {
-        // todo 依然创建request在selector中进行补全或者将i18n通过CommonJsVariableDependency改造为initFragments的方式进行注入，否则在app.mpx中没有script区块的情况下无法保证i18n注入代码在@mpxjs/core之前执行
-        switch (ctorType) {
-          case 'app':
-            output += 'import {createApp} from "@mpxjs/core"\n' +
-              'createApp({})\n'
-            break
-          case 'page':
-            output += 'import {createPage} from "@mpxjs/core"\n' +
-              'createPage({})\n'
-            break
-          case 'component':
-            output += 'import {createComponent} from "@mpxjs/core"\n' +
-              'createComponent({})\n'
-        }
-        output += '\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]) {

package/lib/record-loader.js

@@ -0,0 +1,11 @@
+const parseRequest = require('./utils/parse-request')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+
+module.exports = function (source) {
+  const mpx = this.getMpx()
+  const { resourcePath, queryObj } = parseRequest(this.resource)
+  const file = mpx.getExtractedFile(this.resource)
+  const packageRoot = queryObj.packageRoot || ''
+  this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', file, packageRoot))
+  return source
+}

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/selector.js

@@ -9,6 +9,7 @@ module.exports = function (content) {
     return content
   }
   const { queryObj } = parseRequest(this.resource)
+  const ctorType = queryObj.ctorType
   const type = queryObj.type
   const index = queryObj.index || 0
   const mode = mpx.mode
@@ -24,6 +25,26 @@ module.exports = function (content) {
   if (Array.isArray(part)) {
     part = part[index]
   }
+  if (!part) {
+    let content = ''
+    // 补全js内容
+    if (type === 'script') {
+      switch (ctorType) {
+        case 'app':
+          content += 'import {createApp} from "@mpxjs/core"\n' +
+            'createApp({})\n'
+          break
+        case 'page':
+          content += 'import {createPage} from "@mpxjs/core"\n' +
+            'createPage({})\n'
+          break
+        case 'component':
+          content += 'import {createComponent} from "@mpxjs/core"\n' +
+            'createComponent({})\n'
+      }
+    }
+    part = { content }
+  }
   part = part || { content: '' }
   this.callback(null, part.content, part.map)
 }

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 })
   }
@@ -38,15 +39,14 @@ module.exports = function (css, map) {
       },
       config.options
     )
-    // ali环境处理host选择器
+    // ali平台下处理scoped和host选择器
     if (mode === 'ali') {
+      if (queryObj.scoped) {
+        plugins.push(scopeId({ id }))
+      }
       plugins.push(transSpecial({ id }))
     }
 
-    if (queryObj.scoped) {
-      plugins.push(scopeId({ id }))
-    }
-
     plugins.push(pluginCondStrip({
       defs
     }))
@@ -68,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/template-compiler/compiler.js

@@ -2039,7 +2039,10 @@ function processElement (el, root, options, meta) {
 
   const pass = isNative || processTemplate(el) || processingTemplate
 
-  processScoped(el, options)
+  // 仅ali平台需要scoped模拟样式隔离
+  if (mode === 'ali') {
+    processScoped(el, options)
+  }
 
   if (transAli) {
     processAliExternalClassesHack(el, options)

package/lib/web/processJSON.js

@@ -132,7 +132,7 @@ module.exports = function (json, {
           },
           (result, content, callback) => {
             const extName = path.extname(result)
-            if (extName === '.mpx' || extName === '.vue') {
+            if (extName === '.mpx') {
               const parts = parseComponent(content, {
                 filePath: result,
                 needMap: loaderContext.sourceMap,

package/lib/web/processScript.js

@@ -113,12 +113,6 @@ module.exports = function (script, {
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)
-  import BScroll from '@better-scroll/core'
-  import PullDown from '@better-scroll/pull-down'
-  import ObserveDOM from '@better-scroll/observe-dom'
-  BScroll.use(ObserveDOM)
-  BScroll.use(PullDown)
-  global.BScroll = BScroll
   global.getApp = function(){}
   global.getCurrentPages = function(){
     if(!global.__mpxRouter) return []
@@ -216,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.0-beta.9",
+  "version": "2.7.1-beta.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -77,5 +77,8 @@
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
   },
-  "gitHead": "368e40835a53b627170f59e8fbe827b457bb2654"
+  "engines": {
+    "node": ">=14.14.0"
+  },
+  "gitHead": "63d16469fdb25698f7d5fb6585300530f0ae5381"
 }