@mpxjs/webpack-plugin 2.9.65 → 2.9.67

package/lib/dependencies/RecordGlobalComponentsDependency.js

@@ -1,11 +1,11 @@
 const NullDependency = require('webpack/lib/dependencies/NullDependency')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
-const addQuery = require('../utils/add-query')
 
 class RecordGlobalComponentsDependency extends NullDependency {
-  constructor (usingComponents, context) {
+  constructor (globalComponents, globalComponentsInfo, context) {
     super()
-    this.usingComponents = usingComponents
+    this.globalComponents = globalComponents
+    this.globalComponentsInfo = globalComponentsInfo
     this.context = context
   }
 
@@ -15,26 +15,25 @@ class RecordGlobalComponentsDependency extends NullDependency {
 
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
-    const { usingComponents, context } = this
-    Object.keys(usingComponents).forEach((key) => {
-      const request = usingComponents[key]
-      mpx.usingComponents[key] = addQuery(request, {
-        context
-      })
-    })
+    const { globalComponents, globalComponentsInfo } = this
+
+    mpx.globalComponents = globalComponents
+    mpx.globalComponentsInfo = globalComponentsInfo
     return callback()
   }
 
   serialize (context) {
     const { write } = context
-    write(this.usingComponents)
+    write(this.globalComponents)
+    write(this.globalComponentsInfo)
     write(this.context)
     super.serialize(context)
   }
 
   deserialize (context) {
     const { read } = context
-    this.usingComponents = read()
+    this.globalComponents = read()
+    this.globalComponentsInfo = read()
     this.context = read()
     super.deserialize(context)
   }

package/lib/dependencies/RecordRuntimeInfoDependency.js

@@ -23,7 +23,7 @@ class RecordRuntimeInfoDependency extends NullDependency {
       template: {},
       json: {},
       style: [],
-      moduleId: '_' + mpx.pathHash(this.resourcePath)
+      moduleId: mpx.getModuleId(this.resourcePath)
     }
 
     const infoConfig = componentInfo[this.blockType]

package/lib/index.js

@@ -63,7 +63,7 @@ const async = require('async')
 const { parseQuery } = require('loader-utils')
 const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
 const emitFile = require('./utils/emit-file')
-const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/const')
+const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE, MPX_APP_MODULE_ID } = require('./utils/const')
 const isEmptyObject = require('./utils/is-empty-object')
 const DynamicPlugin = require('./resolver/DynamicPlugin')
 const { isReact, isWeb } = require('./utils/env')
@@ -139,6 +139,7 @@ class MpxWebpackPlugin {
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
     options.autoVirtualHostRules = options.autoVirtualHostRules || {}
+    options.customTextRules = options.customTextRules || {}
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
       include: () => true
@@ -158,7 +159,6 @@ class MpxWebpackPlugin {
       return externalsMap[external] || external
     })
     options.projectRoot = options.projectRoot || process.cwd()
-    options.projectName = options.projectName || 'AwesomeProject'
     options.forceUsePageCtor = options.forceUsePageCtor || false
     options.postcssInlineConfig = options.postcssInlineConfig || {}
     options.transRpxRules = options.transRpxRules || null
@@ -173,11 +173,13 @@ class MpxWebpackPlugin {
     options.subpackageModulesRules = options.subpackageModulesRules || {}
     options.forceMainPackageRules = options.forceMainPackageRules || {}
     options.forceProxyEventRules = options.forceProxyEventRules || {}
+    options.disableRequireAsync = options.disableRequireAsync || false
     options.miniNpmPackages = options.miniNpmPackages || []
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
     }
     options.customOutputPath = options.customOutputPath || null
+    options.customComponentModuleId = options.customComponentModuleId || null
     options.nativeConfig = Object.assign({
       cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
     }, options.nativeConfig)
@@ -346,7 +348,14 @@ class MpxWebpackPlugin {
       compiler.options.node.global = true
     }
 
-    const addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
+    let addModePlugin
+    if (['android', 'harmony'].includes(this.options.mode)) {
+      // 'android' | 'harmony' 下 使用mode = 'ios' 进行兼容兜底
+      addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file', 'ios')
+    } else {
+      addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
+    }
+
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
     const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
     const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
@@ -671,7 +680,8 @@ class MpxWebpackPlugin {
           assetsModulesMap: new Map(),
           // 记录与asset相关联的ast，用于体积分析和esCheck，避免重复parse
           assetsASTsMap: new Map(),
-          usingComponents: {},
+          globalComponents: {},
+          globalComponentsInfo: {},
           // todo es6 map读写性能高于object，之后会逐步替换
           wxsAssetsCache: new Map(),
           addEntryPromiseMap: new Map(),
@@ -684,9 +694,9 @@ class MpxWebpackPlugin {
           env: this.options.env,
           externalClasses: this.options.externalClasses,
           projectRoot: this.options.projectRoot,
-          projectName: this.options.projectName,
           autoScopeRules: this.options.autoScopeRules,
           autoVirtualHostRules: this.options.autoVirtualHostRules,
+          customTextRules: this.options.customTextRules,
           transRpxRules: this.options.transRpxRules,
           postcssInlineConfig: this.options.postcssInlineConfig,
           decodeHTMLText: this.options.decodeHTMLText,
@@ -708,7 +718,8 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode),
+          // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
@@ -736,6 +747,15 @@ class MpxWebpackPlugin {
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
           },
+          getModuleId: (filePath, isApp = false) => {
+            if (isApp) return MPX_APP_MODULE_ID
+            const customComponentModuleId = this.options.customComponentModuleId
+            if (typeof customComponentModuleId === 'function') {
+              const customModuleId = customComponentModuleId(filePath)
+              if (customModuleId) return customModuleId
+            }
+            return '_' + mpx.pathHash(filePath)
+          },
           getEntryNode: (module, type) => {
             const entryNodeModulesMap = mpx.entryNodeModulesMap
             let entryNode = entryNodeModulesMap.get(module)
@@ -1810,8 +1830,8 @@ try {
           }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
-
-        if (isWeb(mpx.mode)) {
+        // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效
+        if (isWeb(mpx.mode) && queryObj.mpxStyleOptions) {
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1

package/lib/json-compiler/index.js

@@ -10,7 +10,6 @@ const addQuery = require('../utils/add-query')
 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 RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
 const { MPX_DISABLE_EXTRACTOR_CACHE, RESOLVE_IGNORED_ERR, JSON_JS_EXT } = require('../utils/const')
@@ -208,8 +207,8 @@ module.exports = function (content) {
     warn: emitWarning,
     error: emitError,
     data: {
-      // polyfill global usingComponents & record globalComponents
-      globalComponents: mpx.usingComponents
+      // polyfill global usingComponents
+      globalComponents: mpx.globalComponents
     }
   }
   if (!isApp) {
@@ -222,14 +221,6 @@ module.exports = function (content) {
     rulesRunner(json)
   }
 
-  if (isApp) {
-    Object.assign(mpx.usingComponents, json.usingComponents)
-    // 在 rulesRunner 运行后保存全局注册组件
-    // todo 其余地方在使用mpx.usingComponents时存在缓存问题，要规避该问题需要在所有使用mpx.usingComponents的loader中添加app resourcePath作为fileDependency，但对于缓存有效率影响巨大
-    // todo 需要考虑一种精准控制缓存的方式，仅在全局组件发生变更时才使相关使用方的缓存失效，例如按需在相关模块上动态添加request query？
-    this._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, this.context))
-  }
-
   const processComponents = (components, context, callback) => {
     if (components) {
       async.eachOf(components, (component, name, callback) => {

package/lib/loader.js

@@ -1,11 +1,9 @@
-const JSON5 = require('json5')
 const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
 const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
 const addQuery = require('./utils/add-query')
 const async = require('async')
-const getJSONContent = require('./utils/get-json-content')
 const normalize = require('./utils/normalize')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
@@ -13,12 +11,11 @@ const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDep
 const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
-const { MPX_APP_MODULE_ID } = require('./utils/const')
 const { isReact } = require('./utils/env')
+const preProcessJson = require('./utils/pre-process-json')
 const path = require('path')
 const processWeb = require('./web')
 const processReact = require('./react')
-const getRulesRunner = require('./platform')
 const genMpxCustomElement = require('./runtime-render/gen-mpx-custom-element')
 
 module.exports = function (content) {
@@ -89,7 +86,7 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
-  const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : '_' + mpx.pathHash(filePath)
+  const moduleId = mpx.getModuleId(resourcePath, ctorType === 'app')
 
   const parts = parseComponent(content, {
     filePath,
@@ -106,55 +103,36 @@ module.exports = function (content) {
 
   async.waterfall([
     (callback) => {
-      getJSONContent(parts.json || {}, null, loaderContext, (err, content) => {
+      preProcessJson({
+        json: parts.json || {},
+        srcMode,
+        emitWarning,
+        emitError,
+        ctorType,
+        resourcePath,
+        loaderContext
+      }, (err, jsonInfo) => {
         if (err) return callback(err)
-        if (parts.json) parts.json.content = content
-        callback()
+        callback(null, jsonInfo)
       })
     },
-    (callback) => {
+    (jsonInfo, callback) => {
+      const {
+        componentPlaceholder,
+        componentGenerics,
+        usingComponentsInfo,
+        jsonContent
+      } = jsonInfo
       const hasScoped = parts.styles.some(({ scoped }) => scoped) || autoScope
       const templateAttrs = parts.template && parts.template.attrs
       const hasComment = templateAttrs && templateAttrs.comments
       const isNative = false
 
-      let usingComponents = [].concat(Object.keys(mpx.usingComponents))
-      let componentPlaceholder = []
-      let componentGenerics = {}
-
-      if (parts.json && parts.json.content) {
-        const rulesRunnerOptions = {
-          mode,
-          srcMode,
-          type: 'json',
-          waterfall: true,
-          warn: emitWarning,
-          error: emitError
-        }
-        if (ctorType !== 'app') {
-          rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-        }
-        const rulesRunner = getRulesRunner(rulesRunnerOptions)
-        try {
-          const ret = JSON5.parse(parts.json.content)
-          if (rulesRunner) rulesRunner(ret)
-          if (ret.usingComponents) {
-            usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
-          }
-          if (ret.componentPlaceholder) {
-            componentPlaceholder = componentPlaceholder.concat(Object.values(ret.componentPlaceholder))
-          }
-          if (ret.componentGenerics) {
-            componentGenerics = Object.assign({}, ret.componentGenerics)
-          }
-        } catch (e) {
-          return callback(e)
-        }
-      }
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         return processWeb({
           parts,
+          jsonContent,
           loaderContext,
           pagesMap,
           componentsMap,
@@ -166,7 +144,7 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          usingComponents,
+          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
           componentGenerics,
           autoScope,
           callback
@@ -176,6 +154,7 @@ module.exports = function (content) {
       if (isReact(mode)) {
         return processReact({
           parts,
+          jsonContent,
           loaderContext,
           pagesMap,
           componentsMap,
@@ -187,7 +166,7 @@ module.exports = function (content) {
           hasScoped,
           hasComment,
           isNative,
-          usingComponents,
+          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
           componentGenerics,
           autoScope,
           callback
@@ -255,7 +234,7 @@ module.exports = function (content) {
           isNative,
           ctorType,
           moduleId,
-          usingComponents,
+          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
           componentPlaceholder
           // 添加babel处理渲染函数中可能包含的...展开运算符
           // 由于...运算符应用范围极小以及babel成本极高，先关闭此特性后续看情况打开

package/lib/native-loader.js

@@ -1,16 +1,14 @@
 const path = require('path')
-const JSON5 = require('json5')
 const parseRequest = require('./utils/parse-request')
 const config = require('./config')
 const createHelpers = require('./helpers')
-const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
 const { matchCondition } = require('./utils/match-condition')
-const { JSON_JS_EXT, MPX_APP_MODULE_ID } = require('./utils/const')
-const getRulesRunner = require('./platform')
+const { JSON_JS_EXT } = require('./utils/const')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const preProcessJson = require('./utils/pre-process-json')
 
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
@@ -25,6 +23,7 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
+  const moduleId = mpx.getModuleId(filePath)
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const mode = mpx.mode
@@ -114,7 +113,29 @@ module.exports = function (content) {
       new Error('[native-loader][' + this.resource + ']: ' + msg)
     )
   }
+  let ctorType = pagesMap[resourcePath]
+    ? 'page'
+    : componentsMap[resourcePath]
+      ? 'component'
+      : 'app'
+  // 处理构造器类型
+  const ctor = ctorType === 'page'
+    ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
+    : ctorType === 'component'
+      ? 'Component'
+      : 'App'
+
+  // 支持资源query传入isPage或isComponent支持页面/组件单独编译
+  if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
+    const entryName = getEntryName(this) || mpx.getOutputPath(resourcePath, queryObj.isComponent ? 'component' : 'page')
+    ctorType = queryObj.isComponent ? 'component' : 'page'
+    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
+  }
 
+  if (ctorType === 'app') {
+    const appName = getEntryName(this)
+    if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+  }
   // 先读取json获取usingComponents信息
   async.waterfall([
     (callback) => {
@@ -141,66 +162,29 @@ module.exports = function (content) {
       }, callback)
     },
     (callback) => {
-      getJSONContent({
-        src: typeResourceMap.json,
-        useJSONJS
-      }, null, this, callback)
-    }, (content, callback) => {
-      let componentPlaceholder = []
-      let json
-      try {
-        json = JSON5.parse(content)
-      } catch (e) {
-        return callback(e)
-      }
-      let usingComponents = Object.keys(mpx.usingComponents)
-      const rulesRunnerOptions = {
-        mode,
+      preProcessJson({
+        json: {
+          src: typeResourceMap.json,
+          useJSONJS
+        },
         srcMode,
-        type: 'json',
-        waterfall: true,
-        warn: emitWarning,
-        error: emitError
-      }
-
-      let ctorType = pagesMap[resourcePath]
-        ? 'page'
-        : componentsMap[resourcePath]
-          ? 'component'
-          : 'app'
-
-      // 支持资源query传入isPage或isComponent支持页面/组件单独编译
-      if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
-        const entryName = getEntryName(this) || mpx.getOutputPath(resourcePath, queryObj.isComponent ? 'component' : 'page')
-        ctorType = queryObj.isComponent ? 'component' : 'page'
-        this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
-      }
-
-      // 处理构造器类型
-      const ctor = ctorType === 'page'
-        ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
-        : ctorType === 'component'
-          ? 'Component'
-          : 'App'
-
-      if (ctorType === 'app') {
-        const appName = getEntryName(this)
-        if (appName) this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
-      }
-
-      const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : '_' + mpx.pathHash(filePath)
+        emitWarning,
+        emitError,
+        ctorType,
+        resourcePath,
+        loaderContext
+      }, (err, jsonInfo) => {
+        if (err) return callback(err)
+        callback(null, jsonInfo)
+      })
+    },
+    (jsonInfo, callback) => {
+      const {
+        componentPlaceholder,
+        componentGenerics,
+        usingComponentsInfo
+      } = jsonInfo
 
-      if (ctorType !== 'app') {
-        rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
-      }
-      const rulesRunner = getRulesRunner(rulesRunnerOptions)
-      if (rulesRunner) rulesRunner(json)
-      if (json.usingComponents) {
-        usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
-      }
-      if (json.componentPlaceholder) {
-        componentPlaceholder = componentPlaceholder.concat(Object.values(json.componentPlaceholder))
-      }
       const {
         getRequire
       } = createHelpers(loaderContext)
@@ -222,8 +206,9 @@ module.exports = function (content) {
               isNative,
               ctorType,
               moduleId,
-              usingComponents,
-              componentPlaceholder
+              componentGenerics,
+              componentPlaceholder,
+              usingComponentsInfo: JSON.stringify(usingComponentsInfo)
             })
             break
           case 'styles':

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

@@ -84,10 +84,9 @@ module.exports = function getSpec ({ warn, error }) {
     return input
   }
 
-  function fillGlobalComponents (input, { globalComponents }) {
-    if (globalComponents) {
-      Object.assign(globalComponents, input.usingComponents)
-    }
+  function fillGlobalComponents (input, { globalComponents }, meta) {
+    // 通过meta进行globalComponents的透传
+    meta.usingComponents = input.usingComponents
     return input
   }
 
@@ -165,8 +164,6 @@ module.exports = function getSpec ({ warn, error }) {
       swan: componentNameCapitalToHyphen('usingComponents')
     },
     {
-      // todo ali 2.0已支持全局组件，待移除
-      ali: addGlobalComponents,
       swan: addGlobalComponents,
       qq: addGlobalComponents,
       tt: addGlobalComponents,
@@ -373,8 +370,6 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        // todo ali 2.0已支持全局组件，待移除
-        ali: fillGlobalComponents,
         qq: fillGlobalComponents,
         swan: fillGlobalComponents,
         tt: fillGlobalComponents,
@@ -382,8 +377,6 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        // todo ali 2.0已支持全局组件，待移除
-        ali: deletePath({ noLog: true }),
         qq: deletePath({ noLog: true }),
         swan: deletePath({ noLog: true }),
         tt: deletePath({ noLog: true }),