@mpxjs/webpack-plugin 2.8.42 → 2.9.0-beta.1

package/lib/dependencies/DynamicEntryDependency.js

@@ -28,23 +28,10 @@ class DynamicEntryDependency extends NullDependency {
     return toPosix([request, entryType, outputPath, packageRoot, relativePath, context, ...range].join('|'))
   }
 
-  collectDynamicRequest (mpx) {
-    if (!this.packageRoot) return
-    const curValue = mpx.dynamicEntryInfo[this.packageRoot] = mpx.dynamicEntryInfo[this.packageRoot] || {
-      hasPage: false,
-      entries: []
-    }
-    if (this.entryType === 'page') {
-      curValue.hasPage = true
-    } else {
-      curValue.entries.push(this.request)
-    }
-  }
-
   addEntry (compilation, callback) {
     const mpx = compilation.__mpx__
     let { request, entryType, outputPath, relativePath, context, originEntryNode, publicPath, resolver } = this
-    this.collectDynamicRequest(mpx)
+
     async.waterfall([
       (callback) => {
         if (context && resolver) {
@@ -56,12 +43,13 @@ class DynamicEntryDependency extends NullDependency {
         }
       },
       (resource, callback) => {
+        const { resourcePath } = parseRequest(resource)
+
         if (!outputPath) {
-          const { resourcePath } = parseRequest(resource)
           outputPath = mpx.getOutputPath(resourcePath, entryType)
         }
 
-        const { packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
+        const { packageName, packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
           resource,
           outputPath,
           resourceType: entryType,
@@ -116,6 +104,12 @@ class DynamicEntryDependency extends NullDependency {
             .catch(err => callback(err))
 
           mpx.addEntryPromiseMap.set(key, addEntryPromise)
+          mpx.collectDynamicEntryInfo({
+            resource,
+            packageName,
+            filename,
+            entryType
+          })
         }
       }
     ], callback)

package/lib/index.js

@@ -112,7 +112,6 @@ class MpxWebpackPlugin {
   constructor (options = {}) {
     options.mode = options.mode || 'wx'
     options.env = options.env || ''
-
     options.srcMode = options.srcMode || options.mode
     if (options.mode !== options.srcMode && options.srcMode !== 'wx') {
       errors.push('MpxWebpackPlugin supports srcMode to be "wx" only temporarily!')
@@ -481,17 +480,17 @@ class MpxWebpackPlugin {
     }, (compilation, callback) => {
       processSubpackagesEntriesMap(compilation, (err) => {
         if (err) return callback(err)
-        const checkRegisterPack = () => {
-          for (const packRoot in mpx.dynamicEntryInfo) {
-            const entryMap = mpx.dynamicEntryInfo[packRoot]
-            if (!entryMap.hasPage) {
+        const checkDynamicEntryInfo = () => {
+          for (const packageName in mpx.dynamicEntryInfo) {
+            const entryMap = mpx.dynamicEntryInfo[packageName]
+            if (packageName !== 'main' && !entryMap.hasPage) {
               // 引用未注册分包的所有资源
-              const strRequest = entryMap.entries.join(',')
-              compilation.errors.push(new Error(`资源${strRequest}目标是打入${packRoot}分包, 但是app.json中并未声明${packRoot}分包`))
+              const resources = entryMap.entries.map(info => info.resource).join(',')
+              compilation.errors.push(new Error(`资源${resources}通过分包异步声明为${packageName}分包, 但${packageName}分包未注册或不存在相关页面！`))
             }
           }
         }
-        checkRegisterPack()
+        checkDynamicEntryInfo()
         callback()
       })
     })
@@ -548,8 +547,8 @@ class MpxWebpackPlugin {
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
-      compilation.warnings = compilation.warnings.concat(warnings)
-      compilation.errors = compilation.errors.concat(errors)
+      compilation.warnings.push(...warnings)
+      compilation.errors.push(...errors)
       const moduleGraph = compilation.moduleGraph
 
       if (!compilation.__mpx__) {
@@ -578,7 +577,7 @@ class MpxWebpackPlugin {
           subpackagesEntriesMap: {},
           replacePathMap: {},
           exportModules: new Set(),
-          // 动态记录注册的分包与注册页面映射
+          // 记录动态添加入口的分包信息
           dynamicEntryInfo: {},
           // 记录entryModule与entryNode的对应关系，用于体积分析
           entryNodeModulesMap: new Map(),
@@ -622,13 +621,25 @@ class MpxWebpackPlugin {
           forceProxyEventRules: this.options.forceProxyEventRules,
           enableRequireAsync: this.options.mode === 'wx' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
           partialCompile: this.options.partialCompile,
+          collectDynamicEntryInfo: ({ resource, packageName, filename, entryType }) => {
+            const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
+              hasPage: false,
+              entries: []
+            }
+            if (entryType === 'page') curInfo.hasPage = true
+            curInfo.entries.push({
+              entryType,
+              resource,
+              filename
+            })
+          },
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
             }
             return hash(resourcePath)
           },
-          addEntry (request, name, callback) {
+          addEntry: (request, name, callback) => {
             const dep = EntryPlugin.createDependency(request, { name })
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
@@ -788,10 +799,14 @@ class MpxWebpackPlugin {
       const rawProcessModuleDependencies = compilation.processModuleDependencies
       compilation.processModuleDependencies = (module, callback) => {
         const presentationalDependencies = module.presentationalDependencies || []
+        const errors = []
         async.forEach(presentationalDependencies.filter((dep) => dep.mpxAction), (dep, callback) => {
-          dep.mpxAction(module, compilation, callback)
-        }, (err) => {
-          if (err) compilation.errors.push(err)
+          dep.mpxAction(module, compilation, (err) => {
+            if (err) errors.push(err)
+            callback()
+          })
+        }, () => {
+          compilation.errors.push(...errors)
           rawProcessModuleDependencies.call(compilation, module, callback)
         })
       }
@@ -877,16 +892,17 @@ class MpxWebpackPlugin {
       }
 
       // hack process https://github.com/webpack/webpack/issues/16045
-      const _handleModuleBuildAndDependenciesRaw = compilation._handleModuleBuildAndDependencies
-
-      compilation._handleModuleBuildAndDependencies = (originModule, module, recursive, callback) => {
-        const rawCallback = callback
-        callback = (err) => {
-          if (err) return rawCallback(err)
-          return rawCallback(null, module)
-        }
-        return _handleModuleBuildAndDependenciesRaw.call(compilation, originModule, module, recursive, callback)
-      }
+      // no need anymore
+      // const _handleModuleBuildAndDependenciesRaw = compilation._handleModuleBuildAndDependencies
+      //
+      // compilation._handleModuleBuildAndDependencies = (originModule, module, recursive, callback) => {
+      //   const rawCallback = callback
+      //   callback = (err) => {
+      //     if (err) return rawCallback(err)
+      //     return rawCallback(null, module)
+      //   }
+      //   return _handleModuleBuildAndDependenciesRaw.call(compilation, originModule, module, recursive, callback)
+      // }
 
       const rawEmitAsset = compilation.emitAsset
 

package/lib/loader.js

@@ -1,7 +1,6 @@
 const JSON5 = require('json5')
 const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
-const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
 const addQuery = require('./utils/add-query')
@@ -20,6 +19,7 @@ const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDepen
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
 const { MPX_APP_MODULE_ID } = require('./utils/const')
 const path = require('path')
+const processMainScript = require('./web/processMainScript')
 const getRulesRunner = require('./platform')
 
 module.exports = function (content) {
@@ -85,7 +85,6 @@ module.exports = function (content) {
     if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
   }
   const loaderContext = this
-  const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
   const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
@@ -154,23 +153,33 @@ module.exports = function (content) {
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         if (ctorType === 'app' && !queryObj.isApp) {
-          const request = addQuery(this.resource, { isApp: true })
-          const el = mpx.webConfig.el || '#app'
-          output += `
-      import App from ${stringifyRequest(request)}
-      import Vue from 'vue'
-      new Vue({
-        el: '${el}',
-        render: function(h){
-          return h(App)
-        }
-      })\n
-      `
-          // 直接结束loader进入parse
-          this.loaderIndex = -1
-          return callback(null, output)
+          return async.waterfall([
+            (callback) => {
+              processJSON(parts.json, { loaderContext, pagesMap, componentsMap }, callback)
+            },
+            (jsonRes, callback) => {
+              processMainScript(parts.script, {
+                loaderContext,
+                ctorType,
+                srcMode,
+                moduleId,
+                isProduction,
+                jsonConfig: jsonRes.jsonObj,
+                outputPath: queryObj.outputPath || '',
+                localComponentsMap: jsonRes.localComponentsMap,
+                tabBar: jsonRes.jsonObj.tabBar,
+                tabBarMap: jsonRes.tabBarMap,
+                tabBarStr: jsonRes.tabBarStr,
+                localPagesMap: jsonRes.localPagesMap,
+                resource: this.resource
+              }, callback)
+            }
+          ], (err, scriptRes) => {
+            if (err) return callback(err)
+            this.loaderIndex = -1
+            return callback(null, scriptRes.output)
+          })
         }
-
         // 通过RecordVueContentDependency和vueContentCache确保子request不再重复生成vueContent
         const cacheContent = mpx.vueContentCache.get(filePath)
         if (cacheContent) return callback(null, cacheContent)
@@ -226,13 +235,10 @@ module.exports = function (content) {
               componentGenerics,
               jsonConfig: jsonRes.jsonObj,
               outputPath: queryObj.outputPath || '',
-              tabBarMap: jsonRes.tabBarMap,
-              tabBarStr: jsonRes.tabBarStr,
               builtInComponentsMap: templateRes.builtInComponentsMap,
               genericsInfo: templateRes.genericsInfo,
               wxsModuleMap: templateRes.wxsModuleMap,
-              localComponentsMap: jsonRes.localComponentsMap,
-              localPagesMap: jsonRes.localPagesMap
+              localComponentsMap: jsonRes.localComponentsMap
             }, callback)
           }
         ], (err, scriptRes) => {
@@ -242,7 +248,6 @@ module.exports = function (content) {
           callback(null, output)
         })
       }
-
       const moduleGraph = this._compilation.moduleGraph
 
       const issuer = moduleGraph.getIssuer(this._module)

package/lib/parser.js

@@ -2,7 +2,6 @@ const cache = require('lru-cache')(100)
 const hash = require('hash-sum')
 const compiler = require('./template-compiler/compiler')
 const SourceMapGenerator = require('source-map').SourceMapGenerator
-
 const splitRE = /\r?\n/g
 const emptyRE = /^(?:\/\/)?\s*$/
 

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

@@ -1,5 +1,4 @@
-const templateCompiler = require('../../../../template-compiler/compiler')
-const parseMustache = templateCompiler.parseMustache
+const { parseMustache } = require('../../../../template-compiler/compiler')
 const normalize = require('../../../../utils/normalize')
 const TAG_NAME = 'component'
 

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

@@ -3,9 +3,7 @@ const JSON5 = require('json5')
 const getComponentConfigs = require('./component-config')
 const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
-const templateCompiler = require('../../../template-compiler/compiler')
-const parseMustache = templateCompiler.parseMustache
-const stringifyWithResolveComputed = templateCompiler.stringifyWithResolveComputed
+const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
 
 module.exports = function getSpec ({ warn, error }) {
@@ -17,10 +15,10 @@ module.exports = function getSpec ({ warn, error }) {
     postProps: [
       {
         web ({ name, value }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           if (parsed.hasBinding) {
             return {
-              name: name === 'animation' ? 'v-' + name : ':' + name,
+              name: name === 'animation' ? 'v-animation' : ':' + name,
               value: parsed.result
             }
           }
@@ -34,7 +32,7 @@ module.exports = function getSpec ({ warn, error }) {
         test: 'wx:for',
         swan (obj, data) {
           const attrsMap = data.el.attrsMap
-          const parsed = parseMustache(obj.value)
+          const parsed = parseMustacheWithContext(obj.value)
           let listName = parsed.result
           const el = data.el
 
@@ -48,7 +46,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
 
           if (keyName) {
-            const parsed = parseMustache(keyName)
+            const parsed = parseMustacheWithContext(keyName)
             if (parsed.hasBinding) {
               // keyStr = ` trackBy ${parsed.result.slice(1, -1)}`
             } else if (keyName === '*this') {
@@ -78,7 +76,7 @@ module.exports = function getSpec ({ warn, error }) {
           }
         },
         web ({ value }, { el }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           const attrsMap = el.attrsMap
           const itemName = attrsMap['wx:for-item'] || 'item'
           const indexName = attrsMap['wx:for-index'] || 'index'
@@ -190,16 +188,16 @@ module.exports = function getSpec ({ warn, error }) {
           }
           const styleBinding = []
           el.isStyleParsed = true
-          // 不过滤的话每一个属性都要 parse
           el.attrsList.filter(item => this.test.test(item.name)).forEach((item) => {
-            const parsed = parseMustache(item.value)
-            if (item.name === 'wx:style') {
-              styleBinding.push(parsed.result)
-            // item.name === 'style'
-            } else if (parsed.hasBinding || parsed.result.indexOf('rpx') > -1) {
+            const parsed = parseMustacheWithContext(item.value)
+            if (item.name === 'style') {
+              if (parsed.hasBinding || parsed.result.indexOf('rpx') > -1) {
+                styleBinding.push(parsed.result)
+              } else {
+                styleBinding.push(JSON.stringify(item.value))
+              }
+            } else if (item.name === 'wx:style') {
               styleBinding.push(parsed.result)
-            } else {
-              styleBinding.push(JSON.stringify(item.value))
             }
           })
           return {
@@ -212,7 +210,7 @@ module.exports = function getSpec ({ warn, error }) {
         // 样式类名绑定
         test: /^wx:(class)$/,
         web ({ value }) {
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           return {
             name: ':class',
             value: parsed.result
@@ -266,7 +264,7 @@ module.exports = function getSpec ({ warn, error }) {
         },
         web ({ name, value }) {
           let dir = this.test.exec(name)[1]
-          const parsed = parseMustache(value)
+          const parsed = parseMustacheWithContext(value)
           if (dir === 'elif') {
             dir = 'else-if'
           }

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

@@ -1,8 +1,6 @@
 import { isEmptyObject } from '../../utils'
 import { isBrowser } from '../../env'
 
-const isTouchDevice = isBrowser ? document && ('ontouchstart' in document.documentElement) : true
-
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
   // 该函数必须在产生merge前执行
@@ -49,6 +47,7 @@ function mergeListeners (listeners, otherListeners, options = {}) {
 function processTap (listeners, context) {
   const listenerMap = {}
   const tapEvents = ['tap', 'longpress', 'longtap']
+  const isTouchDevice = isBrowser ? document && ('ontouchstart' in document.documentElement) : true
   tapEvents.forEach((eventName) => {
     if (listeners[eventName]) {
       listenerMap[eventName] = true

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

@@ -1,5 +1,6 @@
 <script>
   import getInnerListeners, { getCustomEvent } from './getInnerListeners'
+  import { isBrowser } from '../../env'
 
   export default {
     name: 'mpx-image',
@@ -21,21 +22,23 @@
       }
     },
     beforeCreate () {
-      this.image = new Image()
-      this.image.onload = () => {
-        this.$emit('load', getCustomEvent('load', {
-          width: this.image.width,
-          height: this.image.height
-        }, this))
-      }
-      this.image.onerror = () => {
-        this.$emit('error', getCustomEvent('error', {}, this))
+      if (isBrowser) {
+        this.image = new Image()
+        this.image.onload = () => {
+          this.$emit('load', getCustomEvent('load', {
+            width: this.image.width,
+            height: this.image.height
+          }, this))
+        }
+        this.image.onerror = () => {
+          this.$emit('error', getCustomEvent('error', {}, this))
+        }
       }
     },
     watch: {
       src: {
         handler (src) {
-          if (src) this.image.src = src
+          if (src && this.image) this.image.src = src
         },
         immediate: true
       }