feat: 支持异步注入配置 (#97)

mpx-ecology · Dec 17, 2024 · 38787be · 38787be
1 parent 0a16328
commit 38787be
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/packages/mpx-cli-service/lib/Service.js b/packages/mpx-cli-service/lib/Service.js
@@ -1,9 +1,33 @@
 const Service = require('@vue/cli-service')
-
 const { getServerBundle } = require('@mpxjs/cli-shared-utils')
+const Config = require('webpack-chain')
+const PluginAPI = require('@vue/cli-service/lib/PluginAPI')
 
 process.env.CI = 't'
 
+Service.prototype.resolveChainableWebpackConfig = function () {
+  const chainableConfig = new Config()
+  // apply chains
+  this.webpackChainFns.forEach(fn => {
+    const res = fn(chainableConfig)
+    if (res instanceof Promise) {
+      this.webpackChainPromises = this.webpackChainPromises || []
+      this.webpackChainPromises.push(res)
+    }
+  })
+  return chainableConfig
+}
+
+const originResolveWebpackConfig = PluginAPI.prototype.resolveWebpackConfig
+PluginAPI.prototype.resolveWebpackConfig = async function (chainableConfig) {
+  chainableConfig = chainableConfig || this.resolveChainableWebpackConfig()
+  if (this.service.webpackChainPromises) {
+    await Promise.all(this.service.webpackChainPromises)
+  }
+  const res = originResolveWebpackConfig.call(this, chainableConfig)
+  return res
+}
+
 module.exports = Service
 
 module.exports.getServerBundle = getServerBundle
diff --git a/packages/vue-cli-plugin-mpx/commands/build/index.js b/packages/vue-cli-plugin-mpx/commands/build/index.js
@@ -31,7 +31,7 @@ module.exports.registerBuildCommand = function (api, options) {
         '--env': 'custom define __mpx_env__'
       }
     },
-    function build (args, rawArgv) {
+    async function build (args, rawArgv) {
       normalizeCommandArgs(args, defaults)
       if (args.clean) {
         fs.removeSync(options.outputDir)
@@ -42,7 +42,7 @@ module.exports.registerBuildCommand = function (api, options) {
         addBuildWebpackConfig(api, options, config, target, args)
       })
       // 根据目标获取构建配置
-      const webpackConfig = resolveBuildWebpackConfigByTarget(
+      const webpackConfig = await resolveBuildWebpackConfigByTarget(
         api,
         options,
         target,

diff --git a/packages/vue-cli-plugin-mpx/commands/serve/mp.js b/packages/vue-cli-plugin-mpx/commands/serve/mp.js
@@ -5,10 +5,10 @@ const { handleWebpackDone } = require('../../utils/webpack')
 const { resolveServeWebpackConfigByTarget } = require('../../config/index')
 
 /** @type {import('@vue/cli-service').ServicePlugin} */
-module.exports.serveMp = function serveMp (api, options, args) {
+module.exports.serveMp = async function serveMp (api, options, args) {
   const target = getCurrentTarget()
   // 小程序构建配置
-  const webpackConfigs = resolveServeWebpackConfigByTarget(api, options, target, args)
+  const webpackConfigs = await resolveServeWebpackConfigByTarget(api, options, target, args)
   return new Promise((resolve, reject) => {
     webpack(webpackConfigs).watch({}, (err, stats) => {
       handleWebpackDone(err, stats, true)

diff --git a/packages/vue-cli-plugin-mpx/commands/serve/web.js b/packages/vue-cli-plugin-mpx/commands/serve/web.js
@@ -28,7 +28,7 @@ module.exports.serveWeb = async (api, options, args) => {
 
   // resolve webpack config
   const target = getCurrentTarget()
-  const webpackConfig = resolveServeWebpackConfigByTarget(
+  const webpackConfig = await resolveServeWebpackConfigByTarget(
     api,
     options,
     target,

diff --git a/packages/vue-cli-plugin-mpx/config/index.js b/packages/vue-cli-plugin-mpx/config/index.js
@@ -39,18 +39,18 @@ function validWebConfig (webpackConfigs, api, options) {
  * @param { import('@vue/cli-service').ProjectOptions } options
  * @returns
  */
-function resolveBuildWebpackConfigByTarget (api, options, target, args) {
+async function resolveBuildWebpackConfigByTarget (api, options, target, args) {
   // 强制添加一个修改webpack配置的方法，因为webpack-chain不支持webpack5
   addRawConfigBeforeUserConfig(api, resolveBaseRawWebpackConfig(api, options, target))
   let webpackConfigs
   if (target.mode === 'web') {
     // web配置，使用vue-cli内置的方法获取配置 + mpx-cli 修改后的配置
     const resolveAppConfig = require('@vue/cli-service/lib/commands/build/resolveAppConfig')
-    webpackConfigs = [resolveAppConfig(api, args, options)]
+    webpackConfigs = [await resolveAppConfig(api, args, options)]
     validWebConfig(webpackConfigs, api, options)
   } else {
     // 小程序配置，使用mpx-cli内置的配置
-    webpackConfigs = [api.resolveWebpackConfig()]
+    webpackConfigs = [await api.resolveWebpackConfig()]
     // 小程序插件构建配置
     addPluginConfig(api, options, target, webpackConfigs)
   }
@@ -63,10 +63,10 @@ function resolveBuildWebpackConfigByTarget (api, options, target, args) {
  * @param { import('@vue/cli-service').ProjectOptions } options
  * @returns
  */
-function resolveServeWebpackConfigByTarget (api, options, target, args) {
+async function resolveServeWebpackConfigByTarget (api, options, target, args) {
   // 强制添加一个修改webpack配置的方法，因为webpack-chain不支持webpack5
   addRawConfigBeforeUserConfig(api, resolveBaseRawWebpackConfig(api, options, target))
-  const webpackConfigs = [api.resolveWebpackConfig()]
+  const webpackConfigs = [await api.resolveWebpackConfig()]
   if (target.mode === 'web') {
     validWebConfig(webpackConfigs, api, options)
     return webpackConfigs[0]