@mpxjs/webpack-plugin 2.10.17 → 2.10.18

package/lib/config.js

@@ -553,6 +553,66 @@ module.exports = {
       show: 'dd:show'
     }
   },
+  ks: {
+    typeExtMap: {
+      json: '.json',
+      script: '.js',
+      template: '.ksml',
+      styles: '.css'
+    },
+    tabBar: {
+      itemKey: 'list',
+      iconKey: 'iconPath',
+      activeIconKey: 'selectedIconPath'
+    },
+    event: {
+      parseEvent (attr) {
+        const match = /^(bind|catch|capture-bind|capture-catch):?(.*?)(?:\.(.*))?$/.exec(attr)
+        if (match) {
+          return {
+            prefix: match[1],
+            eventName: match[2],
+            modifier: match[3]
+          }
+        }
+      },
+      getEvent (eventName, prefix = 'bind') {
+         if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
+      },
+      defaultModelProp: 'value',
+      defaultModelEvent: 'input',
+      defaultModelValuePath: 'value'
+    },
+    wxs: {
+      tag: 'ks',
+      module: 'module',
+      src: 'src',
+      ext: '.ks',
+      templatePrefix: 'module.exports = \n'
+    },
+    directive: {
+      if: 'ks:if',
+      elseif: 'ks:elif',
+      else: 'ks:else',
+      for: 'ks:for',
+      forIndex: 'ks:for-index',
+      forItem: 'ks:for-item',
+      key: 'ks:key',
+      dynamicClass: 'ks:class',
+      dynamicStyle: 'ks:style',
+      ref: 'ks:ref',
+      show: 'ks:show',
+      model: 'ks:model',
+      modelProp: 'ks:model-prop',
+      modelEvent: 'ks:model-event',
+      modelValuePath: 'ks:model-value-path',
+      modelFilter: 'ks:model-filter'
+    }
+  },
   ios: reactConfig,
   android: reactConfig,
   harmony: reactConfig

package/lib/file-loader.js

@@ -8,7 +8,9 @@ module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
   const context = options.context || this.rootContext
   const mpx = this.getMpx()
