@mpxjs/webpack-plugin 2.9.66 → 2.9.69-beta.0

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')
@@ -159,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
@@ -180,6 +179,7 @@ class MpxWebpackPlugin {
       include: () => true
     }
     options.customOutputPath = options.customOutputPath || null
+    options.customComponentModuleId = options.customComponentModuleId || null
     options.nativeConfig = Object.assign({
       cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
     }, options.nativeConfig)
@@ -348,7 +348,19 @@ class MpxWebpackPlugin {
       compiler.options.node.global = true
     }
 
-    const addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
+    const addModeOptions = {
+      fileConditionRules: this.options.fileConditionRules
+    }
+    const mode = this.options.mode
+    if (mode === 'web' || mode === 'ios' || mode === 'android' || mode === 'harmony') {
+      // 'web' | 'ios' | 'android' | 'harmony' 下，使用implicitMode强制进行平台转换
+      addModeOptions.implicitMode = true
+    }
+    if (mode === 'android' || mode === 'harmony') {
+      // 'android' | 'harmony' 下，使用 mode = 'ios' 进行兼容兜底
+      addModeOptions.defaultMode = 'ios'
+    }
+    const addModePlugin = new AddModePlugin('before-file', this.options.mode, addModeOptions, '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)
@@ -673,7 +685,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(),
@@ -686,7 +699,6 @@ 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,
@@ -740,6 +752,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)
@@ -759,7 +780,7 @@ class MpxWebpackPlugin {
             const hash = mpx.pathHash(resourcePath)
             const customOutputPath = this.options.customOutputPath
             if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
-            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext).replace(/^\//, '')
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext, resourcePath).replace(/^\//, '')
             if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
             return path.join(type, name + hash + ext)
           },
@@ -1814,8 +1835,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
   }
 
@@ -157,7 +156,9 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'usingComponents',
-      web: fixComponentName('usingComponents')
+      web: fixComponentName('usingComponents'),
+      ios: fixComponentName('usingComponents'),
+      android: fixComponentName('usingComponents')
     },
     {
       test: 'usingComponents',
@@ -165,8 +166,6 @@ module.exports = function getSpec ({ warn, error }) {
       swan: componentNameCapitalToHyphen('usingComponents')
     },
     {
-      // todo ali 2.0已支持全局组件，待移除
-      ali: addGlobalComponents,
       swan: addGlobalComponents,
       qq: addGlobalComponents,
       tt: addGlobalComponents,
@@ -259,12 +258,21 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'jd', 'qa', 'dd', 'web'],
-    normalizeTest,
-    page: [
-      ...windowRules,
-      ...componentRules
+    supportedModes: [
+      'ali',
+      'swan',
+      'qq',
+      'tt',
+      'jd',
+      'qa',
+      'dd',
+      'web',
+      'ios',
+      'android'
     ],
+
+    normalizeTest,
+    page: [...windowRules, ...componentRules],
     component: componentRules,
     window: windowRules,
     tabBar: {
@@ -300,7 +308,7 @@ module.exports = function getSpec ({ warn, error }) {
           ali (input) {
             const value = input.list
             delete input.list
-            input.items = value.map(item => {
+            input.items = value.map((item) => {
               return runRules(spec.tabBar.list, item, {
                 mode: 'ali',
                 normalizeTest,
@@ -364,7 +372,9 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        web: fixComponentName('usingComponents')
+        web: fixComponentName('usingComponents'),
+        ios: fixComponentName('usingComponents'),
+        android: fixComponentName('usingComponents')
       },
       {
         test: 'usingComponents',
@@ -373,8 +383,6 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'usingComponents',
-        // todo ali 2.0已支持全局组件，待移除
-        ali: fillGlobalComponents,
         qq: fillGlobalComponents,
         swan: fillGlobalComponents,
         tt: fillGlobalComponents,
@@ -382,8 +390,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 }),