fix(transform): optimize transform devServer

originjs · Jun 22, 2021 · 01b4d30 · 01b4d30
1 parent 3da592e
commit 01b4d30
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 25 deletions.
diff --git a/src/transform/transformVuecli.ts b/src/transform/transformVuecli.ts
@@ -1,12 +1,12 @@
-import { parseVueCliConfig } from '../config/parse';
-import Config from 'webpack-chain';
-import merge from 'webpack-merge';
-import { initViteConfig, Transformer } from './transformer';
-import { ViteConfig, RawValue } from '../config/vite';
-import path from 'path';
-import { TransformContext } from './context';
-import { getVueVersion } from '../utils/version';
-import { DEFAULT_VUE_VERSION } from '../constants/constants';
+import { parseVueCliConfig } from '../config/parse'
+import Config from 'webpack-chain'
+import merge from 'webpack-merge'
+import { initViteConfig, Transformer } from './transformer'
+import { ViteConfig, RawValue } from '../config/vite'
+import path from 'path'
+import { TransformContext } from './context'
+import { getVueVersion } from '../utils/version'
+import { DEFAULT_VUE_VERSION } from '../constants/constants'
 
 /**
  * parse vue.config.js options and transform to vite.config.js
@@ -39,21 +39,7 @@ export class VueCliTransformer implements Transformer {
       }
 
       // server options
-      if (vueConfig.devServer) {
-        const devServer = vueConfig.devServer
-        config.server = {}
-        config.server.strictPort = false
-        config.server.port = Number(process.env.PORT) || devServer.port
-        const host = process.env.DEV_HOST || devServer.public || devServer.host
-        if (host) {
-          config.server.host = host
-            .replace('http://', '')
-            .replace('https://', '')
-        }
-        config.server.open = devServer.open
-        config.server.https = devServer.https
-        config.server.proxy = devServer.proxy
-      }
+      vueConfig.devServer && this.transformDevServer(vueConfig, config)
 
       // build options
       config.build = config.build || {}
@@ -127,4 +113,42 @@ export class VueCliTransformer implements Transformer {
 
       context.config.plugins = plugins
     }
+
+    public transformDevServer (vueConfig, config): void {
+      const devServer = vueConfig.devServer
+      config.server = {}
+      config.server.strictPort = false
+      config.server.port = Number(process.env.PORT) || devServer.port
+      const host = process.env.DEV_HOST || devServer.public || devServer.host
+      if (host) {
+        config.server.host = host
+          .replace('http://', '')
+          .replace('https://', '')
+      }
+      config.server.open = devServer.open
+      config.server.https = devServer.https
+      const proxy = devServer.proxy
+      if (typeof proxy === 'object') {
+        for (const proxyKey in proxy) {
+          if (Object.prototype.hasOwnProperty.call(proxy, proxyKey)) {
+            const pathRewrite = proxy[proxyKey].pathRewrite
+            if (!pathRewrite) {
+              break
+            }
+            if (typeof pathRewrite === 'object') {
+              Object.keys(pathRewrite).forEach(key => {
+                const content = new RegExp(key)
+                const replaceContent = pathRewrite[key] || "''"
+                proxy[proxyKey].rewrite = new RawValue(`(path) => path.replace(${content}, ${replaceContent})`)
+              })
+            }
+            if (typeof pathRewrite === 'function') {
+              proxy[proxyKey].rewrite = proxy[proxyKey].pathRewrite
+            }
+            delete proxy[proxyKey].pathRewrite
+          }
+        }
+      }
+      config.server.proxy = proxy
+    }
 }
diff --git a/tests/transform.test.ts b/tests/transform.test.ts
@@ -1,6 +1,7 @@
 import { VueCliTransformer } from "../src/transform/transformVuecli";
 import path from 'path';
-import {RawValue} from "../src/config/vite";
+import {RawValue, ViteConfig} from "../src/config/vite";
+import {VueCliConfig} from "../src/config/vuecli";
 
 test('transformer', async() => {
     const configPath = path.resolve('./tests/testdata/vue.config.js');
@@ -24,4 +25,31 @@ describe('transform vue-cli config', () => {
        const viteConfig = await transformer.transform(rootDir);
        expect(viteConfig.plugins).toContainEqual(new RawValue('createVuePlugin({jsx:true})'));
     });
+
+    test('transform devServer', () => {
+        const vueConfig: VueCliConfig = {
+            devServer: {
+                proxy: {
+                    '/api': {
+                        pathRewrite: {
+                            '^/remove/api' : '',
+                        }
+                    }
+                }
+            }
+        }
+        const viteConfig: ViteConfig = {}
+        const transformer = new VueCliTransformer();
+        transformer.transformDevServer(vueConfig, viteConfig)
+        expect(viteConfig).toEqual({
+            server: {
+                proxy: {
+                    '/api': {
+                        rewrite: new RawValue(`(path) => path.replace(/^\\/remove\\/api/, '')`)
+                    }
+                },
+                "strictPort": false
+            }
+        });
+    });
 })