-  const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
+
+  const { mode } = mpx
+  const isRN = ['ios', 'android', 'harmony'].includes(mode)
 
   let url = loaderUtils.interpolateName(this, options.name, {
     context,
@@ -47,6 +49,7 @@ module.exports = function loader (content, prevOptions) {
         ? options.publicPath
         : `${options.publicPath}/`}${url}`
     }
+
     publicPath = JSON.stringify(publicPath)
   }
 

package/lib/global.d.ts

@@ -0,0 +1,231 @@
+import * as webpack from 'webpack'
+
+declare module 'webpack' {
+  interface Compilation {
+    __mpx__: MpxContext
+  }
+
+  interface Compiler {
+    __mpx__?: boolean
+  }
+}
+
+declare global {
+  type MpxLoaderContext<T> = webpack.LoaderContext<T> & {
+    getMpx(): MpxContext
+  }
+
+  interface MpxContext {
+    /**
+     * 用于使用 webpack-virtual-modules 功能，目前仅在输出 web 时支持使用
+     */
+    __vfs: any | null
+
+    /**
+     * app 信息，便于获取 appName
+     */
+    appInfo: {
+      resourcePath?: string
+      name?: string
+      [key: string]: any
+    }
+
+    /**
+     * pageConfig 信息
+     */
+    pageConfigsMap: Record<string, any>
+
+    /**
+     * pages 全局记录，无需区分主包/分包
+     */
+    pagesMap: Record<string, string>
+
+    /**
+     * 组件资源记录，按所属包进行记录（如 componentsMap.main）
+     */
+    componentsMap: Record<string, Record<string, string>>
+
+    /**
+     * 静态资源（图片、字体、独立样式）等，按所属包进行记录
+     */
+    staticResourcesMap: Record<string, Record<string, string>>
+
+    /**
+     * 用于记录命中 subpackageModulesRules 的 JS 模块分包归属，用于 JS 多分包冗余输出
+     */
+    subpackageModulesMap: Record<string, Record<string, string>>
+
+    /**
+     * 记录其他资源，如 pluginMain、pluginExport，无需区分主包/分包
+     */
+    otherResourcesMap: Record<string, any>
+
+    /**
+     * 记录独立分包
+     */
+    independentSubpackagesMap: Record<string, any>
+
+    subpackagesEntriesMap: Record<string, any>
+    postSubpackageEntriesMap: Record<string, any>
+    replacePathMap: Record<string, string>
+
+    /**
+     * 导出模块集合
+     */
+    exportModules: Set<any>
+
+    /**
+     * 记录动态添加入口的分包信息
+     */
+    dynamicEntryInfo: Record<string, any>
+
+    /**
+     * 记录 entryModule 与 entryNode 的对应关系，用于体积分析
+     */
+    entryNodeModulesMap: Map<any, any>
+
+    /**
+     * 记录与 asset 相关联的 modules，用于体积分析
+     */
+    assetsModulesMap: Map<string, Set<any>>
+
+    /**
+     * 记录与 asset 相关联的 AST，用于体积分析和 esCheck，避免重复 parse
+     */
+    assetsASTsMap: Map<string, any>
+
+    /**
+     * 记录 RequireExternalDependency 相关资源路径
+     */
+    externalRequestsMap: Map<string, any>
+
+    globalComponents: Record<string, any>
+    globalComponentsInfo: Record<string, any>
+
+    /**
+     * todo: es6 Map 读写性能高于 object，之后会逐步替换
+     */
+    wxsAssetsCache: Map<string, any>
+    addEntryPromiseMap: Map<string, Promise<any>>
+    currentPackageRoot: string
+    wxsContentMap: Record<string, string>
+
+    /**
+     * 是否强制使用页面构造函数
+     */
+    forceUsePageCtor: boolean
+
+    resolveMode: string
+    mode: string
+    srcMode: string
+    env: string
+    externalClasses: string[]
+    projectRoot: string
+    autoScopeRules: any
+    autoVirtualHostRules: any
+    customTextRules: any
+    transRpxRules: any
+    postcssInlineConfig: any
+    decodeHTMLText: boolean
+
+    /**
+     * native 文件专用配置
+     */
+    i18n: any | null
+    checkUsingComponentsRules: any
+    forceDisableBuiltInLoader: boolean
+
+    /**
+     * 默认的应用标题
+     */
+    appTitle: string
+
+    attributes: any[]
+    externals: any[]
+    useRelativePath: boolean
+    removedChunks: any[]
+    forceProxyEventRules: any
+
+    /**
+     * 若配置 disableRequireAsync=true，则全平台构建不支持异步分包
+     */
+    supportRequireAsync: boolean
+    partialCompileRules: any
+    asyncSubpackageRules: any[]
+    transSubpackageRules: any
+    optimizeRenderRules: any[]
+
+    addEntryModuleIssuer: (module: string, issuer: string) => void
+
+    /**
+     * 资源路径的哈希函数（用于生成输出唯一名）
+     */
+    pathHash: (resourcePath: string) => string
+
+    // 缓存与工具
+    loaderContentCache: Map<string, any>
+    extractedFilesCache: Map<string, string>
+
+    // 函数接口
+
+    /**
+     * 收集动态入口信息（分包、文件名、是否为页面、是否包含异步等）
+     */
+    collectDynamicEntryInfo: (info: { resource: string; packageName: string; filename: string; entryType: string; hasAsync: boolean }) => void
+
+    /**
+     * 添加入口（包装了 webpack 的 addEntry）
+     */
+    addEntry: (request: string, name: string, callback: (err?: Error, result?: any) => void) => any
+
+    getModuleId: (filePath: string, isApp?: boolean) => string
+    getEntryNode: (module: any, type?: string) => any
+
+    /**
+     * 根据资源路径和类型返回输出路径（支持自定义输出、冲突处理等）
+     */
+    getOutputPath: (resourcePath: string, type: string, opts?: { ext?: string; conflictPath?: string }) => string
+
+    /**
+     * 获取提取后的文件名（支持静态、插件、普通资源）
+     */
+    getExtractedFile: (resource: string, opts?: { error?: (err: Error) => void }) => string
+
+    recordResourceMap: (params: {
+      resourcePath: string
+      resourceType: string
+      outputPath?: string
+      packageRoot?: string
+      recordOnly?: boolean
+      warn?: (e: Error) => void
+      error?: (e: Error) => void
+    }) => { outputPath?: string; alreadyOutputted?: boolean }
+
+    getPackageInfo: (params: {
+      resource: string
+      resourceType: string
+      outputPath?: string
+      issuerResource?: string
+      warn?: (e: Error) => void
+      error?: (e: Error) => void
+    }) => { packageName: string; packageRoot: string; outputPath?: string; alreadyOutputted?: boolean }
+
+    // 运行时信息与注入相关
+    runtimeInfo: Record<string, any>
+    dynamicSlotDependencies: Record<string, any>
+    dynamicTemplateRuleRunner: any
+
+    /**
+     * 依据 package 注入到 mpx-custom-element-*.json 里面的组件路径
+     */
+    getPackageInjectedComponentsMap: (packageName?: string) => Record<string, string>
+
+    getPackageInjectedTemplateConfig: (packageName?: string) => any
+    injectDynamicSlotDependencies: (usingComponents: string, resourcePath: string) => string
+    changeHashNameForAstNode: (templateAst: string, componentsMap: any) => string
+    collectDynamicSlotDependencies: (packageName?: string) => void
+
+    // 其它任意扩展字段
+    [key: string]: any
+  }
+}

package/lib/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+require('./init')
 const path = require('path')
 const { ConcatSource, RawSource } = require('webpack').sources
 const ResolveDependency = require('./dependencies/ResolveDependency')
@@ -58,7 +59,6 @@ const wxssLoaderPath = normalize.lib('wxss/index')
 const wxmlLoaderPath = normalize.lib('wxml/loader')
 const wxsLoaderPath = normalize.lib('wxs/loader')
 const styleCompilerPath = normalize.lib('style-compiler/index')
-const styleStripConditionalPath = normalize.lib('style-compiler/strip-conditional-loader')
 const templateCompilerPath = normalize.lib('template-compiler/index')
 const jsonCompilerPath = normalize.lib('json-compiler/index')
 const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
@@ -79,13 +79,17 @@ const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
 const ExternalModule = require('webpack/lib/ExternalModule')
 const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./dependencies/RetryRuntimeModule')
 const checkVersionCompatibility = require('./utils/check-core-version-match')
-
+const { startFSStripForCss, registerStripCompilation } = require('./style-compiler/strip-conditional')
 checkVersionCompatibility()
 
 const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
 }
 
+/**
+ * @param {import('webpack').NormalModule} module
+ * @returns
+ */
 const isStaticModule = module => {
   if (!module.resource) return false
   const { queryObj } = parseRequest(module.resource)
@@ -322,7 +326,13 @@ class MpxWebpackPlugin {
     }
   }
 
+  /**
+   * @param {import('webpack').Compiler} compiler
+   */
   apply (compiler) {
+    // 注入 fs 代理
+    startFSStripForCss(this.options.defs)
+
     if (!compiler.__mpx__) {
       compiler.__mpx__ = true
     } else {
@@ -706,6 +716,7 @@ class MpxWebpackPlugin {
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
+      registerStripCompilation(compilation)
       compilation.warnings.push(...warnings)
       compilation.errors.push(...errors)
       const moduleGraph = compilation.moduleGraph
@@ -1444,6 +1455,7 @@ class MpxWebpackPlugin {
             const context = parser.state.module.context
             const { queryObj, resourcePath } = parseRequest(request)
             let tarRoot = queryObj.root
+
             if (!tarRoot && mpx.asyncSubpackageRules) {
               for (const item of mpx.asyncSubpackageRules) {
                 if (matchCondition(resourcePath, item)) {
@@ -1452,49 +1464,49 @@ class MpxWebpackPlugin {
                 }
               }
             }
-            if (tarRoot) {
+            // TODO 后续考虑和 asyncSubpackageRules 配置合并
+            if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+
+            if (tarRoot && mpx.supportRequireAsync) {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (mpx.supportRequireAsync) {
-                if (isWeb(mpx.mode) || isReact(mpx.mode)) {
-                  if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
-                  const depBlock = new AsyncDependenciesBlock(
-                    {
-                      name: tarRoot + '/index'
-                    },
-                    expr.loc,
-                    request
-                  )
-                  const dep = new ImportDependency(request, expr.range, undefined, {
-                    isRequireAsync: true,
-                    retryRequireAsync: this.options.retryRequireAsync
-                  })
-                  dep.loc = expr.loc
-                  depBlock.addDependency(dep)
-                  parser.state.current.addBlock(depBlock)
-                } else {
-                  const dep = new DynamicEntryDependency(range, request, 'export', '', tarRoot, '', context, {
-                    isAsync: true,
-                    isRequireAsync: true,
-                    retryRequireAsync: this.options.retryRequireAsync,
-                    requireAsyncRange: expr.range
-                  })
-
-                  parser.state.current.addPresentationalDependency(dep)
-                  // 包含require.async的模块不能被concatenate，避免DynamicEntryDependency中无法获取模块chunk以计算相对路径
-                  parser.state.module.buildInfo.moduleConcatenationBailout = 'require async'
-                }
+              if (isWeb(mpx.mode) || isReact(mpx.mode)) {
+                const depBlock = new AsyncDependenciesBlock(
+                  {
+                    name: tarRoot + '/index'
+                  },
+                  expr.loc,
+                  request
+                )
+                const dep = new ImportDependency(request, expr.range, undefined, {
+                  isRequireAsync: true,
+                  retryRequireAsync: this.options.retryRequireAsync
+                })
+                dep.loc = expr.loc
+                depBlock.addDependency(dep)
+                parser.state.current.addBlock(depBlock)
               } else {
-                const range = expr.range
-                const dep = new CommonJsAsyncDependency(request, range)
-                parser.state.current.addDependency(dep)
+                const dep = new DynamicEntryDependency(range, request, 'export', '', tarRoot, '', context, {
+                  isAsync: true,
+                  isRequireAsync: true,
+                  retryRequireAsync: this.options.retryRequireAsync,
+                  requireAsyncRange: expr.range
+                })
+
+                parser.state.current.addPresentationalDependency(dep)
+                // 包含require.async的模块不能被concatenate，避免DynamicEntryDependency中无法获取模块chunk以计算相对路径
+                parser.state.module.buildInfo.moduleConcatenationBailout = 'require async'
               }
-              if (args) parser.walkExpressions(args)
-              return true
             } else {
-              compilation.errors.push(new Error(`The require async JS [${request}] need to declare subpackage name by root`))
+              const dep = new CommonJsAsyncDependency(request, expr.range)
+              parser.state.current.addDependency(dep)
+              if (!tarRoot) {
+                compilation.warnings.push(new Error(`The require async JS [${request}] need to declare subpackage name by root`))
+              }
             }
+            if (args) parser.walkExpressions(args)
+            return true
           }
         }
 
@@ -1729,7 +1741,14 @@ class MpxWebpackPlugin {
 
           if (isReact(mpx.mode)) {
             // 添加 @refresh reset 注释用于在 React HMR 时刷新组件
-            source.add('/* @refresh reset */\n')
+            if (process.env.NODE_ENV !== 'production') {
+              source.add(`/* @refresh reset */
+if (module.hot) {
+  module.hot.accept(() => {
+    require("react-native").DevSettings.reload();
+  });
+}\n`)
+            }
             // 注入页面的配置，供screen前置设置导航情况
             if (isRuntime) {
               source.add('// inject pageconfigmap for screen\n' +
@@ -1907,42 +1926,9 @@ try {
       normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
         const { queryObj } = parseRequest(createData.request)
         const loaders = createData.loaders
-
-        // 样式 loader 类型检测和条件编译 loader 插入的工具函数
-        const STYLE_LOADER_TYPES = ['stylus-loader', 'sass-loader', 'less-loader', 'css-loader', wxssLoaderPath]
-        const injectStyleStripLoader = (loaders) => {
-          // 检查是否已经存在 stripLoader
-          const hasStripLoader = loaders.some(loader => {
-            const loaderPath = toPosix(loader.loader)
-            return loaderPath.includes('style-compiler/strip-conditional-loader')
-          })
-          if (hasStripLoader) {
-            return
-          }
-          const loaderTypes = new Map(STYLE_LOADER_TYPES.map(type => [`node_modules/${type}`, -1]))
-          loaders.forEach((loader, index) => {
-            const currentLoader = toPosix(loader.loader)
-            for (const [key] of loaderTypes) {
-              if (currentLoader.includes(key)) {
-                loaderTypes.set(key, index)
-                break
-              }
-            }
-          })
-          const targetIndex = STYLE_LOADER_TYPES
-            .map(type => loaderTypes.get(`node_modules/${type}`))
-            .find(index => index !== -1)
-
-          if (targetIndex !== undefined) {
-            loaders.splice(targetIndex + 1, 0, { loader: styleStripConditionalPath })
-          }
-        }
         if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
           const type = queryObj.type
           const extract = queryObj.extract
-          if (type === 'styles') {
-            injectStyleStripLoader(loaders)
-          }
 
           switch (type) {
             case 'styles':
@@ -1995,7 +1981,6 @@ try {
         }
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效
         if (isWeb(mpx.mode) && queryObj.mpxStyleOptions) {
-          injectStyleStripLoader(loaders)
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1

package/lib/init.js

@@ -0,0 +1,3 @@
+const { rewriteFSForCss } = require('./style-compiler/strip-conditional')
+
+rewriteFSForCss()

package/lib/json-compiler/index.js

@@ -472,6 +472,11 @@ module.exports = function (content) {
       }
     }
 
+    const wrapTabBarAsset = (expr) => {
+      if (mode !== 'ks') return expr
+      return `(function(p){return typeof p === "string" && p.charAt(0) === "/" ? p.slice(1) : p})(${expr})`
+    }
+
     const processTabBar = (output) => {
       const tabBarCfg = config[mode].tabBar
       const itemKey = tabBarCfg.itemKey
@@ -480,11 +485,15 @@ module.exports = function (content) {
 
       if (json.tabBar && json.tabBar[itemKey]) {
         json.tabBar[itemKey].forEach((item, index) => {
-          if (item[iconKey] && isUrlRequest(item[iconKey])) {
-            output += `json.tabBar.${itemKey}[${index}].${iconKey} = require("${addQuery(urlToRequest(item[iconKey]), { useLocal: true })}");\n`
+          const iconPath = item[iconKey]
+          if (iconPath && isUrlRequest(iconPath)) {
+            const iconRequire = wrapTabBarAsset(`require("${addQuery(urlToRequest(iconPath), { useLocal: true })}")`)
+            output += `json.tabBar.${itemKey}[${index}].${iconKey} = ${iconRequire};\n`
           }
-          if (item[activeIconKey] && isUrlRequest(item[activeIconKey])) {
-            output += `json.tabBar.${itemKey}[${index}].${activeIconKey} = require("${addQuery(urlToRequest(item[activeIconKey]), { useLocal: true })}");\n`
+          const activeIconPath = item[activeIconKey]
+          if (activeIconPath && isUrlRequest(activeIconPath)) {
+            const activeIconRequire = wrapTabBarAsset(`require("${addQuery(urlToRequest(activeIconPath), { useLocal: true })}")`)
+            output += `json.tabBar.${itemKey}[${index}].${activeIconKey} = ${activeIconRequire};\n`
           }
         })
       }

package/lib/loader.js

@@ -19,6 +19,10 @@ const processWeb = require('./web')
 const processReact = require('./react')
 const genMpxCustomElement = require('./runtime-render/gen-mpx-custom-element')
 
+/**
+ * @this {MpxLoaderContext<any>}
+ * @param {string} content
+ */
 module.exports = function (content) {
   this.cacheable()
 

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

@@ -179,6 +179,7 @@ module.exports = function getSpec ({ warn, error }) {
       swan: addGlobalComponents,
       qq: addGlobalComponents,
       tt: addGlobalComponents,
+      ks: addGlobalComponents,
       jd: addGlobalComponents,
       web: fixComponentName,
       ios: fixComponentName,
@@ -284,6 +285,7 @@ module.exports = function getSpec ({ warn, error }) {
       'swan',
       'qq',
       'tt',
+      'ks',
       'jd',
       'qa',
       'dd',
@@ -401,6 +403,7 @@ module.exports = function getSpec ({ warn, error }) {
         qq: fillGlobalComponents,
         swan: fillGlobalComponents,
         tt: fillGlobalComponents,
+        ks: fillGlobalComponents,
         jd: fillGlobalComponents
       },
       {
@@ -408,6 +411,7 @@ module.exports = function getSpec ({ warn, error }) {
         qq: deletePath({ noLog: true }),
         swan: deletePath({ noLog: true }),
         tt: deletePath({ noLog: true }),
+        ks: deletePath({ noLog: true }),
         jd: deletePath({ noLog: true })
       },
       {
@@ -446,6 +450,7 @@ module.exports = function getSpec ({ warn, error }) {
         qq: getTabBarRule(),
         swan: getTabBarRule(),
         tt: getTabBarRule(),
+        ks: getTabBarRule(),
         jd: getTabBarRule()
       },
       {
@@ -454,6 +459,7 @@ module.exports = function getSpec ({ warn, error }) {
         qq: getWindowRule(),
         swan: getWindowRule(),
         tt: getWindowRule(),
+        ks: getWindowRule(),
         jd: getWindowRule()
       }
     ]