fix: optimize server options convert

originjs · Jul 19, 2021 · bbe7a64 · bbe7a64
1 parent eaf60a6
commit bbe7a64
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/src/transform/transformVuecli.ts b/src/transform/transformVuecli.ts
@@ -8,6 +8,7 @@ import { TransformContext } from './context'
 import { getVueVersion } from '../utils/version'
 import { DEFAULT_VUE_VERSION } from '../constants/constants'
 import { recordConver } from '../utils/report'
+import { ServerOptions } from 'vite';
 
 /**
  * parse vue.config.js options and transform to vite.config.js
@@ -48,7 +49,8 @@ export class VueCliTransformer implements Transformer {
       }
       recordConver({ num: 'V02', feat: 'css options' })
       // server options
-      vueConfig.devServer && this.transformDevServer(vueConfig, config)
+      vueConfig.devServer && (config.server = this.transformDevServer(vueConfig.devServer))
+      recordConver({ num: 'V03', feat: 'server options' })
 
       // build options
       config.build = config.build || {}
@@ -104,26 +106,26 @@ export class VueCliTransformer implements Transformer {
       return config
     }
 
-    public transformDevServer (vueConfig, config): void {
-      const devServer = vueConfig.devServer
-      config.server = {}
-      config.server.strictPort = false
-      config.server.port = Number(process.env.PORT) || devServer.port
+    public transformDevServer (devServer): ServerOptions {
+      let server: ServerOptions = {}
+      server = {}
+      server.strictPort = false
+      server.port = Number(process.env.PORT) || devServer.port
       const host = process.env.DEV_HOST || devServer.public || devServer.host
       if (host) {
-        config.server.host = host
+        server.host = host
           .replace('http://', '')
           .replace('https://', '')
       }
-      config.server.open = devServer.open
-      config.server.https = devServer.https
+      server.open = devServer.open
+      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
+              continue
             }
             if (typeof pathRewrite === 'object') {
               Object.keys(pathRewrite).forEach(key => {
@@ -139,7 +141,7 @@ export class VueCliTransformer implements Transformer {
           }
         }
       }
-      config.server.proxy = proxy
-      recordConver({ num: 'V03', feat: 'server options' })
+      server.proxy = proxy
+      return server
     }
 }
diff --git a/src/transform/transformWebpack.ts b/src/transform/transformWebpack.ts
@@ -8,6 +8,7 @@ import { Entry } from '../config/webpack'
 import { isObject } from '../utils/common'
 import { recordConver } from '../utils/report'
 import { getVueVersion } from '../utils/version';
+import { ServerOptions } from 'vite';
 
 // convert webpack.config.js => vite.config.js
 export class WebpackTransformer implements Transformer {
@@ -78,13 +79,7 @@ export class WebpackTransformer implements Transformer {
       config.resolve.alias = defaultAlias
       recordConver({ num: 'W03', feat: 'resolve.alias options' })
       // convert devServer
-      if (webpackConfig.devServer !== undefined) {
-        config.server.host = webpackConfig.devServer.host
-        config.server.port = webpackConfig.devServer.port
-        config.server.proxy = webpackConfig.devServer.proxy
-        config.server.https = webpackConfig.devServer.https
-        config.server.base = webpackConfig.devServer.contentBase
-      }
+      webpackConfig.devServer && (config.server = this.transformDevServer(webpackConfig.devServer))
       recordConver({ num: 'W04', feat: 'server options' })
       // convert plugins
       // webpack.DefinePlugin
@@ -102,6 +97,46 @@ export class WebpackTransformer implements Transformer {
       recordConver({ num: 'W05', feat: 'define options' })
       return config
     }
+
+    public transformDevServer (devServer): ServerOptions {
+      let server: ServerOptions = {}
+      server = {}
+      server.strictPort = false
+      server.port = Number(process.env.PORT) || devServer.port
+      const host = process.env.DEV_HOST || devServer.public || devServer.host
+      if (host) {
+        server.host = host
+          .replace('http://', '')
+          .replace('https://', '')
+      }
+      server.open = devServer.open
+      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) {
+              continue
+            }
+            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
+          }
+        }
+      }
+      server.proxy = proxy
+      server.base = devServer.contentBase
+      return server
+    }
 }
 
 function suitableFormat (entry: Entry) : Entry {

diff --git a/tests/transform.test.ts b/tests/transform.test.ts
@@ -29,6 +29,9 @@ describe('transform vue-cli config', () => {
     const vueConfig: VueCliConfig = {
       devServer: {
         proxy: {
+          '/test': {
+            target: 'http://www.example.org'
+          },
           '/api': {
             pathRewrite: {
               '^/remove/api': ''
@@ -39,10 +42,13 @@ describe('transform vue-cli config', () => {
     }
     const viteConfig: ViteConfig = {}
     const transformer = new VueCliTransformer();
-    transformer.transformDevServer(vueConfig, viteConfig)
+    viteConfig.server = transformer.transformDevServer(vueConfig.devServer)
     expect(viteConfig).toEqual({
       server: {
         proxy: {
+          '/test': {
+            target: 'http://www.example.org'
+          },
           '/api': {
             rewrite: new RawValue('(path) => path.replace(/^\\/remove\\/api/, \'\')')
           }