fix: 解决node23版本不兼容+webpack持久缓存修复

README.md

@@ -79,6 +79,18 @@ npm run build
 ```
 
 > RN项目不支持pnpm，请在创建输出到RN项目时指定 mpx create -m npm 来创建项目
+>
+> @achrinza/node-ipc包在engine-strict模式下不兼容node23，可映射到修复包node-ipc-compat@1.0.0，针对不同包管理器(pnpm/npm)在package.json中添加如下对应代码，我们已自动化处理，无需手动添加。
+> ```json
+> "pnpm": {
+>   "overrides": {
+>     "@achrinza/node-ipc": "npm:node-ipc-compat@1.0.0"
+>   }
+> },
+> "overrides": {
+>   "@achrinza/node-ipc": "npm:node-ipc-compat@1.0.0"
+> } 
+> ```
 
 #### build
 

packages/mpx-cli/lib/create.js

@@ -7,8 +7,11 @@ const {
   exit,
   error,
   log,
-  stopSpinner
+  stopSpinner,
+  hasYarn,
+  hasPnpm3OrLater
 } = require('@vue/cli-shared-utils')
+const { loadOptions } = require('@vue/cli/lib/options')
 const Creator = require('@vue/cli/lib/Creator')
 const loadRemotePreset = require('@vue/cli/lib/util/loadRemotePreset')
 const loadLocalPreset = require('@vue/cli/lib/util/loadLocalPreset')
@@ -176,6 +179,35 @@ async function create (projectName, options, preset = null) {
 
   const creator = new Creator(name, targetDir, getPromptModules())
 
+  const packageManager =
+    options.packageManager ||
+    loadOptions().packageManager ||
+    (hasYarn() ? 'yarn' : null) ||
+    (hasPnpm3OrLater() ? 'pnpm' : 'npm')
+
+  // @achrinza/node-ipc与node23不兼容，需要映射到修复包node-ipc-compat@1.0.0
+  creator.on('creation', ({ event }) => {
+    if (event === 'plugins-install' || event === 'deps-install') {
+      try {
+        const pkgPath = path.resolve(targetDir, 'package.json')
+        const pkg = fs.readJsonSync(pkgPath)
+        // 根据包管理器类型写入对应的 overrides 配置，yarn无需处理
+        if (packageManager === 'pnpm') {
+          pkg.pnpm = {
+            overrides: {
+              '@achrinza/node-ipc': 'npm:node-ipc-compat@1.0.0'
+            }
+          }
+        } else if (packageManager === 'npm') {
+          pkg.overrides = {
+            '@achrinza/node-ipc': 'npm:node-ipc-compat@1.0.0'
+          }
+        }
+        fs.writeJsonSync(pkgPath, pkg, { spaces: 2 })
+      } catch (e) {}
+    }
+  })
+
   if (process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG) {
     // 单测下，link bin文件到源码
     const { linkBin } = require('@vue/cli/lib/util/linkBin')

packages/vue-cli-plugin-mpx-ssr/commands/build/index.js

@@ -1,8 +1,7 @@
-const { normalizeCommandArgs } = require('@mpxjs/cli-shared-utils')
+const { normalizeCommandArgs, getCurrentTarget } = require('@mpxjs/cli-shared-utils')
 const { addBaseWebpackConfig } = require('../../config/base.config')
 const { addBuildWebpackConfig } = require('../../config/build.config')
 const { resolveBuildWebpackConfigByTarget } = require('@mpxjs/vue-cli-plugin-mpx/config')
-const { getCurrentTarget } = require('@mpxjs/cli-shared-utils')
 const { handleWebpackDone } = require('@mpxjs/vue-cli-plugin-mpx/utils/webpack')
 const webpack = require('webpack')
 const fs = require('fs-extra')
@@ -42,7 +41,8 @@ module.exports.registerBuildCommand = function (api, options) {
         const { webpackConfig, target } = await getBaseConfig(ssrMode)
         return new Promise((resolve, reject) => {
           webpack(webpackConfig, (err, stats) => {
-            handleWebpackDone(err, stats, target, api)
+            // todo：此处target应该是一个布尔值，判断是否watch, 直接把target和api替换掉有问题嘛，当前只将api换为了options
+            handleWebpackDone(err, stats, target, options)
               .then((...res) => {
                 resolve(...res)
               })

packages/vue-cli-plugin-mpx/commands/build/index.js

@@ -52,7 +52,7 @@ module.exports.registerBuildCommand = function (api, options) {
       await api.runAfterResolveWebpackCallBack(webpackConfig)
       return new Promise((resolve, reject) => {
         webpack(webpackConfig, (err, stats) => {
-          handleWebpackDone(err, stats, args.watch)
+          handleWebpackDone(err, stats, args.watch, options)
             .then((...res) => {
               if (target !== 'web' && !options.disabledDefaultLinkFile) {
                 // web版本不需要symlink

packages/vue-cli-plugin-mpx/commands/serve/mp.js

@@ -14,7 +14,7 @@ module.exports.serveMp = async function serveMp (api, options, args) {
   // 运行webpack
   return new Promise((resolve, reject) => {
     webpack(webpackConfigs).watch({}, (err, stats) => {
-      handleWebpackDone(err, stats, true)
+      handleWebpackDone(err, stats, true, options)
         .then((...res) => {
           if (!options.disabledDefaultLinkFile) {
             symlinkTargetConfig(api, target, webpackConfigs[0])

packages/vue-cli-plugin-mpx/commands/serve/web.js

@@ -273,7 +273,8 @@ module.exports.serveWeb = async (api, options, args) => {
       }
 
       result.push('', extractResultFromStats(stats, {
-        assets: false
+        assets: false,
+        ...(options.pluginOptions?.mpx?.stats || {})
       }))
 
       getReporter()._renderStates([

packages/vue-cli-plugin-mpx/config/base.js

@@ -338,7 +338,7 @@ function addWebWebpackConfig (api, options, config, target) {
     .rule('mpx')
     .test(/\.mpx$/)
     .use('vue-loader')
-    .loader(require.resolve('@vue/vue-loader-v15'))
+    .loader(require('module').Module.createRequire(require.resolve('@vue/cli-service')).resolve('@vue/vue-loader-v15'))
     .end()
     .use('mpx-loader')
     .loader(require.resolve(mpxLoader.loader))
@@ -472,7 +472,7 @@ module.exports.addBaseConfig = function (api, options, config, target) {
 
   config.resolve.modules.add('node_modules')
 
-  const dependenciesConfig = [api.resolve('vue.config.js')]
+  const dependenciesConfig = [api.resolve('mpx.config.js')]
 
   const addDepConfig = (names = []) => {
     names.forEach((name) => {

packages/vue-cli-plugin-mpx/generator/base/template/postcss.config.js

@@ -1,5 +1,11 @@
+const autoprefixer = require('autoprefixer')
+const RN = ['android', 'ios', 'harmony']
+const isRN = RN.includes(
+  process.env.MPX_CURRENT_TARGET_MODE
+)
+// RN环境下去除postcss的autoprefix插件
 module.exports = {
   plugins: [
-    require('autoprefixer')({ remove: false })
-  ]
-}
+    !isRN && autoprefixer({ remove: false })
+  ].filter(Boolean)
+}

packages/vue-cli-plugin-mpx/utils/output.js

@@ -67,7 +67,7 @@ function extractResultFromStats (stats, options = {}) {
     return item
       .toString({
         assets: true,
-        colors: true,
+        colors: !process.env.CI,
         modules: false,
         children: false,
         chunks: false,

packages/vue-cli-plugin-mpx/utils/webpack.js

@@ -1,7 +1,8 @@
 const { getReporter, getLogUpdate } = require('./reporter')
 const { extractResultFromStats } = require('./output')
 
-function handleWebpackDone (err, stats, watch) {
+function handleWebpackDone (err, stats, watch, options = {}) {
+  const statsOptions = options.pluginOptions?.mpx?.stats || {}
   return new Promise((resolve, reject) => {
     if (err) return reject(err)
     const hasErrors = stats.hasErrors()
@@ -19,7 +20,7 @@ function handleWebpackDone (err, stats, watch) {
           color: hasErrors ? 'red' : 'green',
           progress: 100,
           hasErrors: hasErrors,
-          result: extractResultFromStats(v).join('\n')
+          result: extractResultFromStats(v, statsOptions).join('\n')
         }
       }),
       () => {